タブとかスライドショーを実装するのに毎回探したり、その場実装で作ったりしていました・・。

そろそろ楽するためにも「ちゃんと作っておこう！」と思い、標準的な機能を組み込んだプラグインを作りました！

GitHub: https://github.com/kamem/jquery.dataExtend

（jQuery.dataExtedの説明と合わせて同じリポジトリに入っています。）

DEMO

仕様

1. タブ移動のような単純な切り替え。
2. スライドショーの実装。
3. タブの位置をストレージに保存。
4. 基本的な表示切り替えはクラスを変えることにより実装しています。※表示中のコンテンツはonそれ以外のコンテンツはoffが付きます。
   （slideshow or opacityの場合は、クラス変更とは別にleftやopacityをjsで変更しています。）

使い方

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.tab.js"></script>
<script type="text/javascript">
$(function(){
     $('.tab').tab();
});
</script>

html

<ul class="nav content_main">
    <li>nav1</li>
    <li>nav2</li>
    <li>nav3</li>
</ul>
<ul class="main_assist">
    <li class="prev">prev</li>
    <li class="next">next</li>
</ul>
<div class="main">
    <section>
        <h2><a href="#content1">1</a></h2>
    </section>
    <section>
        <h2><a href="#content2">2</a></h2>
    </section>
    <section>
        <h2><a href="#content3">3</a></h2>
    </section>
</div>

• ナビゲーションとして使いたい部分をプラグインとして指定します。
• そのタグのクラスに付いている「content_main」「content_」の後の文字（例の場合main）クラスが付いているエリアの子要素がタブとして切り替わります。
• 「前」や「後ろ」に進む操作をしたい場合は「main_assist」のように「タブ移動したいコンテンツクラス_assist」というタグで囲った子要素に「prev」と「next」クラスをそれぞれ付けることが実装できます。

初期設定

timer: false,
num: 0,
isSessionStorage: false,
type: 'normal',
speed: 400,
easing: 'linear',
isRoop: false

• timer: {Number} タブの自動移動の感覚（setinterval）
• num: {Number} 初期位置
• isSessionStorage: {Boolean} ストレージに保存するか
• type: {String} 移動時の動きのタイプ (slideshow or opacity)
• speed: {Number} 移動速度
• easing: {String} イージングのタイプ Easing/jQuery
  イージングが必要な場合には、イージングプラグインを別途読み込んでください。
• isRoop: {Boolean}「next」を押して次へ進んだ時に「最後から最初」の移動を戻るのではなくループするようにするか