5am! Web Illusions
札幌でWebデザイナーをやっているRINの勉強ブログ。Web Design/PHP/CSS/写真メイン
jQueryを使ったタブメニューの実装サンプルまとめ
In: jQueryを学ぶ
10 5月 2009
仕事でjQueryを使ったタブメニューを作ったので忘れないようにメモ。
それぞれの挙動も比較しやすいように並べてみた。
今日が勉強初投稿の日！
photo:新川通り
まずはファイルの用意
下記リンクからダウンロード。
・jQuery本体…Past Releases内→最新バージョンのMinified
・ui.core.js/ui.tabs.js/ui.tabs.css一式(ui.tab.zip) (Mirror)
head内にリンクを張る
ダウンロードしたファイルに対して、head内にリンクを張る
<head> <!-- jQuery --> <script type="text/javascript" src="/jquery-1.####.min.js"></script> <!-- ui tabs.js --> <script type="text/javascript" src="/ui.core.js"></script> <script type="text/javascript" src="/ui.tabs.js"></script> <link href="/ui.tabs.css" rel="stylesheet" type="text/css" /> </head>
さっそく使ってみる
本文にhtmlを追加。
<div id="ui-tab"> <ul> <li><a href="#fragment-1"><span>タブ1</span></a></li> <li><a href="#fragment-2"><span>タブ2</span></a></li> <li><a href="#fragment-3"><span>タブ3</span></a></li> </ul> <div id="fragment-1"> <p>タブ1の内容</p> </div> <div id="fragment-2"> <p>タブ2の内容</p> </div> <div id="fragment-3"> <p>タブ3の内容</p> </div> </div>
下記scriptをheadかbodyどちらかに追加。
デフォルト
<script type="text/javascript">
$(function() {
$('#ui-tab > ul').tabs();
});
</script>
フェードアウト/フェードイン エフェクト
opacity: ‘toggle’, duration: ‘normal’
<script type="text/javascript">
$(function() {
$('#ui-tab > ul').tabs({ fx: { opacity: 'toggle', duration: 'normal' } });
});
</script>
opacity: ‘toggle’, duration: ’slow’
<script type="text/javascript">
$(function() {
$('#ui-tab > ul').tabs({ fx: { opacity: 'toggle', duration: 'slow' } });
});
</script>
opacity: ‘toggle’, duration: ‘fast’
<script type="text/javascript">
$(function() {
$('#ui-tab > ul').tabs({ fx: { opacity: 'toggle', duration: 'fast' } });
});
</script>
opacity: ‘toggle’, duration: milliseconds(1/1000秒)
<script type="text/javascript">
$(function() {
$('#ui-tab > ul').tabs({ fx: { opacity: 'toggle', duration: 2000 } });
});
</script>
スライドエフェクト
height: ‘toggle’, duration: ‘normal’
<script type="text/javascript">
$(function() {
$('#ui-tab > ul').tabs({ fx: { height: 'toggle', duration: 'normal' } });
});
</script>
height: ‘toggle’, duration: ’slow’
<script type="text/javascript">
$(function() {
$('#ui-tab > ul').tabs({ fx: { height: 'toggle', duration: 'slow' } });
});
</script>
height: ‘toggle’, duration: ‘fast’
<script type="text/javascript">
$(function() {
$('#ui-tab > ul').tabs({ fx: { height: 'toggle', duration: 'fast' } });
});
</script>
height: ‘toggle’, duration: milliseconds(1/1000秒)
<script type="text/javascript">
$(function() {
$('#ui-tab > ul').tabs({ fx: { height: 'toggle', duration: 2000 } });
});
</script>
フェード+スライドエフェクト
height: ‘toggle’ , opacity: ‘toggle’ , duration: ‘normal’
<script type="text/javascript">
$(function() {
$('#ui-tab > ul').tabs({ fx: { height: 'toggle' , opacity: 'toggle' , duration: 'normal' } });
</script>
height: ‘toggle’ , opacity: ‘toggle’ , duration: ’slow’
<script type="text/javascript">
$(function() {
$('#ui-tab > ul').tabs({ fx: { height: 'toggle' , opacity: 'toggle' , duration: 'slow' } });
</script>
height: ‘toggle’ , opacity: ‘toggle’ , duration: ‘fast’
<script type="text/javascript">
$(function() {
$('#ui-tab > ul').tabs({ fx: { height: 'toggle' , opacity: 'toggle' , duration: 'fast' } });
</script>
height: ‘toggle’ , opacity: ‘toggle’ , duration: milliseconds(1/1000秒)
<script type="text/javascript">
$(function() {
$('#ui-tab > ul').tabs({ fx: { height: 'toggle' , opacity: 'toggle' , duration: 2000 } });
</script>
カスタムアニメーション
height: ’show’ , opacity: ’show’ , duration: ‘normal’
<script type="text/javascript">
$(function() {
$('#ui-tab > ul').tabs({ fx: { height: 'show' , opacity: 'show' , duration: 'normal' } });
</script>
height: ’show’ , opacity: ’show’ , duration: ’slow’
<script type="text/javascript">
$(function() {
$('#ui-tab5_slow > ul').tabs({ fx: { height: 'show' , opacity: 'show' , duration: 'slow' } });
</script>
height: ’show’ , opacity: ’show’ , duration: ‘fast’
<script type="text/javascript">
$(function() {
$('#ui-tab > ul').tabs({ fx: { height: 'show' , opacity: 'show' , duration: 'fast' } });
});
</script>
height: ’show’ , opacity: ’show’ , duration: milliseconds(1/1000秒)
<script type="text/javascript">
$(function() {
$('#ui-tab > ul').tabs({ fx: { height: 'show' , opacity: 'show' , duration: 2000 } });
});
</script>
マウスオーバーで切り替え
event: ‘mouseover’
<script type="text/javascript">
$('#ui-tab > ul').tabs({ event: 'mouseover' , fx: { height: 'toggle' , opacity: 'toggle' , duration: 100 } });
</script>
自動切り替え
.tabs(’rotate’, 3000)
<script type="text/javascript">
$('#ui-tab7_normal > ul').tabs({ fx: { opacity: 'toggle', duration: 'normal' } }).tabs('rotate', 3000);
</script>
参考リンク
本家のサイトを見ると他にも色々なイベントがある。
cookie取得したりできるみたい。
・jQuery UI – Demos & Documentation
・jQuery UI Tabs / Tabs 3
Comment Form
Profile
Name:RIN
Age:25
性別:男
Location:Sapporo
Job:Webデザイナー
札幌のWebデザイナーです。
Web Design/PHP/CSS/写真をメインに
勉強した事、思った事を書いていきます。
思い立ったがfollow me!
Twitter:rin316
Photostream
Categories
- AutoHotKeyを学ぶ (1)
- JavaScriptを学ぶ (1)
- jQueryを学ぶ (1)
- Lifehack (1)
- 日記 (1)
- Gavin: 君がすごいですね！ [...]
- rin316: lifelineさん やはりWindows 7では動かないんですね。 クリップボード制御辺 [...]
- ITキヲスク | 2009年12/20～12/26の週間ブックマーク: [...] [...] [...]
- mathfuru: 規則性のない、適当なHotstringしか思いつかないからすぐ忘れてしまいます [...]
- links for 2009-12-21 | ウェブル: [...] [...] [...]
2 Responses to jQueryを使ったタブメニューの実装サンプルまとめ
名無しです
8月 22nd, 2009 at 08:47
ui.tabs 1.7.2で起動方法が変わった。
$(’#ui-tab > ul’).tabs()
から
$(’#ui-tab’).tabs()
Gavin
3月 9th, 2010 at 15:38
君がすごいですね！