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」を活用されてみてはいかがでしょうか?

関連記事

  1. jquery.peekABar

    JavaScript

    様々なカスタマイズができる便利な通知バー「jquery.peekABar」

    jquery.peekABarは様々なカスタマイズが可能な通知バー(通…

  2. Shine

    JavaScript

    ダイナミック(動的)で美しいシャドウを実装できるJSライブラリ「Shine」

    ShineというJavaScriptライブラリが素敵だったのでメモがて…

  3. jQuery Glow
  4. jQuery-TimelineMe

    JavaScript

    シンプルなタイムラインを簡単につくれる「jQuery-TimelineMe」

    jQuery-TimelineMeは、タイムラインを簡単に構築すること…

  5. no-image

    JavaScript

    シンプル・軽量なアナログ時計を実装できる「jsRapClock」

    jsRapClockはシンプルで軽量なアナログ時計を実装できるjQue…

  6. jQuery Modal

    JavaScript

    シンプルでレスポンシブなモーダルボックス「jQuery Modal」

    jQuery Modalはシンプルでレスポンシブに対応したモーダルボッ…

最近の記事

  1. Anker PowerPort Atom PD 4
  2. USB-2H401BKN
  3. Dyson Pure Cool Me
  4. ルック セレクション

アーカイブ

PAGE TOP