no-image

JavaScript

レスポンシブなタブ・アコーディオン機能を実装できる「Multipurpose Tabcontent jQuery」

Multipurpose Tabcontent jQueryは、レスポンシブに対応したタブ・アコーディオン機能を実装できるjQueryプラグインです。ベーシックなタブコンテンツからアコーディオン、サイドに配置する縦型のタブ、前後切替ボタン付きのタブなど、カスタマイズ次第でいろんなタブコンテンツを実装できます。

モバイルでは縦型アコーディオンになる

Multipurpose Tabcontent jQuery

デモでは、Basic Tab、Accordion Example、Tab on Right Side、Tab on Left Sideの4つのサンプルが用意されています。

ベーシックなタイプのタブでは、一般的なタブコンテンツのように上部に各タブが横に配置されていて、任意のタブをクリックすることでその下にあるコンテナ内にそのタブに応じたコンテンツが表示されます。

アコーディングでは縦にタブが並べられていて、任意のタブをクリックするとそのタブに付随するコンテンツが開かれます。他のタブを選択すると現在開かれているコンテンツが閉じられて新しいコンテンツが展開される仕組みです。

ほかにも、右側にタブを配置したものや「PREVIOUS」「NEXT」ボタンが設置されたものもあり、柔軟にカスタマイズできるところがいいですね。

Multipurpose Tabcontent jQueryはレスポンシブにも対応していることから、画面を縮小していくと特定のポイントでモバイル版に切り替わります。ちなみにモバイル版はブレイクポイントに基づきすべて縦型アコーディオンに変換されます。スマホなど画面の小さい縦長のデバイスでは、やはりこの仕様が一番操作しやすいですね。

オプションには、plugin_type、side、active_tab、controllers、ajax、show_ajax_content_in_tab、content_pathといった項目が用意されています。タブかアコーディオンを選ぶ場合は、plugin_typeの値を設定してあげます。デフォルトではtabになっているので、アコーディオンにしたいならここをaccordionに指定します。

また、タブの配置はsideから設定可能です。こちらはデフォルトではtopになっています。ほかにも、leftかrightの指定ができます。

タブのコンテンツにはAjaxも使用できるし、クロスブラウザにも対応(IE+、Chrome、Firefox、Safari、Opera)するなど、実用性の高い機能・性能を備えています。

カスタマイズ可能なレスポンシブ対応のタブ・アコーディオン機能を実装したい人は、ぜひ「Multipurpose Tabcontent jQuery」を活用されてみてはいかがでしょうか?

Auto-Text-Scroll自動でテキストが垂直にスクロールしていく「Auto-Text-Scroll」前のページ

48種類のリラックスサウンドで睡眠時や作業中のBGMに最適なMacアプリ「Relax Melodies」次のページRelax Melodies

関連記事

  1. LC Micro Slider
  2. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryで$.inArrayを使えば配列の中に指定した値が何番目に入ってるか知ることができる

    jQueryで配列の中に自分が指定した値が何番目にあるか知りたい場合は…

  3. jQuery Slideshow

    JavaScript

    シンプル・軽量・レスポンシブなスライダー実装「jQuery Slideshow」

    jQuery Slideshowはシンプルで軽量、そしてレスポンシブに…

  4. xGallerify

    JavaScript

    サイズが異なる画像でもキレイに表示できるギャラリー実装「xGallerify」

    xGallerifyはギャラリーを作成するのに最適なjQueryプラグ…

  5. jQuery Inline Footnotes

    JavaScript

    ホバーで脚注を表示できる「jQuery Inline Footnotes」

    jQuery Inline Footnotesはホバーすることで脚注の…

  6. JavaScript

    多層に重なり合う美しいグラデーションの背景を実装できるjQueryプラグイン「SHARDS」

    多層に重なり合う美しいグラデーションの背景を実装できるjQueryプラ…

最近の記事

  1. スタバ ドリップコーヒー
  2. エチオピア
  3. 紗々 飴色和栗
  4. DCG-CA21
  5. Apple WatchでのMacロック解除を無効

アーカイブ

PAGE TOP