はじめに
第3回「フォーム入力に役立つjQueryプラグイン」では、第1回「jQuery UIのインタラクションを使ってみよう」でも簡単に触れた、jQuery Pluginのフォーム入力にフォーカスを当て、Input Hint Overlay、Text input field filter、jQuery Validation、Simplest Twitter-like dynamic character count、jQuery-narrative-selectを取り上げました。第4回ではメニューバー、タブ、画像のスライダー、ズーム機能、Twitterのタイムライン表示といったjQuery Pluginを解説します。
対象読者
- jQueryプラグインに興味があり、使ってみたい方
必要な環境と準備
jQueryのダウンロード
執筆時点のjQueryの最新版は1.4.2です。第1回を参考にダウンロードしてください。また、jQuery Pluginの基本的な使い方は第2回を参照してください。
取り上げるプラグインとサンプル作成の概要
本稿では、次の5つのプラグインを取り上げます（表1）。
| 分類 | サンプル名 | 概要 |
| メニュー | jQueryPlugin_menu.html | メニュープラグインを用いたサンプル |
| タブ | jQueryPlugin_menu_tab.html | タブプラグインを用いたサンプル |
| 画像のスライダー | jQueryPlugin_menu_Slider.html | 画像のスライダープラグインを用いたサンプル |
| ズーム機能 | jQueryPlugin_menu_zoom.html | ズーム機能プラグインを用いたサンプル |
| Twitterのタイムライン表示 | jQueryPlugin_menu_twit1.html、jQueryPlugin_menu_twit2.html | Twitterのタイムライン表示プラグインを用いたサンプル |
サンプルでは、htmlファイルと同じ階層にpluginsフォルダを作成し、使用するプラグイン関連のファイルをまとめて配置します。また、jsフォルダにはjQuery本体を配置しておきます。配置の関係図を図1に示します。
メニュープラグインを使ってみよう
はじめにメニュープラグインを追加し、「メニューを表示する」サンプルを作成していきましょう。ここからプラグインをダウンロードします。apycom.comにはデザイン性の高いメニュープラグインが多数用意されています。必要に応じて好みのスタイルと色を選択してください。
今回はapycom.com-1-blackを使用します。例えば、このスタイルでは白、水色、黄緑、オレンジ、灰色、黒といった6種類の中から選択できます。apycom.com-1-black.zipというファイルがダウンロードされるので、解凍後、pluginsにコピーします。
なお、apycom.comで提供されているメニュープラグインは有償版と無償版があり、今回は無償版を利用します。無償版の使用には、リスト1のような記述が必要です（http://apycom.com/help.htmlを参照）。
<a href="http://apycom.com/">jQuery Menu by Apycom</a>
続いて、リスト2のように、jQueryとメニュープラグイン、メニュープラグインのスタイルシートを読み込みます。
<!--1．jQueryの読み込み//--> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <!--2．プラグインの読み込み//--> <script type="text/javascript" src="plugins/apycom.com-1-black/menu.js"></script> <!--3．プラグインのスタイルシートの読み込み//-->; <link type="text/css" href="plugins/apycom.com-1-black/menu.css" rel="stylesheet" />
メニューでは、idに"menu"を指定したdiv要素の中にul要素のclassである"menu"を指定し、メニューの数だけli要素と遷移先のURLを記述します。最後の項目の場合は"last"に指定します。リスト3に、メニューの基本的な構造を示します。
<ul class="menu">
<li>
<a href="リンク先URLを指定" class="classを指定">
<span>メニューに表示させる文字</span>
</a>
＊＊メニュー項目の記述＊＊
</li>
</ul>
また、メニュー構造を入れ子にしたい場合は、ul要素とul要素の組み合わせを追加します（リスト4）。この場合、li要素のclassを"parent"に指定します。今回のサンプルでの使用例をリスト4に示します。
<div id="menu">
<ul class="menu">
<li><a href="./jQueryPlugin_menu.html" class="parent"><span>Home</span></a>
<div><ul>
<li><a href="#"><span>Sub Item 1</span></a></li>
<li><a href="#" class="parent"><span>Sub Item 2</span></a>
<div><ul>
<li><a href="#" class="parent"><span>Sub Item 2.1</span></a>
<div><ul>
<li><a href="./jQueryPlugin_menu.html"><span>Sub Item 2.1.1</span></a></li>
<li><a href="#"><span>Sub Item 2.1.2</span></a></li>
</ul></div>
</li>
</ul></div>
</li>
<li><a href="#"><span>Sub Item 3</span></a></li>
</ul></div>
</li>
<li><a href="./jQueryPlugin_menu_tab.html"><span>Tabサンプル</span></a></li>
<li><a href="./jQueryPlugin_menu_slider.html"><span>sliderサンプル</span></a></li>
<li><a href="./jQueryPlugin_menu_zoom.html"><span>zoomサンプル</span></a></li>
<li class="last"><a href="./jQueryPlugin_menu_twit.html"><span>その他</span></a></li>
</ul>
</div>
図2に、メニュープラグイン使用時の結果を示します。
［Home］メニューには3つのli要素を指定したので、［Home］の下にSub Item1、Sub Item2、Sub Item3の項目が3つ表示されます。Sub Item2にはさらにSub Item2.1が、Sub Item2.1からはSub Item 2.1.1とSub Item 2.1.2が入れ子になっています。
