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

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

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

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

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を利用したサイトメニューの例です。Apycom Menuを利用する場合は、表1のルールに従ってマークアップします。

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

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

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

この先は会員の登録が必要です。有料会員(月額プラン)は登録月無料!

日経 xTECHには有料記事(有料会員向けまたは定期購読者向け)、無料記事(登録会員向け)、フリー記事(誰でも閲覧可能)があります。有料記事でも、登録会員向け配信期間は登録会員への登録が必要な場合があります。有料会員と登録会員に関するFAQはこちら