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

In: jQueryを学ぶ

10 5月 2009
img_67931

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

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

まずはファイルの用意

下記リンクからダウンロード。
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>

タブ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

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

Avatar

名無しです

8月 22nd, 2009 at 08:47

ui.tabs 1.7.2で起動方法が変わった。

$(‘#ui-tab > ul’).tabs()

から

$(‘#ui-tab’).tabs()

Avatar

複数条件検索フォームをつくる 固定タイプ #1|絞り込み検索の機能強化 * wordpressTree

6月 4th, 2010 at 17:57

[...] jQueryを使ったタブメニューの実装サンプルまとめ | 5am! Web Illusions [...]

Avatar

アウラトゥス

7月 4th, 2010 at 20:19

はじめまして。
僕のホームページでタブ機能を利用するページを用意していたのですが、それに使用する自由度が高いJavascriptでの記述を探していました。
参考にさせて頂き、利用させて頂こうと思っています。
ありがとうございます。

Avatar

みこ

7月 11th, 2010 at 17:27

タブメニューっていうんですね。
さっそく動作させてみたんですが、タブメニューの外枠部分はどこで設定するのでしょうか?
jsファイルをみたんですが、記述が探し出せませんでした。
すいませんが教えていただけないでしょうか;;

Avatar

ブルー

7月 16th, 2010 at 16:48

私もみこさんと同じところで悩みました。

http://jsajax.com/Articles/jQueryUITab3/1084

サンプルにあった『tab.png』と『loading.gif』を適当な場所に配置して、
この「分割コード」の「css部」にある『tab.png』と『loading.gif』のパスを
合わせてみてください。

Avatar

taro

8月 21st, 2010 at 20:07

タブごとに背景画像を変えたいんですが
どうすればいいですか?
CSSがよくわかりません

Avatar

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

12月 1st, 2010 at 02:56

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

Avatar

mitoma

2月 15th, 2011 at 04:39

↑CSSわからんなら、あきらめた方がいいよ。
HTMLとCSSぐらい、誰でもつかえて常識な知識だから。

Avatar

mt

2月 22nd, 2011 at 15:27

tabで表示されているエリア内にさらにtabを使いたい場合はどうすればよいですか?

Avatar

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

3月 23rd, 2011 at 16:00

[...] jQueryを使ったタブメニューの実装サンプルまとめ | 5am! Web Illusions. Posted in HTMLのネタ | Tags: CSS, Javascript, jQuery « WordPress 3.0対応の便利なプラグイン集 You can skip to the end and leave a respon [...]

Avatar

jQueryでタブを表示しちゃおうか!|fraisier – 苺樹 -

3月 26th, 2011 at 22:16

[...] 「5am! Web Illusions」様のjQueryを使ったタブメニューの実装サンプルまとめ [...]

Avatar

杉浦しんいち

4月 7th, 2011 at 16:18

すごく便利です。自分のサイトで使わせてもらおうと思います。ありがとうございます。その際、サイト内のどこかにその旨を表記しようかと思っているのですが、どのように書くのがよろしいでしょうか?ご指示あれば教えていただけませんか、よろしくお願いします。

Avatar

javascriptまとめ(未整理) | web制作職人ブログ

5月 16th, 2011 at 19:18

[...] ▼タブいろいろ http://5am.jp/jquery/jquery_ui_tabs/ [...]

Avatar

GJ

8月 31st, 2011 at 01:10

JQueryは最近知りとても便利という事をしりましたがサンプルが
なかなかなく検索してたら見つけちゃいました。
大変わかりやすくサンプルがあり助かります。

Avatar

さか

10月 5th, 2011 at 12:12

「マウスオーバーで切り替え」と「自動切り替え」の部分が間違っているような?

$(function() { } が抜けてるし、
「ui-tab7_normal > ul」は、「ui-tab> ul」なはずだし。

まちがってたら、ごめんなさい。

Avatar

jQueryタブサンプル at せいちゃんページss

10月 13th, 2011 at 12:31

Avatar

タブメニュー追加 | Lord of LIFE

10月 16th, 2011 at 18:51

[...] この記事を参考に、タブメニューを導入しました。 必要ファイルはダウンロード及び設定済とし、以下の通り進めていけば完了です。 header.phpのhead内に、下記scriptを挿入します。 [...]

Avatar

Ryuichiro

11月 13th, 2011 at 20:04

大変わかりやすくサンプルがあり助かります。ありがとうございます。
さて、教えて欲しいのですが、htmlを開いたときに、最初に表示するタブを2番目、あるいは3番目と、意図的に指定したいのですが、どうすればおいでしょうか。
お忙しいところ誠に申し訳ありませんが、よろしくお願いします。

Avatar

Moaijikomi

12月 12th, 2011 at 17:35

Ryuichiroさん

$(function() {
$(‘#ui-tab > ul’).tabs({ selected: 1 });
});

このように書くと最初に表示するタブを変えられますよ!!

Comment Form

Profile

Name:RIN
Age:27
性別:男
Location:Sapporo
Job:Webデザイナー

札幌のWebデザイナーです。
Web Design/PHP/CSS/写真が
メインの勉強ブログです。

思い立ったがfollow me!
Twitter:rin316

mixi:3542288

Facebook:Yuta Hayashi

連絡はコチラから。

Photostream