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. Squishy

    JavaScript

    テキストをコンテナに合わせて自動でサイズ変更してくれるjQueryプラグイン「Squishy」

    SquishyというjQueryプラグインを使えばテキストをコンテナに…

  2. ResponsifyJS

    JavaScript

    画像で見せたいエリアを保持しながらレスポンシブにできる「ResponsifyJS」

    ResponsifyJSは画像のなかで見せたいエリアを保持させながらレ…

  3. jQuery Tooltip Basic

    JavaScript

    カスタマイズしやすいツールチップ実装「jQuery Tooltip Basic」

    jQuery Tooltip Basicは、カスタマイズしやすいツール…

  4. Jquery modal box plugin
  5. JavaScript

    ボタンやアイコンに素敵なクリックエフェクトを実装できる「Waves」

    ボタンやアイコンに素敵なクリックエフェクトを実装することができる「Wa…

  6. ARIA TOOLTIP

    JavaScript

    WAI ARIAを活用したユーザーフレンドリーなツールチップ実装「ARIA TOOLTIP」

    ARIA TOOLTIPはWAI ARIAを活用したユーザーフレンドリ…

最近の記事

  1. EH-NA0B
  2. KPS-88
  3. Happy Plugs AIR1
  4. cheero Stream 10000mAh
  5. BOSE HOME SPEAKER 300

アーカイブ

PAGE TOP