手軽に扱えるjQueryプラグインを使ってみよう

jQuery UI／プラグインの活用（4）

　本連載では、JavaScriptライブラリの中でも人気が高まりつつあるjQuery UIとプラグインを取り上げます。今回はメニューバー、タブ、画像のスライダー、ズーム機能、ツイッターのタイムライン表示といった「jQuery Plugin」を取り上げます。

はじめに

　第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）。

表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に示します。

図1　サンプルファイルの配置図

メニュープラグインを使ってみよう

　はじめにメニュープラグインを追加し、「メニューを表示する」サンプルを作成していきましょう。ここからプラグインをダウンロードします。apycom.comにはデザイン性の高いメニュープラグインが多数用意されています。必要に応じて好みのスタイルと色を選択してください。

　今回はapycom.com-1-blackを使用します。例えば、このスタイルでは白、水色、黄緑、オレンジ、灰色、黒といった6種類の中から選択できます。apycom.com-1-black.zipというファイルがダウンロードされるので、解凍後、pluginsにコピーします。

　なお、apycom.comで提供されているメニュープラグインは有償版と無償版があり、今回は無償版を利用します。無償版の使用には、リスト1のような記述が必要です（http://apycom.com/help.htmlを参照）。

リスト1　メニュープラグイン使用時の表記

<a href="http://apycom.com/">jQuery Menu by Apycom</a>

　続いて、リスト2のように、jQueryとメニュープラグイン、メニュープラグインのスタイルシートを読み込みます。

リスト2　プラグインの読み込み（jQueryPlugin_menu.html）

<!--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に、メニューの基本的な構造を示します。

リスト3　メニューの入れ子構造

<ul class="menu">
    <li>
        <a href="リンク先URLを指定" class="classを指定">
        <span>メニューに表示させる文字</span>
        </a>
        ＊＊メニュー項目の記述＊＊
    </li>
</ul>

　また、メニュー構造を入れ子にしたい場合は、ul要素とul要素の組み合わせを追加します（リスト4）。この場合、li要素のclassを"parent"に指定します。今回のサンプルでの使用例をリスト4に示します。

リスト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に、メニュープラグイン使用時の結果を示します。

図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が入れ子になっています。