jQueryの基本的な機能が理解できたところで、後半は、jQueryプラグインについて紹介していきます。jQueryプラグインとは、jQueryの拡張ライブラリです。jQueryオブジェクトに対して新しいメソッド(機能)を追加できます。jQueryはそれ単体でも十分有用なライブラリですが、種々のプラグインを導入することで、自分の用途に応じていかようにも成長させられます。

 なお、プラグインのスクリプト(.jsファイル)はjQueryよりもあとに読み込まなければなりません。プラグインはjQueryをベースとしていますので、jQueryを先に有効にしておかないと、正しく動作しません

リストからリッチなドロップダウンメニューを生成する
Apycom Menu

[URL]http://apycom.com/
[必要なファイル]menu.js、menu.css

Apycom Menuで生成したドロップダウンメニュー
Apycom Menuで生成したドロップダウンメニュー
[画像のクリックで拡大表示]

 Apycom Menuは、<ul>/<li>タグで定義されたリストをリッチなドロップダウンメニューに整形するためのプラグインです。jQueryのプラグインですが、利用にあたってjQueryのコードを書く必要はありません。あらかじめ決められた規則に従ってマークアップしていれば、あとはApycom Menuが勝手にメニューに整形してくれます。本家サイトにはおよそ100近くのスタイルが用意されていますので(図1)、サイトデザインに応じて最適なものを選択できます。

図1●ApycomStyle.bmp(標準で提供されているApycom Menuのデザイン
図1●ApycomStyle.bmp(標準で提供されているApycom Menuのデザイン
リスト1●Apycom Menuでドロップダウンメニューを生成(ApycomMenu.html)
リスト1●Apycom Menuでドロップダウンメニューを生成(ApycomMenu.html)
[画像のクリックで拡大表示]

 リスト1は、Apycom Menuを利用したサイトメニューの例です。Apycom Menuを利用する場合は、表1のルールに従ってマークアップします。

 サンプルの「書籍情報」は、複数階層の構成で配下に3階層設定しています。「オンライン公開記事」は、1つ下の階層に複数列のメニューを表示しています。上記のURLからダウンロードしたサンプルでは、これらのマークアップが既に出来上がっています。

表1●Apycom Menuを利用する場合のルール
表1●Apycom Menuを利用する場合のルール

 なお、Apycom Menuは無償で利用できる代わりに、利用に当たっては、ページの適当な場所に「<a href="http://apycom.com/">jQuery Menu by Apycom</a>」のようなリンクを張る必要があります。