本日ご紹介するのはですね。タブが画像になっているjQueryのプラグイン。
タブがテキストになってるのはたくさんありますよねぇ。「私、タブが画像になってると嬉しいんだけど。」「テキストが画像になればねぇ。」という多くのお声をいただきまして開発させていただきましたのがこちらimageTabs.js。
ちょっとじっくりご覧下さいこのDemo。
Demoを見る
imageTabs.js
Demoを見たり触ったりで大体わかっていただけたかと思うのですが簡単にご説明をします。jQueryプラグインですから、jQueryを読み込んでからimageTabs.jsを読み込むようにするんですねー。
// head内の記述
<script type="text/Javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/Javascript" src="js/imageTabs.js"></script>
そして見てください。以下のようにオプションを設定することができるんです。
かなり無理してます。これ、ものすごいです。
- animate
- タブが切り替わるときのアニメーション。show、slideDown、fadeInの3つが設定できてデフォルトはshow。
- duration
- タブが切り替わるときのアニメーションの時間。slow、fastや1000（1秒）とする数字での設定も可能。
- opentab
- これもつけます。最初に開いておきたいタブの設定。開いておきたいコンテンツのidを設定する。
<script type="text/javascript">
// <![CDATA[
jQuery(function($){
$('div#tabArea1').imageTabs({
animate: 'fadeIn',
duration: 'slow',
opentab: 'tab1-2'
});
});
// ]]>
</script>
HTMLのbody内の記述は以下に。注意点といたしましては、ロールオーバー画像はオフのものとオンのもの同じディレクトリにということと、オフのものがtab_01.gifの場合オンのものはtab_01_on.gifというルールに従って下さい。お願いしますー。
// body内の記述
<div class="tabArea" id="tabArea1">
<ul class="tab">
<li><a href="#tab1-1"><img src="img/tab_01.gif" alt="tab_01" /></a></li>
<li><a href="#tab1-2"><img src="img/tab_02.gif" alt="tab_02" /></a></li>
<li><a href="#tab1-3"><img src="img/tab_03.gif" alt="tab_03" /></a></li>
<li><a href="#tab1-4"><img src="img/tab_04.gif" alt="tab_04" /></a></li>
<li><a href="#tab1-5"><img src="img/tab_05.gif" alt="tab_05" /></a></li>
</ul>
<div class="tabPanelGroup">
<div id="tab1-1" class="tabPanel">
// tab1-1のコンテンツ
</div>
<div id="tab1-2" class="tabPanel">
// tab1-2のコンテンツ
</div>
<div id="tab1-3" class="tabPanel">
// tab1-3のコンテンツ
</div>
<div id="tab1-4" class="tabPanel">
// tab1-4のコンテンツ
</div>
<div id="tab1-5" class="tabPanel">
// tab1-5のコンテンツ
</div>
</div>
</div>
ここまで来るとこちらのimageTabs.js。お値段気になりますよねー？
なんとタダ！
ええー！驚きですねぇー。ここまでの機能がついてタダですよー。
皆様これはチャンスですよー。この機会に是非お使い下さいー。
調子に乗ってすみませんでした。
ということで今日はジャパネットた◯た風味にしてみました。ばいならー。
