5am! Web Illusions
札幌でWebデザイナーをやっているRINの勉強ブログ。Web Design/PHP/CSS/写真メイン
jQueryを使ったタブメニューの実装サンプルまとめ
In: jQueryを学ぶ
10 5月 2009
仕事で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>
フェードアウト/フェードイン エフェクト
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:27
性別:男
Location:Sapporo
Job:Webデザイナー
札幌のWebデザイナーです。
Web Design/PHP/CSS/写真が
メインの勉強ブログです。
思い立ったがfollow me!
Twitter:rin316
Photostream
Categories
- AutoHotKeyを学ぶ (1)
- JavaScriptを学ぶ (1)
- jQueryを学ぶ (1)
- Lifehack (1)
- 日記 (1)
- 誰でもすぐに実践できる！文章をすばやく書ける7つのテクニック | Basic Design: [...] Texter 毎日毎日、同じ文章を入力する必要がある人に便利なツールで [...]
- タイピングを減らして作業効率化！ | noisecat Blog: [...] 高速で打ち込んだように文字が入るので使いこなすと周りからは魔法 [...]
- Moaijikomi: Ryuichiroさん $(function() { $('#ui-tab > ul').tabs({ selected: 1 }); }); このよう [...]
- Ryuichiro: 大変わかりやすくサンプルがあり助かります。ありがとうございます。 [...]
- タブメニュー追加 | Lord of LIFE: [...] この記事を参考に、タブメニューを導入しました。 必要ファイルは [...]
19 Responses to jQueryを使ったタブメニューの実装サンプルまとめ
名無しです
8月 22nd, 2009 at 08:47
ui.tabs 1.7.2で起動方法が変わった。
$(‘#ui-tab > ul’).tabs()
から
$(‘#ui-tab’).tabs()
複数条件検索フォームをつくる 固定タイプ #1｜絞り込み検索の機能強化 ＊ wordpressTree
6月 4th, 2010 at 17:57
[...] jQueryを使ったタブメニューの実装サンプルまとめ | 5am! Web Illusions [...]
アウラトゥス
7月 4th, 2010 at 20:19
はじめまして。
僕のホームページでタブ機能を利用するページを用意していたのですが、それに使用する自由度が高いJavascriptでの記述を探していました。
参考にさせて頂き、利用させて頂こうと思っています。
ありがとうございます。
みこ
7月 11th, 2010 at 17:27
タブメニューっていうんですね。
さっそく動作させてみたんですが、タブメニューの外枠部分はどこで設定するのでしょうか？
jsファイルをみたんですが、記述が探し出せませんでした。
すいませんが教えていただけないでしょうか；；
ブルー
7月 16th, 2010 at 16:48
私もみこさんと同じところで悩みました。
http://jsajax.com/Articles/jQueryUITab3/1084
サンプルにあった『tab.png』と『loading.gif』を適当な場所に配置して、
この「分割コード」の「css部」にある『tab.png』と『loading.gif』のパスを
合わせてみてください。
taro
8月 21st, 2010 at 20:07
タブごとに背景画像を変えたいんですが
どうすればいいですか？
ＣＳＳがよくわかりません
izumiman blog » jQueryを使ったタブメニューの実装サンプルまとめ
12月 1st, 2010 at 02:56
[...] jQueryを使ったタブメニューの実装サンプルまとめ [...]
mitoma
2月 15th, 2011 at 04:39
↑CSSわからんなら、あきらめた方がいいよ。
HTMLとCSSぐらい、誰でもつかえて常識な知識だから。
mt
2月 22nd, 2011 at 15:27
tabで表示されているエリア内にさらにtabを使いたい場合はどうすればよいですか？
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 [...]
jQueryでタブを表示しちゃおうか！｜fraisier – 苺樹 -
3月 26th, 2011 at 22:16
[...] 「5am! Web Illusions」様のjQueryを使ったタブメニューの実装サンプルまとめ [...]
杉浦しんいち
4月 7th, 2011 at 16:18
すごく便利です。自分のサイトで使わせてもらおうと思います。ありがとうございます。その際、サイト内のどこかにその旨を表記しようかと思っているのですが、どのように書くのがよろしいでしょうか？ご指示あれば教えていただけませんか、よろしくお願いします。
javascriptまとめ（未整理） | web制作職人ブログ
5月 16th, 2011 at 19:18
[...] ▼タブいろいろ http://5am.jp/jquery/jquery_ui_tabs/ [...]
GJ
8月 31st, 2011 at 01:10
JQueryは最近知りとても便利という事をしりましたがサンプルが
なかなかなく検索してたら見つけちゃいました。
大変わかりやすくサンプルがあり助かります。
さか
10月 5th, 2011 at 12:12
「マウスオーバーで切り替え」と「自動切り替え」の部分が間違っているような？
$(function() { } が抜けてるし、
「ui-tab7_normal > ul」は、「ui-tab> ul」なはずだし。
まちがってたら、ごめんなさい。
ｊQueryタブサンプル at せいちゃんページss
10月 13th, 2011 at 12:31
[...] http://5am.jp/jquery/jquery_ui_tabs/ [...]
タブメニュー追加 | Lord of LIFE
10月 16th, 2011 at 18:51
[...] この記事を参考に、タブメニューを導入しました。 必要ファイルはダウンロード及び設定済とし、以下の通り進めていけば完了です。 header.phpのhead内に、下記scriptを挿入します。 [...]
Ryuichiro
11月 13th, 2011 at 20:04
大変わかりやすくサンプルがあり助かります。ありがとうございます。
さて、教えて欲しいのですが、htmlを開いたときに、最初に表示するタブを２番目、あるいは３番目と、意図的に指定したいのですが、どうすればおいでしょうか。
お忙しいところ誠に申し訳ありませんが、よろしくお願いします。
Moaijikomi
12月 12th, 2011 at 17:35
Ryuichiroさん
$(function() {
$(‘#ui-tab > ul’).tabs({ selected: 1 });
});
このように書くと最初に表示するタブを変えられますよ!!