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. megamenu.js

    JavaScript

    レスポンシブでスマートなメガメニューを実装できる「megamenu.js」

    megamenu.jsはjQueryを使ったレスポンシブでスマートなメ…

  2. ResponsifyJS

    JavaScript

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

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

  3. no-image

    JavaScript

    手軽にパララックス効果を実装できるシンプル・軽量な「simpleParallax」

    simpleParallaxは、手軽にパララックス効果を画像に実装する…

  4. jquery.adaptive-backgrounds.js
  5. jQuery Notebook
  6. no-image

最近の記事

  1. LE エルイー 6 PANEL CAP
  2. タリーズ ハウスブレンド
  3. BAG-TW1BKシリーズ
  4. 落ち葉と雪

アーカイブ

PAGE TOP