第42回 
jQueryの基本のキ【その2】:プラグインを使うテーブルレイアウトを卒業しよう

jQueryの基本のキ【その2】:プラグインを使う

前回はjQueryとは何か、そしてその基本的な使い方について紹介しました。今回は、jQueryのプラグインを使ってみましょう。

jQueryのプラグインとは

プラグインとはjQueryの拡張機能で、さまざまな種類かつ、膨大な量のプラグインが公開されており(自作も可能)、基本的にはjQueryを使えるようにしておけば、容易に導入/カスタマイズすることが可能です。

Plugins | jQuery Plugins

jQueryの公式サイトでもカテゴリー別に各種のプラグインが公開されています。ご覧いただくとわかりますが、ここだけでも膨大な数があります。

プラグインを導入しよう

では今回はリスト要素をタブの様に表示してくれるプラグインの1つ、featureListを使ってみます。膨大な数のプラグインの中でも比較的簡単に導入できるので、jQueryの雰囲気がつかめるはずです。

featueList

たった2kのjsファイルで、導入も超簡単、自在にカスタマイズできるスグレモノです。

デモページを見る。

まずは前回ご紹介したとおり、jQueryを使えるようにしておきます。

<script type="text/javascript"
src="jQuery.js"></script>

つぎに、featureListのプラグインを導入します。

jquery.featureList- 1.0.0.zipをダウンロードして解凍し、jquery.featureList- 1.0.0.jsをscriptタグで指定します。

<script type="text/javascript"
src="jquery.featureList-1.0.0.js"></script>

これで下準備は完了。

あとはサイトのHow to Useに書かれているとおりに実行します。

<script type="text/javascript">
$(document).ready(function() {
$.featureList(
$("#tabs li a"),
$("#output li"), {
start_item : 0
}
);
});
</script>

コー ドを見ると判りますが、$("#tabs li a")が、クリックするタブの部分のセレクタ、$("#output li")が切り替わる部分です。

この部分は自分のページにあわせて変えておけばOK。start_itemの部分は「何番目のタブを初期表示にするか」 で、0が先頭です。

また、この featureListにはCSSファイルも同梱されているので、CSSが読めれば大きさや配置、画像などのカスタマイズはとても簡単です。

次回はさまざまなプラグインをご紹介します。

では次回もお楽しみに。(こう鈴木 航 (すずきこう)

次のページは…
簡単オススメ jQuerysプラグインまとめのまとめ:jQueryの基本のキ【その3】
関連リンク
鈴木 航 (すずき こう)
鈴木 航 (すずき こう)

XHTML、CSSなどのWeb関連技術を得意とする。かぼちゃの煮物が嫌い。

CSS 3分コーディング

RSSフィードで
最新情報を購読