第42回
jQueryの基本のキ【その2】：プラグインを使うテーブルレイアウトを卒業しよう
jQueryの基本のキ【その2】：プラグインを使う
前回はjQueryとは何か、そしてその基本的な使い方について紹介しました。今回は、jQueryのプラグインを使ってみましょう。
jQueryのプラグインとは
プラグインとはjQueryの拡張機能で、さまざまな種類かつ、膨大な量のプラグインが公開されており（自作も可能）、基本的にはjQueryを使えるようにしておけば、容易に導入／カスタマイズすることが可能です。
jQueryの公式サイトでもカテゴリー別に各種のプラグインが公開されています。ご覧いただくとわかりますが、ここだけでも膨大な数があります。
プラグインを導入しよう
- CSSの使い方を実用サンプルで学ぶ
-
XHTMLとCSSの基礎から学び、Web標準のホームページを作成。正しいマークアップや効率的な運用方法も。
- XHTML & CSS 実践講座
では今回はリスト要素をタブの様に表示してくれるプラグインの1つ、featureListを使ってみます。膨大な数のプラグインの中でも比較的簡単に導入できるので、jQueryの雰囲気がつかめるはずです。
たった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が読めれば大きさや配置、画像などのカスタマイズはとても簡単です。
初心者向けとしてわかりやすいプラグインなので、新講座「実用サンプルで学ぶ Web標準XHTML & CSS実践講座」でも実際に使い方を実習します。
次回はさまざまなプラグインをご紹介します。
では次回もお楽しみに。（こう
）
お問い合わせ
メルマガ