正式版となった jQuery UI 1.8 が公開されました。先日投稿した Ajaxのタブ切り替えを使って、WPのサイドバーにある発リンク数を調整 という記事と重複する部分は多いですが、同様のタブコンテンツを jQuery 1.4.2 + UI Tabs 1.8 で再現したいと思います。

ファイル一式を用意

1. ダウンロードのページに行くと、全ファイルにチェックが入った状態で待ち構えています。ただし、必要最低限のファイルだけ欲しいので、いったん全チェックを外します。

2. WidgetsにあるTabsだけにチェックを入れます。エフェクトなどの機能が欲しい方は、必要なコンポーネントにチェックを加えてください。

3. Tabs をチェックすると、動作に必要な「Core」と「Widget」にもチェックが入ります。あとは、 jQuery UI のバージョン選択と、必要があればテーマを選んでダウンロードします。

テーマについて

テーマは、design a custom theme の左メニュー「Gallery」タブから選択できます。クリックすると、中央のタブにも反映されてイメージを掴むことができます。

好みのスタイルが見つかったら、「Roll Your Own」タブの [Download theme] をクリック。ダウンロードページのセレクトメニューにそのテーマが反映されます。

※このページでは、jQuery1.4.2、UI 1.8 で動作確認を行っています。なお、テーマはUI全体のものなので、テーマを選択してダウンロードすると、ファイル数が増加したりCSSが複雑になって目的のものを探すのが大変だったので、[No Theme] を選択しました。カッコいいのが揃っていましたが、自分でカスタマイズします…。

必要ファイルのアップロード

テーマを選択していない場合です。たくさんファイルがあって戸惑いましたが、Tab を機能させるのに必要なのは下記のとおりです。

jquery-ui-1.8.custom.min.js　に、「Core」「Widget」「Tabs」が圧縮された状態でまとまっています。

なので、jQuery の Core は Google AJAX Libraries API を利用し、Cookie（最後に選択したタブを記憶）を利用しないで、css は自分で用意する場合、jquery-ui-1.8.custom.min.js だけアップロードすればOKです。

head 内の記述例

Google AJAX Libraries API 、Cookie、CSSを利用の場合。

<link rel="stylesheet" type="text/css" href="/js/jquery.ui.tabs.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script>
<script type="text/javascript" src="/js/jquery.cookie.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.8.custom.min.js"></script>
<script type="text/javascript">
$(function() {
    $('#tabs').tabs({cookie: { expires: 30 } , cache: true });
});
</script>

最後の実行コードは、#tabs というIDのついた要素内でスクリプトを実行し、クッキーの有効期限を30日（たぶん）、キャッシュを有効にする、という設定です。恐らく、最初の ul をナビゲーションタブと認識するのだと思います。

キャッシュを有効にすると、Ajaxで読み込んだページはキャッシュされ、同じページ内では再リクエストを行わずに済むので表示が速くなります。

ページ内の記述

WordPressサイドバーの例です。 ajax で読み込むページの a要素（6、7行目のリンク）は、javascript が実行されると [ #ui-tabs-1、#ui-tabs-2 ] というように、URLからページ内アンカーに置き換えられます。

なお、 <a title="Tag" herf="/tags"> のようにタイトル属性を与えると、そのタイトル名がフラグメント識別子（#）に変換されます。ただし、反映されるのは英数字のみで、日本語の場合は ui-tabs-1 のまま。

<div id="tabs">
 
<!-- タブナビゲーション -->
<ul>
<li><a href="#tabs-1">カテゴリー</a></li>
<li><a href="/tags" rel="nofollow">タグ</a></li>
<li><a href="/archives" rel="nofollow">アーカイブ</a></li>
</ul>
<!-- コンテンツ部分 -->
<div id="tabs-1">
<ul>
<?php wp_list_categories('title_li=&depth=1&use_desc_for_title=0'); ?>
</ul>
</div>
 
</div>

JavaScript 実行後のDOMソース

<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
 
<!-- タブナビゲーション -->
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#tabs-1">カテゴリー</a></li>
<li class="ui-state-default ui-corner-top"><a href="#ui-tabs-1" rel="nofollow">タグ</a></li>
<li class="ui-state-default ui-corner-top"><a href="#ui-tabs-2" rel="nofollow">アーカイブ</a></li>
</ul>
<!-- コンテンツ部分 -->
<div id="tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
<ul>
<li class="cat-item cat-item-1"><a href='/catgory/1'>カテ1</a></li>
<li class="cat-item cat-item-2"><a href='/category/2'>カテ2</a></li>
<li class="cat-item cat-item-3"><a href='/category/3'>カテ3</a></li>
</ul>
</div>
<!-- display:none（ui-tabs-hide） で隠れている部分 -->
<div id="ui-tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"/>
<div id="ui-tabs-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"/>
 
</div>

たくさんclassが付きます…。タブに関係するのは（多分）5種類なので、これをベースにスタイルを追加（jquery.ui.tabs.css）すればOKなはずです。

.ui-tabs { /* 外枠 div */ }
.ui-tabs-nav { /* タブ ul */ }
.ui-tabs-selected { /* タブ ul li ハイライト（選択中のタブ） */ }
.ui-tabs-panel { /* コンテンツ部分 div*/}
.ui-tabs-hide { display: none !important; /* コンテンツ部分 div 非表示 */ }

動作サンプル
このサイトのトップページ右側下段、音楽のところで利用しています。
取っちゃいました…。
こちらもどうぞ
シングルページのサイドバーに、Ajax利用のページング付きカテゴリーアーカイブを設置したい