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

    JavaScript

    美しいパララックス効果を最小限のコードで実装できるjQueryプラグイン「Parallaxor」

    Parallaxorは最小限のミニマルなコードで美しいパララックス効果…

  2. Circular Slider
  3. JavaScript

    レスポンシブなLightbox風のギャラリーを実装できるjQueryプラグイン「anoFlow」

    anoFlowというjQueryプラグインを使えば、レスポンシブなLi…

  4. Thumbelina

    JavaScript

    サムネイル画像のギャラリーに最適なコンテンツスライダー「Thumbelina」

    Thumbelinaは、サムネイル画像に最適なコンテンツスライダーを実…

  5. no-image

    JavaScript

    あらかじめ設定したリストなどから複数タグを選択できる「Tokenize2」

    Tokenize2は、あらかじめ設定したリストやAjaxから複数のタグ…

  6. stacky

    JavaScript

    スライドダウン・スライドアップしてコンテンツを整理できるjQueryプラグイン「stacky」

    stackyというjQueryプラグインを使えばコンテンツをスライドダ…

最近の記事

  1. 梅
  2. CAR-HLD12BK
  3. OWL-LPB6701LA

アーカイブ

PAGE TOP