Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

jQuery UI/プラグインの活用(4)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2011/01/06 14:00

ダウンロード Sample.zip (1.1 MB)

 本連載では、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 サンプルファイルの配置図
図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 メニュープラグイン使用時
図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が入れ子になっています。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

  • WINGSプロジェクト asa(asa)

     <WINGSプロジェクトについて>  有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

バックナンバー

連載:jQuery UI/プラグインの活用

もっと読む

All contents copyright © 2005-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5