jQuery 1.4の新機能8選＋Tabsプラグインでタブ表示：CSSの書き方も分かるjQueryプラグイン実践活用法（3）（2/3 ページ）

» 2010年02月12日 00時00分公開

【7】animateメソッドのイージングが個別に指定できる

　animate()メソッドで各種プロパティを書き換えるとき、イージングを個々のプロパティに指定できるようになりました。

　以下の例では、widthプロパティに「swing」、heightプロパティに「linear」のイージングを適用させています。

$('div#box').click(function () {
    $(this).animate({
        width: ["+=50px","swing"],
        height: ["-=50px", "linear"]
    });
});

【8】エフェクトを遅らせるdelay()メソッドが追加

　エフェクトを適用するときに一定時間待たせることができるdelay()メソッドが追加されました。delay()の引数には、ミリ秒の単位で待ち時間を指定します。

　以下の例では、<div#box>要素を3秒かけてフェイドアウトした後、1秒間待たせた後に3秒かけてフェイドインしています。

$('div#box').fadeOut(3000).delay(1000).fadeIn(3000);

jQuery UIのTabsプラグインを使ってみる

　さて今回は、最近のWebサイトで当たり前のように見るタブ型メニューをjQueryで表現する方法を学びましょう。

　jQuery UIには「Accordion」「Datepicker」「Dialog」などのプラグインがありますが、ここからは「Tabs」プラグインを使用してタブ型のメニューを作成する手順を解説します。

jQuery UI - Demos & Documentation via kwout

ステップ1：CSSとライブラリをCDN経由で組み込む

　お好みの開発ツールまたはエディタを起動して、新規ファイルを作成したら、<head>要素に<link>要素と<script>要素を追加して、jQuery UIのテーマとjQuery 1.3.2、jQuery UI 1.7.2のライブラリを組み込みます。

<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />……【1】
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>……【2】
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>……【3】
</head>

jQuery UIのテーマ（smoothness）をCDN経由で取り込む
jQuery 1.3.2のライブラリをCDN経由で取り込む
jQuery UI 1.7.2のライブラリをCDN経由で取り込む

ステップ2：XHTMLで骨格を定義する

　<body>要素に<div#tabs>要素を追加したら、<ul>/<li>要素を入れ子にして「タブ#1」「タブ#2」「タブ#3」を定義します。<div#tabs>に<div#tab1>要素を追加して「タブ#1」のコンテンツを定義します。「タブ#1」の<a>要素のhref属性には、<div>要素のidとしてtab1を設定します。同様の手順で「タブ#2」と「タブ#3」のコンテンツを定義します。

<div id="tabs">
  <ul>
    <li><a href="#tab1">タブ #1</a></li>
    <li><a href="#tab2">タブ #2</a></li>
    <li><a href="#tab3">タブ #3</a></li>
  </ul>
  <div id="tab1">
    <p>
      Lorem ipsum mei id labore virtute complectitur, ・・・
    </p>
  </div>
……
</div>

　タブのコンテンツを外部ファイルに定義するときは、<a>要素のhref属性に外部ファイルのURLを設定します。この場合、タブをクリックした時点でコンテンツをロード（「Lazy Loading」と呼ぶ）します。

<ul>
  <li><a href="#tab1">タブ #1</a></li>
  <li><a href="ajax/tab2.htm">タブ #2</a></li>
  <li><a href="ajax/tab3.htm">タブ #3</a></li>
</ul>

ステップ3：Tabsプラグインを組み込む

　<head>要素に<script>要素を追加したら、次のようなコードを追加してjQuery UIのTabsプラグインを組み込みます。ここでは、jQueryのセレクタで<div#tabs>要素を検索してtabs()メソッドを実行しています。

<script type="text/javascript">
  $(function() {
    $('#tabs).tabs();
  });
</script>

　Webブラウザを起動してサンプルを表示すると、タブ型のメニューが表示されます。デフォルトでは、「タブ#1」がアクティブな（選択された）状態で表示されます。「タブ#2」「タブ#3」をクリックすると、コンテンツが切り替わります。アクティブなタブをクリックしたときにコンテンツを閉じるには、tabs()メソッドの引数にcollapsibleオプションを追加して「true」を設定します。

　タブをクリックする代わりにマウスオーバーでコンテンツを開くようにするには、eventオプションを追加して「mouseover」を設定します。

図1　jQuery UIのTabsプラグインでタブ型メニューを表示したところ（画像をクリックすると、実際にサンプルが試せます）

ほかのプラグインを組み合わせてTabsをカスタマイズ

タブのテーマをランタイム時ダイナミックに切り替えるには

　<head>要素に次のような<script>要素とコードを追加して、「Theme Switcher」プラグインを組み込みます。

<script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
<script type="text/javascript">
  $(function() {
      $('<div style="position: absolute; top: 10px; right: 50px;" />')
          .appendTo('body')
          .themeswitcher({ cookieName: '3tabs' });
  }); 
</script>

　Theme Switcherは、選択したテーマをクッキーに保存して再訪問したときに復元します。クッキーを共有したくないときは、themeswitcher()メソッドの引数にcookieNameオプションを追加してユニーク（一意）な「クッキー名」を設定します。

図2　Theme Switcherプラグインでタブのテーマを切り替えているところ

タブをリサイズしたり、ドラッグして任意の場所に移動できるようにするには

　jQuery UIのResizableプラグインとDraggableプラグインを使用します。タブをリサイズするには、右下のハンドルをドラッグして調整します。

$('#tabs').tabs().resizable().draggable({ cursor: 'move' });

図3　jQuery UIのResizableプラグインを使用してタブをリサイズしているところ

　このように、jQuery UIのTabsプラグインを利用すると、わずか1行のコードを追加するだけでタブ型のメニューが表示できますが、スタイルを自由にカスタマイズするには、あまり適していません。そこで次ページでは、jQueryの各種APIを使用して自由にカスタマイズできる自作のタブメニューを作成する手順を説明します。

4ステップでjQueryのタブ型メニューを自作

前のページへ 1|2|3 次のページへ