jQueryでタブ切り替えできるプラグイン Kusuutab

タブ切り替えが必要なサイトを制作した際にタブ切り替えできるプラグインを作ってみた。

オプションはshow、hideの設定のみ。

サンプルはこちら

ダウンロード

使い方はとても簡単です！

使い方

<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/jquery.kusuutab.js"></script>

html

<div id="kausuutab-container">
   <ul id="kusuutab">
      <li><a href="#tab1">tab1</a></li>
      <li><a href="#tab2">tab2</a></li>
      <li><a href="#tab3">tab3</a></li>
   </ul>
   <div id="tab1">
      <div>
         <ul>
            <li>おはようございます</li>
            <li>こんにちわ</li>
            <li>こんばんわ</li>
         </ul>
      </div>
   </div>
   <div id="tab2">
      <p>今日は天気がいいです</p>
   </div>
   <div id="tab3">
      <p>晴れた日は気持ちがいいですね</p>
   </div>
</div>

javascript ( head内に記述 )

jQuery(function() {
    jQuery("#kusuutab").kusuutab({
        show : 500,
        hide : 500
    });
});

または

jQuery(function() {
    jQuery("#kusuutab").kusuutab({
        show : {
            duration : 500,
            easing : 'swing' // swing, linear
        },
        hide : {
            duration : 500,
            easing : 'swing' // swing, linear
        }
    });
});

こんな感じで、非常にシンプルなものになっております。