jQuery插件QuickPaginate快速分页实现javascript分页功能

这里介绍一个分页插件，那么什么叫QuickPaginate快速分页，这个插件实现就是将需要显示的内容用分页的方法显示，但不是真正意义上的 分页，因为QuickPaginate快速分页不需要与服务器端交互，所有的内容已经全部输送到客户端，每次显示部分信息，用分页的形式进行浏览，效果图 如下：
quickpaginate
使用说明
一，需要jQuery库文件和QuickPaginate库文件
二，可自定义分页CSS显示效果，如：qp_prev和qp_next

使用实例
一，包含文件部分

  1. <script src="jquery.js" type="text/javascript" ></script>
  2. <script src="jquery.quickpaginate.js" type="text/javascript" ></script>

二，HTML部分
(1)jQuery插件QuickPaginate实现文本分页功能

  1. <ul id="biuuu_city_list">
  2. <li>北京</li>
  3. <li>上海</li>
  4. <li>广州</li>
  5. <li>杭州</li>
  6. <li>长沙</li>
  7. <li>合肥</li>
  8. <li>宁夏</li>
  9. <li>成都</li>
  10. <li>西安</li>
  11. <li>南昌</li>
  12. </ul>
  13. <div id="biuuu_city"></div>

其中ID为biuuu_city_list的DIV是要实现分页的内容，ID为biuuu_city是显示分页内容，具体看效果图

(2)jQuery插件QuickPaginate实现图片分页功能

  1. <div id="images">
  2. <img src="demo_images/demo1.jpg" width="200" height="133" alt="biuuu1" />
  3. <img src="demo_images/demo2.jpg" width="200" height="133" alt="biuuu2" />
  4. <img src="demo_images/demo3.jpg" width="200" height="133" alt="biuuu3" />
  5. </div>
  6. <div id="images_counter"></div>

三，javascript部分(调用jQuery插件QuickPaginate)

  1. <script type="text/javascript">
  2. $(function(){
  3. $("#biuuu_city_list li").quickpaginate({ perpage: 4, pager : $("#biuuu_city") });
  4. });
  5. $(function(){
  6. $("#images img").quickpaginate({ perpage: 1, showcounter: false, pager : $("#images_counter") });
  7. });
  8. </script>

jQuery插件QuickPaginate参数详解
perpage表示每页显示数，默认值为6，如上文本实例每页显示4个城市，图片实例每页显示1张图片
pager表示QuickPaginate生成分页HTML代码显示的对象，默认为null，如上：$("#biuuu_city")和$("#images_counter")
showcounter表示是否显示统计，默认为true
prev表示上一页CSS样式名，默认为qp_next，具体请看QuickPaginate生成的代码图
next表示下一页CSS样式名，默认为qp_prev
pagenumber表示当前页CSS样式名，默认为qp_pagenumber
totalnumber表示总页数CSS样式名，默认为qp_totalnumber
counter表示统计CSS样式名，默认为qp_counter
jQuery插件QuickPaginate快速分页实现javascript分页功能

注意事项
注意默认的QuickPaginate是UTF8编码，同时需要修改部分QuickPaginate的JS库代码，如将prev修改为中文上一页，next修改为中文下一页，其实就是分页样式，上面的参数中大部分都是定义某个部分的样式，因为样式也是非常重要的。

以上实例可知使用jQuery插件QuickPaginate快速分页非常简单，只需要指定内容，指定每页显示数，显示样式，即可实现快速分页功能，在实际应用中，可对菜单、图片等进行分页，非常具有实用性，值得推荐。

点我下载jQuery插件QuickPaginate快速分页程序
点我查看jQuery插件QuickPaginate快速分面演示

共有0个回答