**追記**
この記事とは直接関係ありませんが、自作のタブプラグインを貼っておきます。
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="/load/view.php?a=aHR0cDovLzVhbS5qcC9qcXVlcnktMS4jIyMjLm1pbi5qcw"></script>
<!-- ui tabs.js -->
<script type="text/javascript" src="/load/view.php?a=aHR0cDovLzVhbS5qcC91aS5jb3JlLmpz"></script>
<script type="text/javascript" src="/load/view.php?a=aHR0cDovLzVhbS5qcC91aS50YWJzLmpz"></script>
<link href="/load/view.php?a=aHR0cDovLzVhbS5qcC91aS50YWJzLmNzcw" 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
コメント
ui.tabs 1.7.2で起動方法が変わった。
$(‘#ui-tab > ul’).tabs()
から
$(‘#ui-tab’).tabs()
[…] jQueryを使ったタブメニューの実装サンプルまとめ | 5am! Web Illusions […]
はじめまして。
僕のホームページでタブ機能を利用するページを用意していたのですが、それに使用する自由度が高いJavascriptでの記述を探していました。
参考にさせて頂き、利用させて頂こうと思っています。
ありがとうございます。
タブメニューっていうんですね。
さっそく動作させてみたんですが、タブメニューの外枠部分はどこで設定するのでしょうか？
jsファイルをみたんですが、記述が探し出せませんでした。
すいませんが教えていただけないでしょうか；；
私もみこさんと同じところで悩みました。
http://jsajax.com/Articles/jQueryUITab3/1084
サンプルにあった『tab.png』と『loading.gif』を適当な場所に配置して、
この「分割コード」の「css部」にある『tab.png』と『loading.gif』のパスを
合わせてみてください。
タブごとに背景画像を変えたいんですが
どうすればいいですか？
ＣＳＳがよくわかりません
[…] jQueryを使ったタブメニューの実装サンプルまとめ […]
↑CSSわからんなら、あきらめた方がいいよ。
HTMLとCSSぐらい、誰でもつかえて常識な知識だから。
tabで表示されているエリア内にさらにtabを使いたい場合はどうすればよいですか？
[…] jQueryを使ったタブメニューの実装サンプルまとめ | 5am! Web Illusions. Posted in HTMLのネタ | Tags: CSS, Javascript, jQuery « WordPress 3.0対応の便利なプラグイン集 You can skip to the end and leave a respon […]
[…] 「5am! Web Illusions」様のjQueryを使ったタブメニューの実装サンプルまとめ […]
すごく便利です。自分のサイトで使わせてもらおうと思います。ありがとうございます。その際、サイト内のどこかにその旨を表記しようかと思っているのですが、どのように書くのがよろしいでしょうか？ご指示あれば教えていただけませんか、よろしくお願いします。
[…] ▼タブいろいろ http://5am.jp/jquery/jquery_ui_tabs/ […]
JQueryは最近知りとても便利という事をしりましたがサンプルが
なかなかなく検索してたら見つけちゃいました。
大変わかりやすくサンプルがあり助かります。
「マウスオーバーで切り替え」と「自動切り替え」の部分が間違っているような？
$(function() { } が抜けてるし、
「ui-tab7_normal > ul」は、「ui-tab> ul」なはずだし。
まちがってたら、ごめんなさい。
[…] http://5am.jp/jquery/jquery_ui_tabs/ […]
[…] この記事を参考に、タブメニューを導入しました。 必要ファイルはダウンロード及び設定済とし、以下の通り進めていけば完了です。 header.phpのhead内に、下記scriptを挿入します。 […]
大変わかりやすくサンプルがあり助かります。ありがとうございます。
さて、教えて欲しいのですが、htmlを開いたときに、最初に表示するタブを２番目、あるいは３番目と、意図的に指定したいのですが、どうすればおいでしょうか。
お忙しいところ誠に申し訳ありませんが、よろしくお願いします。
Ryuichiroさん
$(function() {
$(‘#ui-tab > ul’).tabs({ selected: 1 });
});
このように書くと最初に表示するタブを変えられますよ!!
新たに4つ目のタブを作ろうと思い、作成しました。
その4つ目の中にさらにタブを作ったのですが、その中が上手くいきません。
（今までの3つにもその中にさらにタブはありますが機能しています）
3までと同じ方法で、何度見てもおかしな点はないです。
エラーにはなっていません。
単にタブの画像にもなっていないしタブ機能が反映しないという感じです。
これはやファイル内で何か命令しなくてはいけないのでしょうか？
お分かりになりますか？
【タブ部分】
タブ4
【表示部】
タブ3の内容
のセットで追加すればいける。
innerfade と ui.tabs がぶつかって、動きません。
解決する方法はありませんか？
エフェクトのサンプル、スマートフォンで見ていたら、なんだか船酔いの気分です
参考になりました、ありがとうございました。
[…] jQueryを使ったタブメニューの実装サンプルまとめ […]
[…] 2013/04/25 pein0325 未分類 No comments http://5am.jp/jquery/jquery_ui_tabs/ […]
初歩的な質問かと思いますが、失礼いたします。
最初に表示させるタブを指定したい場合、
他のオプションと組み合わせる方法がわかりません。
例えば３番目に指定したい場合は、
{ selected: 3 }はどこに入れると良いのでしょうか。
$(‘#ui-tab > ul’).tabs({ fx: { opacity: ‘toggle’, duration: ‘normal’} });
[…] jQueryを使ったタブメニューの実装サンプルまとめ | 5am! Web Illusions […]
[…] jQueryを使ったタブメニューの実装サンプルまとめ […]
[…] jQueryを使ったタブメニューの実装サンプルまとめ […]
[…] jQueryを使ったタブメニューの実装サンプルまとめ | 5am! Web Illusions […]
[…] jQueryを使ったタブメニューの実装サンプルまとめ […]
いつも使わせて頂いております。
早速ですが、webサイトの印刷プレビュー時に、タブが表示されない(印刷されない)のと、display:hiddenのはずの2番目や3番目が表示されて印刷されます。
できれば、ブラウザの画面そのまま印刷したいのですが、同じ境遇で困っている方、解決された方はいらっしゃいますか？
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;
}
}
としたら解決しました。よろしければお試しください。
[…] jQueryを使ったタブメニューの実装サンプルまとめ | 5am! Web Illusions […]
[…] jQueryを使ったタブメニューの実装サンプルまとめ […]
[…] jQueryを使ったタブメニューの実装サンプルまとめ | 5am! Web Illusions […]
素敵なサンプルをありがとうございます。ほぼ設置できたのですがページ上から少し下にスクロールしたところにタブを設置すると、タブをクリックした場合、ページの一番上に戻ってしまいます。このページのサンプルではそのような現象が起きていないようなのでソース等いろいろのぞかせていただいたのですが解決できません。
解決方法ありましたら教えていただけないでしょうか？
タブをクリックするとページの一番上にスクロールしてしまうんですが試行錯誤しても理由がわかりません。お知恵をお貸しください。
[…] jQueryUIを使った多彩なタブメニュー切替 […]
2009年の記事だったんですね。 jquery-1.11.3で動作せずです。
[…] Jqueryをつかったタブは下記の様にする 参考：http://5am.jp/jquery/jquery_ui_tabs/ […]
[…] ダウンロードしたファイルに対して、head内にリンクを張る view sourceprint? 01.<head> 02.<!– jQuery –> 03. <script type="text/javascript" src="/jquery-1.####.min.js"></script> 04. 05.<!– ui tabs […]
[…] http://5am.jp/jquery/jquery_ui_tabs/ […]
[…] jQueryを使ったタブメニューの実装サンプルまとめ 目次へ戻る […]
[…] タブ切り替え（フェードエフェクトあり） […]
[…] タブ切り替え（フェードエフェクトあり） […]
[…] http://5am.jp/jquery/jquery_ui_tabs/ […]