jQueryを使ったタブメニューの実装サンプルまとめ

In: jQueryを学ぶ

10 5月 2009
img_67931

**追記**
この記事とは直接関係ありませんが、自作のタブプラグインを貼っておきます。
rin316/jquery.tab: jQuery tab plugin.
**追記終わり**

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

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

まずはファイルの用意

下記リンクからダウンロード。
・jQuery本体…Past Releases内→最新バージョンのMinified
・Download Builder | jQuery UI　(このサイトで使っているui.tabs.zip)

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>

タブ1の内容

タブ2の内容

タブ3の内容

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

opacity: ‘toggle’, duration: ‘normal’

<script type="text/javascript">
	$(function() {
		$('#ui-tab > ul').tabs({ fx: { opacity: 'toggle', duration: 'normal'  } });
	});
</script>

タブ1の内容

タブ2の内容

タブ3の内容

opacity: ‘toggle’, duration: ‘slow’

<script type="text/javascript">
	$(function() {
		$('#ui-tab > ul').tabs({ fx: { opacity: 'toggle', duration: 'slow'  } });
	});
</script>

タブ1の内容

タブ2の内容

タブ3の内容

opacity: ‘toggle’, duration: ‘fast’

<script type="text/javascript">
	$(function() {
		$('#ui-tab > ul').tabs({ fx: { opacity: 'toggle', duration: 'fast'  } });
	});
</script>

タブ1の内容

タブ2の内容

タブ3の内容

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

<script type="text/javascript">
	$(function() {
		$('#ui-tab > ul').tabs({ fx: { opacity: 'toggle', duration: 2000  } });
	});
</script>

タブ1の内容

タブ2の内容

タブ3の内容

スライドエフェクト

height: ‘toggle’, duration: ‘normal’

<script type="text/javascript">
	$(function() {
		$('#ui-tab > ul').tabs({ fx: { height: 'toggle', duration: 'normal'  } });
	});
</script>

タブ1の内容

タブ2の内容

タブ3の内容

height: ‘toggle’, duration: ‘slow’

<script type="text/javascript">
	$(function() {
		$('#ui-tab > ul').tabs({ fx: { height: 'toggle', duration: 'slow'  } });
	});
</script>

タブ1の内容

タブ2の内容

タブ3の内容

height: ‘toggle’, duration: ‘fast’

<script type="text/javascript">
	$(function() {
		$('#ui-tab > ul').tabs({ fx: { height: 'toggle', duration: 'fast'  } });
	});
</script>

タブ1の内容

タブ2の内容

タブ3の内容

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

<script type="text/javascript">
	$(function() {
		$('#ui-tab > ul').tabs({ fx: { height: 'toggle', duration: 2000  } });
	});
</script>

タブ1の内容

タブ2の内容

タブ3の内容

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

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

<script type="text/javascript">
	$(function() {
		$('#ui-tab > ul').tabs({ fx: { height: 'toggle' , opacity: 'toggle' , duration: 'normal' } });
</script>

タブ1の内容

タブ2の内容

タブ3の内容

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

<script type="text/javascript">
	$(function() {
		$('#ui-tab > ul').tabs({ fx: { height: 'toggle' , opacity: 'toggle' , duration: 'slow' } });
</script>

タブ1の内容

タブ2の内容

タブ3の内容

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

<script type="text/javascript">
	$(function() {
		$('#ui-tab > ul').tabs({ fx: { height: 'toggle' , opacity: 'toggle' , duration: 'fast' } });
</script>

タブ1の内容

タブ2の内容

タブ3の内容

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>

タブ1の内容

タブ2の内容

タブ3の内容

カスタムアニメーション

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

<script type="text/javascript">
	$(function() {
		$('#ui-tab > ul').tabs({ fx: { height: 'show' , opacity: 'show' , duration: 'normal' } });
</script>

タブ1の内容

タブ2の内容

タブ3の内容

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

<script type="text/javascript">
	$(function() {
		$('#ui-tab5_slow > ul').tabs({ fx: { height: 'show' , opacity: 'show' , duration: 'slow' } });
</script>

タブ1の内容

タブ2の内容

タブ3の内容

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

<script type="text/javascript">
	$(function() {
		$('#ui-tab > ul').tabs({ fx: { height: 'show' , opacity: 'show' , duration: 'fast' } });
	});
</script>

タブ1の内容

タブ2の内容

タブ3の内容

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>

タブ1の内容

タブ2の内容

タブ3の内容

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

event: ‘mouseover’

<script type="text/javascript">
		$('#ui-tab > ul').tabs({ event: 'mouseover' , fx: { height: 'toggle' , opacity: 'toggle' , duration: 100 } });
</script>

タブ1の内容

タブ2の内容

タブ3の内容

自動切り替え

.tabs(‘rotate’, 3000)

<script type="text/javascript">
		$('#ui-tab7_normal > ul').tabs({ fx: { opacity: 'toggle', duration: 'normal'  } }).tabs('rotate', 3000);
</script>

タブ1の内容

タブ2の内容

タブ3の内容

参考リンク

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

Profile

Name:RIN
Location:Sapporo

札幌でWebエンジニアをしています。東京の会社にリモート勤務。
JavaScript, PHPの勉強がメインのブログです。

GitHub:rin316

Twitter:rin316

Photostream

Categories

Archives

Copyright � 2007 - 5am! Web Illusions - is proudly powered by WordPress | ログイン

Compositio Theme is created by: Design Disease brought to you by PremiumThemes.com