2011
02/09
jQueryでタブを表示しちゃおうか！
自分用メモってことで見づらいですがお許しを。 jQueryを使ってタブを実装するのは最近よく使います。エフェクトかけると表示をふんわりをさせたり出来て便利ですよねー♪
で、さらにタブで特定の箇所をデフォルトで表示しておきたいと思うのもそれなりによくある話かなと思います。
まず、このタブの実装にはjQueryのセットをダウンロードしてきます。ここからセットでダウンロードしてきました▶http://jqueryui.com/download
ひとそれぞれだけれど、オイラは「Widgets」の所の「Tabs」だけチェック入れてダウンロード。これだけでオイラ的に良かった気がする。
よくあるこういうやつです。▼
ダウンロードしてきたセットを任意の所にアップロードします。
アップロードしたら<head>～</head>の間に以下を追加。パスはアップロードした箇所によって変更する。
アップロードするのは、jsファイルとcssファイルと画像になります。(特に画像！忘れやすいけど忘れないでね！！)
jsファイル▶jquery-○○○○.min.jsと、jquery-ui-○○○○.custom.min.js
cssファイル▶jquery-ui-○○○○.custom.css
画像ファイル▶imagesフォルダに入っているもの。
画像ファイルとcssファイルのアップ場所によっては、css内のbackgroundのimgのパスを修正する必要がありますのでお忘れなくヾ(・ω・*)(2011.05.10追記)
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.9.custom.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.9.custom.min.js"></script>
↑ちなみに、jqueryのバージョンはちょいちょい変わるので、jsやcssはDLLして入ってるバージョン(ファイル名)で記載してね。
既に記載バージョンは過去バージョンになってます(2011.05.10追記)
続いて<head>～</head>か<body>〜</body>の中に追加。
<script type="text/javascript">
$(function(){
$('#tabs').tabs();
$('#dialog_link, ul#icons li').hover(
function() { $(this).addClass('ui-state-hover'); },
function() { $(this).removeClass('ui-state-hover'); }
);
});
</script>
htmlにはこんなふうに↓。
<div id="tabs"> <ul> <li><a href="#tabs-1">ABOUT</a></li> <li><a href="#tabs-2">PICT</a></li> <li><a href="#tabs-3">LINK</a></li> <li><a href="#tabs-4">FORM</a></li> </ul> <div id="tabs-1" class="comment_area">オイラっこのサイト</div> <div id="tabs-2" class="comment_area">イラスト描くのは好きだけど下手OTZ</div> <div id="tabs-3" class="comment_area">リンクの冒険♪</div> <div id="tabs-4" class="comment_area">お問い合せフォーム</div> </div>
これで上に表示してるタブはでてきました。長い項目をツラツラ表示するよりシンプルにまとまってよいです。
で、ちょいと手を加えてみる。
さっきのやつに、タブをクリックした時にエフェクトがかかるようになりました。見せ方綺麗です。▼
<head>～</head>か<body>〜</body>の中に追加記載したスクリプトのコードを下記の様に変更。
<script type="text/javascript">
$(function(){
$('#tabs').tabs({ fx: { opacity: 'toggle', duration: 'normal' } });
$('#dialog_link, ul#icons li').hover(
function() { $(this).addClass('ui-state-hover'); },
function() { $(this).removeClass('ui-state-hover'); }
);
});
</script>
↑3行目の記述を変更してます。durationの部分の記述は’normal’だけれど、ここを’fast’にすれば少し早くエフェクトするし、’slow’と記述すればのんびりエフェクトします。
もう一つ表示として出来たらいいなーと思うのが、デフォルトで開いているタブを、最初のタブじゃなくって別のタブにしておきたい時。
割とこういう使い方が欲しい人はいると思うんだよな。
さっきのエフェクトに、さらに「PICT」がデフォルトで選ばれてる状態です。▼
<head>～</head>か<body>〜</body>の中に追加記載したスクリプトのコードを下記の様に変更。
<script type="text/javascript">
$(function(){
$('#tabs').tabs({ fx: { opacity: 'toggle', duration: 'normal' ,selected: 1 } });
$('#dialog_link, ul#icons li').hover(
function() { $(this).addClass('ui-state-hover'); },
function() { $(this).removeClass('ui-state-hover'); }
);
});
</script>
↑3行目の最後の方に、selected: 1を加えました。
加えてさらに、htmlのデフォルトで開いておきたいリスト部分に
<li class=”ui-tabs-selected”>～</li>
と、class属性をつければ完成！
<div id="tabs"> <ul> <li><a href="#tabs-1">ABOUT</a></li> <li class="ui-tabs-selected"><a href="#tabs-2">PICT</a></li> <li><a href="#tabs-3">LINK</a></li> <li><a href="#tabs-4">FORM</a></li> </ul> <div id="tabs-1" class="comment_area">オイラっこのサイト</div> <div id="tabs-2" class="comment_area">イラスト描くのは好きだけど下手OTZ</div> <div id="tabs-3" class="comment_area">リンクの冒険♪</div> <div id="tabs-4" class="comment_area">お問い合せフォーム</div> </div>
こちらの設置に関しては、下記のサイトを参考にさせていただきました＼(*´▽｀)
「5am! Web Illusions」様のjQueryを使ったタブメニューの実装サンプルまとめ
上記サイト様にはさらにタブの素敵な使い方が書いてありました。面白い設置をされたい方にはおすすめです。
※今回の記事は環境によっては作動しない可能性がありますのでご注意を。
Trackback URL
comment
ご自由にどぞ。