jquery uiでタブを簡単に作る方法

jquery uiとは、いろいろなプラウザで実行確認されたプラグインをまとめてくれたライブラリでjquery＋jquery uiを読み込むことで、さらに簡単により動きのあるホームページを実現できます。

今回は、タブを作成してみます。

html

<div id="tabs">
<ul>
<li><a href="#tabs-1">タブ1</a></li>
<li><a href="#tabs-2">タブ2タブ2</a></li>
<li><a href="#tabs-3">タブ3</a></li>
</ul>
<div id="tabs-1">こんにちは、タブ1号です。こんにちは、タブ1号です。
こんにちは、タブ1号です。こんにちは、タブ1号です。こんにちは、タブ1号です。
こんにちは、タブ1号です。</div>
<div id="tabs-2">こんにちは、タブ2号です。こんにちは、タブ2号です。
こんにちは、タブ2号です。こんにちは、タブ2号です。こんにちは、タブ2号です。
こんにちは、タブ2号です。こんにちは、タブ2号です。こんにちは、タブ2号です。
こんにちは、タブ2号です。こんにちは、タブ2号です。こんにちは、タブ2号です。
こんにちは、タブ2号です。</div>
<div id="tabs-3">こんにちは、タブ3号です。こんにちは、タブ3号です。
こんにちは、タブ3号です。こんにちは、タブ3号です。こんにちは、タブ3号です。
こんにちは、タブ3号です。こんにちは、タブ3号です。こんにちは、タブ3号です。</div>
</div>

スタイルシート(CSS)はこちら

jquery

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.5.1");</script>
<script type="text/javascript">google.load("jqueryui", "1.8.11");</script>
<script type="text/javascript">
$(function(){
$('#tabs').tabs({ fx : {opacity: 'toggle', duration: 'fast'},
selected: 1,
collapsible:true
});
});
</script>

まず1～3行目でjqueryとjquery uiをgoogleから読み込んでいます。

4行目でセレクタで#tabsを選んでます。.tabsがuiの関数です。
それ以降はプロパティを設定することでいろいろな表現が可能になります。

プロパティ
selectedははじめに開いておくタブを設定できます。
今回では0→タブ1、1→タブ2、2→タブ3、それ以上は、タブ1が開く状態になります。

fxでは、表示するときにアニメーションを設定できます。
toggleでは、ふわぁと消え、ふわぁと表示させます。
さらにdurationの設定でふわぁというスピードを変化することができます。

collapsibleでは、trueでタブ内の表示、非表示をクリックで切り替えれるようにできます。

おまけに別プロパティで試して見ます

jquery

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.5.1");</script>
<script type="text/javascript">google.load("jqueryui", "1.8.11");</script>
<script type="text/javascript">
$(function(){
$('#mouseover').tabs({ fx : {opacity: 'toggle', duration: 'fast'},
selected: 0,
event:'mouseover'
});
});
</script>

eventでは、タブの表示をクリック以外に変更できます。
mouseover、マウスが触れた瞬間にタブが切り替わります。