3

jqPagination ( http://beneverard.github.com/jqPagination/ ) の使い方がわかりません。他のコンテンツを含む各ページを作成します。例、ページ 1、コンテンツは段落、ページ 2 は別の段落です。そして、コンテンツを表示するために表示/非表示をクリックしたくありません。

ありがとうございました！

4

2 に答える 2

9

そうですね、次のようなコードがあるとしか思えません。

<div class="some-container">
    <p>My first paragraph</p>
    <p>My second paragraph</p>
    <p>My third paragraph</p>
</div>

<div class="pagination">
    <a href="#" class="first" data-action="first">&laquo;</a>
    <a href="#" class="previous" data-action="previous">&lsaquo;</a>               
    <input type="text" readonly="readonly" />
    <a href="#" class="next" data-action="next">&rsaquo;</a>
    <a href="#" class="last" data-action="last">&raquo;</a>
</div>

そして、jqPaginaton を使用して各段落を順番に表示/非表示にしたい場合は、次のコードを試してください。

$(document).ready(function() {

    // hide all but the first of our paragraphs
    $('.some-container p:not(:first)').hide();

    $('.pagination').jqPagination({
        max_page    : $('.some-container p').length,
        paged        : function(page) {

            // a new 'page' has been requested

            // hide all paragraphs
            $('.some-container p').hide();

            // but show the one we want
            $($('.some-container p')[page - 1]).show();

        }
    });

});​

this working jsFiddle exampleを見てください。プラグインを使用して、段落の範囲を表示および非表示にできることを示しています。もちろん、この例は、他の要素やシナリオでも動作するように拡張できます。

これで問題が解決したかどうかについて、必ずコメントしてください。

于 2012-07-07T08:00:06.207 に答える
3

jPagesを使用しています。これはうまくいきます。

ページに ID を指定するだけです。そして、この情報の下に div を配置します。

あなたのjQueryでは、これを追加するだけです:

$(".holder").jPages({
    containerID: "pageDivId",
    perPage: 3
});

ホルダーは、作成した新しい div です。そして、containerId は pagediv 全体の ID です。

ここでjPagesを確認できます

于 2012-07-06T13:10:27.190 に答える