2017年10月19日

工藤

様々なタブの切り替えを簡単に実装！Tabsletを使おう

マークアップ

facebook
twitter

割と使うタブの切り替え。
単純なものであれば自分でもコードを覚えれば書けないこともないのですがもうちょっと様々な効果を使ってみたい…なんて時もあります。
そんな時に役立つのが『Tabslet』です。

1 使い方

使い方

とりあえずダウンロードしましょう。下記サイトから『DOWNLOAD』ボタンでダウンロードしてください。

Tabslet

ダウンロード後はcssとjsを読み込ませます。
ダウンロードしたフォルダにある『jquery.tabslet.js』とdemo＞stylesheetsフォルダ内の『styles.css』を読み込ませましょう。

<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は読み込ませた後に自分で修正などしたりするのが無難かと思います。

読み込ませたら以下のようにカスタマイズしてみましょう。

通常のタブ

<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>

$(document).ready(function() {

$('.tabs_default').tabslet();

});

</script>

</ul>

<div id="tab-1"><span>tab 1（デフォルトのタブです）</span></div>

</div>

DEMO

ごくごく普通のタブです。
とりあえずTabsletは

タブ部分にidを振る
ボタンになるところにタブのidをリンクさせる
上記2つをクラスを付けたdiv等で囲い、そこにスクリプトの指定を行う

でタブとして動いてくれます。

アクティブの指定をデフォルトでする

<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>

$(document).ready(function() {

$('.tabs_active').tabslet({

active: 2

});

</script>

</ul>

<div id="tab-5"><span>tab 2（デフォルトのタブです）</span></div>

</div>

DEMO

該当の数字を指定するとタブをデフォルトを1番目以外にできます。
今回は『active: 2』を指定することで2番目のタブをデフォルトで最初に表示してくれています。

hoverだけで開くタブ

<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>

$('.tabs_hover').tabslet({

mouseevent: 'hover',

attribute: 'href',

animation: false

});

</script>

</ul>

<div id="tab-7"><span>tab 1（デフォルトのタブです）</span></div>

</div>

DEMO

マウスをのせるだけで開いてくれるタブを実装できます。
ちなみに『attribute: ‘href’』の記述があるのでこれを使用するとクリックをした時にはURLに直接idを振ってくれます。

タブにフェードのアニメーションを付ける

<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>

$('.tabs_animate').tabslet({

mouseevent: 'click',

attribute: 'href',

animation: true

});

</script>

</ul>

<div id="tab-10"><span>tab 1（デフォルトのタブです）</span></div>

</div>

DEMO

この方法でタブにフェードのアニメーションを付けながら切り替えることができます。

自動でタブを切り替える

<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>

$('.tabs_rotate').tabslet({

autorotate: true,

delay: 3000

});

</script>

</ul>

<div id="tab-13"><span>tab 1（デフォルトのタブです）</span></div>

</div>

DEMO

自動でタブを切り替えることができます。
delayの値を変更することで速度も変えることができます。

コントローラーを付ける

<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>

$('.tabs_controls').tabslet({

controls: {

prev: '.prev',

next: '.next'

}

});

</script>

<a class="prev">previous</a>

<li><a href="#tab-16">information</a></li>

</ul>

</div>

DEMO

コントローラーを付けることができます。
prevなどに該当のボタンのクラスを指定させてください。

タブの切り替え時にアラートをだす

<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>

$('.before_event').tabslet();

$('.before_event').on("_before", function() {

alert('タブを切り替えます！')

});

</script>

</ul>

<div id="tab-19"><span>tab 1（デフォルトのタブです）</span></div>

</div>

DEMO

タブの切り替え時にアラートをだすことができます。
alert()内のテキストは好きに変更してください。

タブの切り替え後にアラートをだす

<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>

$('.after_event').tabslet({

animation: true

});

$('.after_event').on("_after", function() {

alert('タブを切り替えました！')

});

</script>

</ul>

<div id="tab-22"><span>tab 1（デフォルトのタブです）</span></div>

</div>

DEMO

こちらはタブの切り替え後にアラートを出すことができます。
alert()内のテキストは好きに変更してください。

Web制作、Webサービスに関する技術やノウハウを発信するコラムサイト

様々なタブの切り替えを簡単に実装！Tabsletを使おう

使い方

通常のタブ

アクティブの指定をデフォルトでする

hoverだけで開くタブ

タブにフェードのアニメーションを付ける

自動でタブを切り替える

コントローラーを付ける

タブの切り替え時にアラートをだす

タブの切り替え後にアラートをだす

関連記事

【phpdotenv】PHPで環境変数を取り扱うお話

【CAPTCHA系】reCAPTCHAの代替サービスを紹介するお話

Webアクセシビリティの基本を学ぼう！