jQueryUI タブ表示

名称
jQueryUI tabs 1.7.2
配布元
jQuery UI
特徴
リスト要素で囲んだものをタブ表示します。
他ページをページ遷移なしでタブに読み込めます。(同一ドメイン内のみ)
ブラウザ対応
IE6+ 、Opera 9.0+、Safari 3.1+、Firefox 2+
ライセンス
GPL and MIT License

サンプルはこちらを御覧ください。

設置方法

まず、ページ中のコンテンツを表示・非表示を切り替えて、タブ表示する方法を説明します。

  1. jQuery UIの「Build custom download」をクリックします。
  2. 初期状態ですべて選択されているので、右上の「Deselect all components」をクリックして選択を外し「UI Core」と「Tabs」だけを選択します。また右側の「Theme」も選択されているので、必要が無ければ「No Theme」を選択します。「Download」ボタンをクリックするとダウンロードを開始します。
  3. ダウンロードして解凍したファイルのうち、以下のファイルを使用します。
    [jsフォルダに移動]
    js/jquery-1.3.2.min.js
    js/jquery-ui-1.7.2.custom.min.js
    [cssフォルダに移動]
    development-bundle/themes/base/内のファイル
    
  4. タブ部分は<div id="jquery_tabs">中に、タブを表示する<ul>、タブそれぞれに対応する<div>という順に記入します。
    <div id="jquery_tabs">
    <ul>
    	<li><a href="#t1"><span>1つめのタブ</span></a></li>
    	<li><a href="#t2"><span>2つめのタブ</span></a></li>
    	<li><a href="#t3"><span>3つめのタブ</span></a></li>
    </ul>
    <div id="t1">
    	<p>1つめのタブです。</p>
    	<p>仮テキスト仮テキスト仮テキスト</p>
    	<p>仮テキスト仮テキスト仮テキスト仮テキスト</p>
    </div>
    <div id="t2">
    	<p>2つめのタブです。</p>
    	<p>仮テキスト仮テキスト仮テキスト仮テキスト</p>
    </div>
    <div id="t3">
    	<p>3つめのタブです。</p>
    </div>
    </div>
  5. htmlファイルのhead部分に以下の文を追加します。
    #jquery_tabsは、上記のタブ部分をラップした<div>のCSSセレクタです。
    <link rel="stylesheet" href="css/ui.all.css" type="text/css" />
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
    <script type="text/javascript">
    // <![CDATA[
    $(function(){$("#jquery_tabs").tabs();});
    // ]]>
    </script>
  6. 以上で完了です

Ajaxを使用する時は

Ajax(他のページから読み込み)を使用する際には上記の方法に加えて、以下の修正を加えます。

タブの追加

手順4のタブのリストに他のページへのアンカーを追加します

<div id="jquery_tabs">
<ul>
	<li><a href="#t1"><span>1つめのタブ</span></a></li>
	<li><a href="#t2"><span>2つめのタブ</span></a></li>
	<li><a href="#t3"><span>3つめのタブ</span></a></li>
	<li><a href="test.htm"><span>Ajaxテストページ</span></a></li>
</ul>

Ajaxオプションの追加

上記のリンクをクリックすると、<!DOCTYPE html PUBLIC…から、HTMLファイルがタブの中に読み込まれてしまいます。
表示してみると、IEでページのヘッダーに直接記入しているjavascriptが実行されてエラーになったり、firefoxだけ読み込みページのCSSが読み込まれたりしました。(正直、いまだにどうなってたのかよくわかりません)
上記問題の回避のため、必要な部分だけを読み込むよう、手順5の$("#jquery_tabs").tabs();にajaxOptionsのdataFilterを追加します。

$("#jquery_tabs").tabs({
ajaxOptions:{
	dataFilter:function(data){
	return $(data).find('#contents').html();
	// 読み込み先ページのid="contents" だけを表示する。
	}
	}
})

ajaxOptionsの詳細はこちらを参照してください。
jQuery.ajax(options) - jQuery 1.3.2 日本語リファレンス

アニメーション効果

サンプルではタブを切り換えるときにフェードイン・フェードアウトするアニメーション効果も追加しています。

$("#jquery_tabs").tabs({
fx:{opacity:'toggle'},
ajaxOptions:{dataFilter:function(data){return $(data).find('#contents').html();}
});

Cookieとキャッシュの追加(2010.9.6追記)

通常、最初に表示されるタブは1番目で、他のタブを表示させてから再表示したり、他のページに移動してから戻ってくると、1番目のタブが表示されます。

そこでCookieを追加すると、再表示する前や他のページに移動する前に表示していたタブに戻ることができます。

またキャッシュをtrue(デフォルトはfalse)にすると、2回目以降の読み込みが速くなります。

$("#jquery_tabs").tabs({
cookie: { expires: 30 } , cache: true ,
	// Cookieを30日間有効,キャッシュをON
ajaxOptions:{
	dataFilter:function(data){
		return  $(data).find('#contents').html();
		// 読み込み先ページのid="contents" だけを表示する。
	}
}
})
AjaxとCookieとキャッシュを追加したページはこちら→京都リップル -活動記録-

注意点

参考サイト

jQuery UI/Tabs - tech.ludicmind.net

2009.12.11

(更新 2010.2.16)

(更新 2010.9.6)

ページトップに戻る