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

In: jQueryを学ぶ

10 5月 2009
img_67931

仕事で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

  • 名無しです

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

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

    から

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

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

  • http://auratus.web.fc2.com/ アウラトゥス

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

  • みこ

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

  • ブルー

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

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

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

  • taro

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

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

  • mitoma

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

  • mt

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

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

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

  • 杉浦しんいち

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

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

  • GJ

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

  • さか

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

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

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

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

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

  • Ryuichiro

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

  • Moaijikomi

    Ryuichiroさん

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

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

  • 迷い人

    新たに4つ目のタブを作ろうと思い、作成しました。
    その4つ目の中にさらにタブを作ったのですが、その中が上手くいきません。
    (今までの3つにもその中にさらにタブはありますが機能しています)
    3までと同じ方法で、何度見てもおかしな点はないです。
    エラーにはなっていません。
    単にタブの画像にもなっていないしタブ機能が反映しないという感じです。

    これはやファイル内で何か命令しなくてはいけないのでしょうか?
    お分かりになりますか?

  • 通りすがりのJquerer

    【タブ部分】
    タブ4

    【表示部】

    タブ3の内容

    のセットで追加すればいける。

  • Leon Lionking

     innerfade と ui.tabs がぶつかって、動きません。
    解決する方法はありませんか?

  • Morixkoro

    エフェクトのサンプル、スマートフォンで見ていたら、なんだか船酔いの気分です
    参考になりました、ありがとうございました。

  • Pingback: WordPressカスタマイズ - 究極データベース

  • Pingback: jQueryを使ったタブメニューの実装サンプルまとめ | 5am! Web Illusions | webサイト作成に関する自分メモ

  • Megumi Matoba

    初歩的な質問かと思いますが、失礼いたします。

    最初に表示させるタブを指定したい場合、

    他のオプションと組み合わせる方法がわかりません。

    例えば3番目に指定したい場合は、
    { selected: 3 }はどこに入れると良いのでしょうか。
    $(‘#ui-tab > ul’).tabs({ fx: { opacity: ‘toggle’, duration: ‘normal’} });

  • Pingback: この上なく便利!すごい「jQuery」の小技まとめ32 | コムテブログ

  • Pingback: プログラミング参考サイト | android manifest configChanges

  • Pingback: jQuery初心者入門!タブやスライドショーを簡単実装

  • Pingback: 使いやすくなった!UI素材とテクニック集/CSS jQuery版 | コムテブログ

  • Pingback: プログラミング参考サイトまとめ | android manifest configChanges

  • baby

    いつも使わせて頂いております。
    早速ですが、webサイトの印刷プレビュー時に、タブが表示されない(印刷されない)のと、display:hiddenのはずの2番目や3番目が表示されて印刷されます。
    できれば、ブラウザの画面そのまま印刷したいのですが、同じ境遇で困っている方、解決された方はいらっしゃいますか?

  • choco

    babyさん

    私も同じ状況でした。
    もう解決済みかもしれませんが、

    @media projection, screen {
    .ui-tabs-hide {
    display: none;
    }
    }

    @media print {
    .ui-tabs-nav {
    display: none;
    }
    }

    というのをCSSで指定していないでしょうか。
    これらの指定を

    @media projection, screen, print {
    .ui-tabs-hide {
    display: none;
    }
    }

    としたら解決しました。よろしければお試しください。

  • Pingback: 知っておくと効率的!コーポレートサイト制作が捗るjquery プラグインや使い方まとめ | コムテブログ

  • Pingback: タブの実装方法 | WEBに関するあれこれ解決!

  • Pingback: jQueryを使ったタブメニューの実装サンプルまとめ | 5am! Web Illusions | B教室夜間部のページ

  • ちゃま

    素敵なサンプルをありがとうございます。ほぼ設置できたのですがページ上から少し下にスクロールしたところにタブを設置すると、タブをクリックした場合、ページの一番上に戻ってしまいます。このページのサンプルではそのような現象が起きていないようなのでソース等いろいろのぞかせていただいたのですが解決できません。
    解決方法ありましたら教えていただけないでしょうか?

Profile

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

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

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

Facebook:Yuta Hayashi

連絡はコチラから。

Photostream