簡単!軽量!多機能!3拍子揃ったタブjQueryプラグイン「TabTab.js」

タブを使うケースは多いかと思います。
今回紹介するtabtab.jsは多機能で、面白い動きも付けられる軽量のjQueryプラグインです。
簡単!軽量!多機能!3拍子揃ったタブjQueryプラグイン「TabTab.js」サンプル

使用方法 tabtab.jsからファイルをダウンロード。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="velocity.min.js"></script>
<script type="text/javascript" src="tabtab.js"></script>
<script type="text/javascript">
$(function(){
$('.tabs').tabtab({
startSlide: 1, // スタート時のタブ
arrows: true, // 左右矢印キーでめくらせるか
dynamicHeight: true, // 高さ自動調整
useAnimations: true, // アニメーション
easing: 'ease', // イージング http://julian.com/research/velocity/#easing
speed: 350, // スピード
slideDelay: 0 // スライド切り替え速度
});
});
</script>

上記のJSを記述したら、タブ部分を書きます。
<div class="tabs" role="tabs">
<ul class="tabs__menu">
<li class="tabs__menu-item yanone active"><a href="#">features</a></li>
<li class="tabs__menu-item"><a href="#">how to setup</a></li>
</ul>
<div class="tabs__content">
<div class="tabs__content-item tab-setup active">
タブ1です
</div>
<div class="tabs__content-item tab-setup">
タブ2です
</div>
</div>
</div>

簡単!軽量!多機能!3拍子揃ったタブjQueryプラグイン「TabTab.js」サンプル

sponsors

「簡単!軽量!多機能!3拍子揃ったタブjQueryプラグイン「TabTab.js」」をシェアする

記事作成:
記事URL:

TOP > > > 簡単!軽量!多機能!3拍子揃ったタブjQueryプラグイン「TabTab.js」