割と使うタブの切り替え。
単純なものであれば自分でもコードを覚えれば書けないこともないのですがもうちょっと様々な効果を使ってみたい…なんて時もあります。
そんな時に役立つのが『Tabslet』です。
目次
使い方
とりあえずダウンロードしましょう。下記サイトから『DOWNLOAD』ボタンでダウンロードしてください。
ダウンロード後はcssとjsを読み込ませます。
ダウンロードしたフォルダにある『jquery.tabslet.js』とdemo＞stylesheetsフォルダ内の『styles.css』を読み込ませましょう。
|
1 2 3 |
<link href="./css/basic.css" rel="stylesheet" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="./js/jquery.tabslet.js"></script> |
cssは読み込ませた後に自分で修正などしたりするのが無難かと思います。
読み込ませたら以下のようにカスタマイズしてみましょう。
通常のタブ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<script> $(document).ready(function() { $('.tabs_default').tabslet(); }); </script> <div class="tabs tabs_default"> <ul class="horizontal"> <li><a href="#tab-1">tab1</a></li> <li><a href="#tab-2">tab2</a></li> <li><a href="#tab-3">tab3</a></li> </ul> <div id="tab-1"><span>tab 1（デフォルトのタブです）</span></div> <div id="tab-2"><span>tab 2</span></div> <div id="tab-3"><span>tab 3</span></div> </div> |
DEMO
ごくごく普通のタブです。
とりあえずTabsletは
- タブ部分にidを振る
- ボタンになるところにタブのidをリンクさせる
- 上記2つをクラスを付けたdiv等で囲い、そこにスクリプトの指定を行う
アクティブの指定をデフォルトでする
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<script> $(document).ready(function() { $('.tabs_active').tabslet({ active: 2 }); }); </script> <div class="tabs tabs_active"> <ul class="horizontal"> <li><a href="#tab-4">tab1</a></li> <li><a href="#tab-5">tab2</a></li> <li><a href="#tab-6">tab3</a></li> </ul> <div id="tab-4"><span>tab 1</span></div> <div id="tab-5"><span>tab 2（デフォルトのタブです）</span></div> <div id="tab-6"><span>tab 3</span></div> </div> |
DEMO
該当の数字を指定するとタブをデフォルトを1番目以外にできます。
今回は『active: 2』を指定することで2番目のタブをデフォルトで最初に表示してくれています。
hoverだけで開くタブ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<script> $('.tabs_hover').tabslet({ mouseevent: 'hover', attribute: 'href', animation: false }); </script> <div class="tabs tabs_hover"> <ul class="horizontal"> <li><a href="#tab-7">tab1</a></li> <li><a href="#tab-8">tab2</a></li> <li><a href="#tab-9">tab3</a></li> </ul> <div id="tab-7"><span>tab 1（デフォルトのタブです）</span></div> <div id="tab-8"><span>tab 2</span></div> <div id="tab-9"><span>tab 3</span></div> </div> |
DEMO
マウスをのせるだけで開いてくれるタブを実装できます。
ちなみに『attribute: ‘href’』の記述があるのでこれを使用するとクリックをした時にはURLに直接idを振ってくれます。
タブにフェードのアニメーションを付ける
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<script> $('.tabs_animate').tabslet({ mouseevent: 'click', attribute: 'href', animation: true }); </script> <div class="tabs tabs_animate"> <ul class="horizontal"> <li><a href="#tab-10">tab1</a></li> <li><a href="#tab-11">tab2</a></li> <li><a href="#tab-12">tab3</a></li> </ul> <div id="tab-10"><span>tab 1（デフォルトのタブです）</span></div> <div id="tab-11"><span>tab 2</span></div> <div id="tab-12"><span>tab 3</span></div> </div> |
DEMO
この方法でタブにフェードのアニメーションを付けながら切り替えることができます。
自動でタブを切り替える
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<script> $('.tabs_rotate').tabslet({ autorotate: true, delay: 3000 }); </script> <div class="tabs tabs_rotate"> <ul class="horizontal"> <li><a href="#tab-13">tab1</a></li> <li><a href="#tab-14">tab2</a></li> <li><a href="#tab-15">tab3</a></li> </ul> <div id="tab-13"><span>tab 1（デフォルトのタブです）</span></div> <div id="tab-14"><span>tab 2</span></div> <div id="tab-15"><span>tab 3</span></div> </div> |
DEMO
自動でタブを切り替えることができます。
delayの値を変更することで速度も変えることができます。
コントローラーを付ける
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<script> $('.tabs_controls').tabslet({ controls: { prev: '.prev', next: '.next' } }); </script> <div class="tabs tabs_controls"> <a class="prev">previous</a> <a class="next">next</a> <span class="clear"></span> <ul class="horizontal"> <li><a href="#tab-16">information</a></li> <li><a href="#tab-17">tab</a></li> <li><a href="#tab-18">tab</a></li> </ul> <div id="tab-16"><span>Tab 1</span></div> <div id="tab-17"><span>Tab 2</span></div> <div id="tab-18"><span>Tab 3</span></div> </div> |
DEMO
コントローラーを付けることができます。
prevなどに該当のボタンのクラスを指定させてください。
タブの切り替え時にアラートをだす
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<script> $('.before_event').tabslet(); $('.before_event').on("_before", function() { alert('タブを切り替えます！') }); </script> <div class="tabs before_event"> <ul class="horizontal"> <li><a href="#tab-19">tab1</a></li> <li><a href="#tab-20">tab2</a></li> <li><a href="#tab-21">tab3</a></li> </ul> <div id="tab-19"><span>tab 1（デフォルトのタブです）</span></div> <div id="tab-20"><span>tab 2</span></div> <div id="tab-21"><span>tab 3</span></div> </div> |
DEMO
タブの切り替え時にアラートをだすことができます。
alert()内のテキストは好きに変更してください。
タブの切り替え後にアラートをだす
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<script> $('.after_event').tabslet({ animation: true }); $('.after_event').on("_after", function() { alert('タブを切り替えました！') }); </script> <div class="tabs after_event"> <ul class="horizontal"> <li><a href="#tab-22">tab1</a></li> <li><a href="#tab-23">tab2</a></li> <li><a href="#tab-24">tab3</a></li> </ul> <div id="tab-22"><span>tab 1（デフォルトのタブです）</span></div> <div id="tab-23"><span>tab 2</span></div> <div id="tab-24"><span>tab 3</span></div> </div> |
DEMO
こちらはタブの切り替え後にアラートを出すことができます。
alert()内のテキストは好きに変更してください。
