no-image

JavaScript

タブやアコーディオンを実装できるjQueryプラグイン「jpix」

jpixはシンプルなタブやアコーディオンを実装することができるjQueryプラグインです。これ1つでタブもアコーディオンも表示可能なのはとても便利ですね。タブ用、アコーディオン用のオプションもいくつか用意されています。

jpix

jpix

デモでは実装されたタブとアコーディオンが設置されています。タブ、アコーディオンともにとてもシンプルなデザインに仕上がっています。

アコーディオンでは各アイテムをクリックすると、スライドダウンで子メニューが表示されます。再度同じアイテムをクリックすると、今度はスライドアップで子メニューが閉じられます。ちなみに、別のアイテムをクリックすると、現在開かれている子メニューが閉じられると同時に新しくクリックされたアイテムの子メニューが表示されます。

シンプルなデザインなので、さまざまなページに設置しやすいのではないでしょうか?

また、タブ・アコーディオンともにオプションもいくつか用意されています。

タブのオプションは、activeClass、activeContent、dataAttrです。アコーディオンのオプションは、openDefault、activeClass、activeContent、dataClassです。

実用的な機能もオプションから手軽にセッティングが可能です。

というわけで、シンプルなタブやアコーディングを実装できるjQueryプラグイン「jpix」のご紹介でした。

関連記事

  1. share-this

    JavaScript

    テキストを選択してシェアできるMediumライクな「share-this」

    share-thisはテキストを選択して手軽にTwitterやFace…

  2. Letter Drop

    JavaScript

    雨のように文字が落ちてくるアニメーションのjQueryプラグイン「Letter Drop」

    Letter DropというjQueryプラグインを使えば、雨のように…

  3. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryのeachメソッドのお勉強

    今回はjQueryのeachメソッドを使ってみました。なんかとても便利…

  4. Multipicker

    JavaScript

    要素を選択するときに直感的な操作を実現する「Multipicker」

    Multipickerは、日付や曜日、番号、その他さまざまな要素を選択…

  5. no-image

    JavaScript

    豊富なオプションでカスタマイズ性も高いjQueryスライダー「startVal」

    startValは豊富なオプションやAPIを有したカスタマイズ性の高い…

  6. DD Scroll Boxes

最近の記事

  1. ベーコンエッグ&厚切りバタートースト
  2. 有栖川公園
  3. 広尾のスタバ
  4. マーガレットハウエルとミズノのコラボシューズ
  5. フレンチトーストや自家製ソーセージ

アーカイブ

PAGE TOP