jQuery 分页插件 jqPagination
fmms
12年前
<p>jqPagination 是一个简单易用的轻量级 jQuery 分页插件，其使用了 HTML5 和 CSS3 技术来实现。此插件提供了几个参数设置选项，通过简单的配置即可生成分页控件。此外，它的外观样式是可自定义的，扩展性很强。</p> <p><img alt="jQuery 分页插件 jqPagination" src="https://simg.open-open.com/show/2c3806393cce8021889027867af608c1.jpg" width="450" height="187" /></p> <p>使用方法：</p> <p>添加 jQuery 类库、jqPagination 插件的 JS 和 CSS 文件</p> <p style="border-bottom:#cccccc 1px solid;border-left:#cccccc 1px solid;padding-bottom:5px;padding-left:5px;padding-right:5px;font-family:monospace;background:#fffaef 0pt 0pt;color:#ab9276;font-size:13px;border-top:#cccccc 1px solid;border-right:#cccccc 1px solid;padding-top:5px;"><link rel="stylesheet" href="jqpagination.css"/><br /> <script src="jquery-1.6.2.min.js"></script><br /> <script src="jquery.jqpagination.min.js"></script></p> <p>再需要如下HTML</p> <p style="border-bottom:#cccccc 1px solid;border-left:#cccccc 1px solid;padding-bottom:5px;padding-left:5px;padding-right:5px;font-family:monospace;background:#fffaef 0pt 0pt;color:#ab9276;font-size:13px;border-top:#cccccc 1px solid;border-right:#cccccc 1px solid;padding-top:5px;"><div class="pagination"><br /> <a href="#" class="first" data-action="first">«</a><br /> <a href="#" class="previous" data-action="previous">‹</a><br /> <input type="text" readonly="readonly" data-max-page="40" /><br /> <a href="#" class="next" data-action="next">›</a><br /> <a href="#" class="last" data-action="last">»</a><br /> </div></p> <p>最后初始化插件</p> <p style="border-bottom:#cccccc 1px solid;border-left:#cccccc 1px solid;padding-bottom:5px;padding-left:5px;padding-right:5px;font-family:monospace;background:#fffaef 0pt 0pt;color:#ab9276;font-size:13px;border-top:#cccccc 1px solid;border-right:#cccccc 1px solid;padding-top:5px;">$('.pagination').jqPagination({<br /> link_string : '/?page={page_number}',<br /> current_page: 5, //设置当前页 默认为1<br /> max_page : 40, //设置最大页 默认为1<br /> page_string : '当前第{current_page}页,共{max_page}页',<br /> paged : function(page) {<br /> //回发事件。。。<br /> }<br /> });</p> <p></p> <p><strong>项目主页：</strong><a href="http://www.open-open.com/lib/view/home/1323569694609" target="_blank">http://www.open-open.com/lib/view/home/1323569694609</a></p>