【CSSフレームワーク】Foundationに標準で付いているjQueryプラグイン一覧

css

CSSフレームワークといえば、BootStrapが王道とは思いますが、他CSSフレームワークも大分知名度を上げてきています。

今回は、個人的に注目している、CSSフレームワークのFoundationに梱包されているjQueryプラグインを紹介します。
Foundationを導入(インストール)したらすぐに使えるプラグイン達ばかりです。

[スポンサーリンク]

以前、Foundationの導入(インストール手順)を紹介しました。
Foundationの導入がまだの方は、コチラを参考にして下さい。

この章でやること

FoundationのjQueryプラグインを紹介します。

FoundationのjQueryプラグイン

Foundationの公式サイトに、Foundationに標準で用意されているjQueryプラグインが載っています。
2013年10月の時点で、10個のjQueryプラグインが使用可能です。

css-foundation-jquery1

FoundationのjQueryプラグインでどんなことが出来るの?

Foundationの公式サイトで動作を確認することが出来ます。
どんなことが出来るのか、以下に要約しますと、、、

  1. Abide (入力値チェック)
  2. Clearing (画像を特定のボックスへ表示する。)
  3. Dropdown (ボタンを押すと、画像がにゅっと出てくる)
  4. Interchange (ブラウザに適した画像を表示する。)
  5. Joyride (サイトツアー。)
  6. Magellan (sticky navigationです。スクロールに追従するメニューを表示します。)
  7. Orbit (画像を自動的にスライドして切り替えます。)
  8. Reveal (小窓を表示します。説明文などによく用いられる感じです。)
  9. Sections (テーブルタブを表示します。)
  10. Tooltips (吹き出しです。)

注意!!

これらのjQueryプラグインを使うにあたって、その他の類似するjQueryプラグインを入れる時は気を付けましょう。
class名や関数名がコンフリクト(競合)してしまい、正常に動作しない場合もあります。

わたしの場合は、jQueryプラグイン「Tooltipster」と、Foundationの吹き出し(Tooltips)がコンフリクト(競合)してしまい、吹き出しが正常に動作しませんでした。(TT)

FoundationのjQueryプラグインを使ったサンプルページ

吹き出しを表示するシンプルなサンプルページを作りました。
Foundationに標準で付いているjQueryプラグインを使用するのに必要な手順は、13行目のように、jsを読込むのみでほぼOKです。
jsを読込んだ後は、ドキュメントにしたがってjsを使っていきましょう。

<body>

  <div class="row">
    <div class="large-12 columns">
      <h2>Welcome to Foundation</h2>
      <p>This is version 4.3.2.</p>
      <hr />
      <span data-tooltip class="has-tip" title="吹き出し">プリーズ!</span>
    </div>
  </div>

  <script src="js/foundation.min.js"></script>
  <script src="js/foundation/foundation.tooltips.js"></script>
  <script>
    $(document).foundation();
  </script>
</body>

デモ

実際に動かすことが出来ます

さいごに

Foundationに標準で付いているjQueryプラグイン、想定していたよりも実用的なものがあったのではないでしょうか。
私は当初はあまり期待していませんでしたが、意外とメジャーどころがあって、軽く驚いたことを覚えています。

個人的によく使うのは、Abide (入力値チェック)、Joyride (サイトツアー。)、Tooltips (吹き出しです。)の3つでしょうか。

これら3つのプラグインは、それぞれが単独でjQueryプラグインを持つほどのメジャーどころだと思います。
Foundationを使うことで、普段から使っているjQueryプラグインが梱包されていると、なんだか得した気分になります。(笑)
ただしコンフリクト(競合)には気を付けましょう!
それでは!