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

2013.02.22 web制作 Tags: Download, jQuery

jQuery TabPager Plugin

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

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

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

動作環境

jQuery1.7+

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

ライセンス

MITライセンス

デモページ

ダウンロード

jq-plugin-tab-pager · GitHub

使用上の注意点

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

オプション値

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

使い方の例

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

共有やブックマークなど

« Previous Post

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

【Wordpress】タブ内で記事を表示しよう！ | g lance より:

2020年08月04日 9:07 PM

[…] WebCake:https://webcake.stars.ne.jp/jquery-tab-pager-plugin.html […]
中でページ送りしてくれるタブをつくる | colp-notes より:

2022年01月31日 7:46 AM

[…] WebCake タブ切り替えとタブ内でページネーションをAjaxなしで実装するjQueryプラグイン「jQuery TabPager」を作っ… 「タブ内でページネーションが出来るjQueryプラグインをAjaxなしで作っ […]
Wordpressの記事一覧に使える！タブ内でページネーションを実現する方法 | YAM! より:

2022年07月06日 9:58 AM

[…] WebCake:https://webcake.stars.ne.jp/jquery-tab-pager-plugin.html […]

　　　　　　　　　　　　　　　