タブ切り替えとタブ内でページネーションをAjaxなしで実装するjQueryプラグイン「jQuery TabPager」を作ったので公開

jQuery TabPager Plugin

「タブ内でページネーションが出来るjQueryプラグインをAjaxなしで作って!」と言われたので作ってみました!

β版公開からv2.0.0にアップデートしました。

  

この記事は1年以上前に書かれたものです。
情報が古い可能性があります。

動作環境

  • jQuery1.7+
.live()はjQuery1.7から非推奨になっていて、1.9では削除対象だから.on()のほうがいいよって教えて貰いました。ありがとうございます。

そんな訳でjQuery1.7以上対応です。

ライセンス

  • MITライセンス

デモページ

ダウンロード

使用上の注意点

  • コンテンツの量が多いと当然重くなります。
  • タグの閉じ忘れやインライン要素やブロック要素の扱いなど、マークアップがおかしいと正しくページの分割が行われない可能性があります。
  • サンプルのコードだと、contentsクラスの配下の要素をページ分割するようになっています。

オプション値

引数名 説明 初期値 備考
items 1ページあたりの最大表示数 5  
contents コンテンツのクラス名 'contents'  
time ページ切り替え時のフェードイン時間 800  
previous 前のページに1つ戻るナビゲーションのテキスト 'Previous»'  
next 次のページに1つ進むナビゲーションのテキスト '«Next'  
start 初期ロード時のタブ開始位置 1  
position ページナビゲーションの表示位置
'top' または 'bottom' を指定可能)
'bottom'  
scroll スクロール位置を保持
true または false を指定可能)
true バージョン2.0.0.より

バージョン履歴

  • 2014/01/28・・・v2.0.0にアップデートしました。scrollオプションを追加しました。

使い方の例

<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8" />
    <title>jQuery TabPager Plugin</title>
    <meta name="viewport" content="width=device-width" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    
    <!-- CSS -->
    <link rel="stylesheet" href="css/jquery.tabpager.css" />
    
    <style>
    /* スタイルはこんな感じで上書可能 */
    .jquery-tab-pager-tabbar  li.current {
        color: #fff;
    }
    #tab li.current {
        font-style: italic;
    }
    #jquery-tab-pager-navi {
        margin-bottom: 10px;
    }
    
    /* ここから独自スタイル */
    h1 { font-family: 'Helvetica Neue', Helvetica, sans-serif; }
    #wrapper {
        border: 1px solid #eee;
        padding: 10px;
    }
    .contents {
        margin-bottom: 10px;
    }
    </style>
    
    <!-- JS -->
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="js/jquery.tabpager.min.js"></script> 
    <script>
    $(document).ready(function() 
    {
        $("#tab").tabpager({
            items: 5,
            contents: 'contents',
            //time: 300,
            previous: '&laquo;前へ',
            next: '次へ&raquo;',
            //start: 1,
            position: 'top',
            //scroll: true
        });
    });

    </script>
</head>
<body>
    <h1>jQuery TabPager Plugin</h1>
    
    <!-- #tab -->
    <ul id="tab">
        <li>TAB1</li>
        <li>TAB2</li>
        <li>TAB3</li>
        <li>TAB4</li>
    </ul>
    <!-- /#tab -->
    
    <!-- #wrapper -->
    <div id="wrapper">
    
        <!-- .contents -->
        <div class="contents">
            <div>contents1-1</div> 
            <div>contents1-2</div> 
            <div>contents1-3</div> 
            <div>contents1-4</div>
            <div>contents1-5</div> 
            <div>contents1-6</div> 
            <div>contents1-7</div> 
            <div>contents1-8</div> 
            <div>contents1-9</div> 
            <div>contents1-10</div> 
            <div>contents1-11</div> 
        </div>
        <!-- /.contents -->
        
        <!-- .contents -->
        <div class="contents">
            <div>contents2-1</div> 
            <div>contents2-2</div> 
            <div>contents2-3</div> 
            <div>contents2-4</div>
            <div>contents2-5</div> 
            <div>contents2-6</div> 
            <div>contents2-7</div> 
            <div>contents2-8</div> 
            <div>contents2-9</div> 
            <div>contents2-10</div> 
            <div>contents2-11</div> 
        </div>
        <!-- /.contents -->
        
        <!-- .contents -->
        <div class="contents">
            <div>contents3-1</div> 
            <div>contents3-2</div> 
            <div>contents3-3</div> 
            <div>contents3-4</div>
            <div>contents3-5</div> 
            <div>contents3-6</div> 
            <div>contents3-7</div> 
            <div>contents3-8</div> 
            <div>contents3-9</div>
        </div>
        <!-- /.contents -->
        
        <!-- .contents -->
        <div class="contents">
            <div>contents4-1</div> 
        </div>
        <!-- /.contents -->
    </div>
    <!-- /#wrapper -->
</body>
</html>
  

共有やブックマークなど