当前位置 : 主页 > 网页制作 > JQuery >

jquery – 如何使用jqPagination

来源:互联网 收集:自由互联 发布时间:2021-06-15
请帮帮我,我不知道如何使用jqPagination( http://beneverard.github.com/jqPagination/).我希望每个页面都有其他内容.例如,第1页,内容是段落,第2页是其他段落.我不想点击显示/隐藏来显示内容. 谢谢!
请帮帮我,我不知道如何使用jqPagination( http://beneverard.github.com/jqPagination/).我希望每个页面都有其他内容.例如,第1页,内容是段落,第2页是其他段落.我不想点击显示/隐藏来显示内容.

谢谢!

是的,我只能假设你有类似的代码:

<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();

        }
    });

});​

看看这个working jsFiddle example,它演示了使用该插件能够显示和隐藏一系列段落.当然,这个例子可以扩展到与其他元素/场景一起使用.

请务必回答这是否能解决您的问题.

网友评论