仕事でjQueryを使ったタブメニューを作ったので忘れないようにメモ。
それぞれの挙動も比較しやすいように並べてみました。

今日が勉強初投稿の日！
写真:新川通りで撮った桜。

まずはファイルの用意

下記リンクからダウンロード。
・jQuery本体…Past Releases内→最新バージョンのMinified
・ui.core.js/ui.tabs.js/ui.tabs.css一式(ui.tab.zip)　(Mirror)

head内にリンクを張る

ダウンロードしたファイルに対して、head内にリンクを張ります。

[html] [/html]

さっそく使ってみる

本文にhtmlを追加。

[html] [/html]

下記scriptをheadかbodyどちらかに追加。

デフォルト

[javascript] [/javascript]

フェードアウト/フェードイン エフェクト

opacity: ‘toggle’, duration: ‘normal’

[javascript] [/javascript]

opacity: ‘toggle’, duration: ‘slow’

[javascript] [/javascript]

opacity: ‘toggle’, duration: ‘fast’

[javascript] [/javascript]

opacity: ‘toggle’, duration: milliseconds(1/1000秒)

[javascript] [/javascript]

スライドエフェクト

height: ‘toggle’, duration: ‘normal’

[javascript] [/javascript]

height: ‘toggle’, duration: ‘slow’

[javascript] [/javascript]

height: ‘toggle’, duration: ‘fast’

[javascript] [/javascript]

height: ‘toggle’, duration: milliseconds(1/1000秒)

[javascript] [/javascript]

フェード+スライドエフェクト

height: ‘toggle’ , opacity: ‘toggle’ , duration: ‘normal’

[javascript] [/javascript]

height: ‘toggle’ , opacity: ‘toggle’ , duration: ‘slow’

[javascript] [/javascript]

height: ‘toggle’ , opacity: ‘toggle’ , duration: ‘fast’

[javascript] [/javascript]

height: ‘toggle’ , opacity: ‘toggle’ , duration: milliseconds(1/1000秒)

[javascript] [/javascript]

カスタムアニメーション

height: ‘show’ , opacity: ‘show’ , duration: ‘normal’

[javascript] [/javascript]

height: ‘show’ , opacity: ‘show’ , duration: ‘slow’

[javascript] [/javascript]

height: ‘show’ , opacity: ‘show’ , duration: ‘fast’

[javascript] [/javascript]

height: ‘show’ , opacity: ‘show’ , duration: milliseconds(1/1000秒)

[javascript] [/javascript]

マウスオーバーで切り替え

event: ‘mouseover’

[javascript] [/javascript]

自動切り替え

.tabs(‘rotate’, 3000)

[javascript] [/javascript]

参考リンク

本家のサイトを見ると他にも色々なイベントがあるようです。
cookie取得したりできるみたいです。
・jQuery UI – Demos & Documentation
・jQuery UI Tabs / Tabs 3