触屏版轻量级分页插件jqPagination分享

 说到HTML5和jquery上的分页问题，优秀的分页插件网上一抓一大把，然而同时适合兼容在Ipad和手机端的网站分页却不是特别多。

或许有人会说，触屏现在流行下拉底部后加载下一页内容，类似微博和QQ空间那种模式，分页过时了。或许，阅读到底部后顺手点一下“下一页”和无需操作自动加载内容继续阅读，这小小的一点会给用户带来很不同的微妙感受。

         可以肯定的是，当要展示数据量较大时，一定会用到分页的。一是给用户内容多少的预期，二是可以给浏览者提供一个停顿。如果用户看一篇文章已经翻了十几屏，滚动条还是停留在浏览器中间靠上的位置，那该多绝望。最重要的当然还是分页的跳转功能，如果有600页的内容，昨天看到了300页，现在要301开始看，你敢用下拉加载翻300屏给我看看？

插件信息

        回到正题，jqPagination 是一个简单易用的轻量级 jquery 分页插件，其使用了 HTML5 和 CSS3 技术来实现。此插件提供了几个参数设置选项，通过简单的配置即可生成分页控件。此外，它的外观样式是可自定义的，扩展性很强，自带的分页功能包括上一页，下一页，首页，末页和直接跳到某页（中间是输入框）。

Demo：http://beneverard.github.com/jqPagination/#demo

默认样式如下：

一直觉得，跳页是很重要的功能，尤其对于页数庞大的情况，完爆一些看起来漂亮，却不带跳页的插件。例如：

这种列出来好几个页码的，一来，手机屏幕有限，会显得很拥挤；二来，还是那句，你翻到3000页给我看看？？

再回到正题，jqPagination的使用步骤如下：

　　1. 添加 jQuery 类库、jqPagination 插件的 JS 和 CSS 文件

<link rel="stylesheet" href="jqpagination.css"/>
<script src="jquery-1.6.2.min.js"></script>
<script src="jquery.jqpagination.min.js"></script>

　　2. 再需要如下HTML

<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" data-max-page="40" />
  <a href="#" class="next" data-action="next">&rsaquo;</a>
  <a href="#" class="last" data-action="last">&raquo;</a>
</div>

　　3. 最后初始化插件

$(‘.pagination‘).jqPagination({
  link_string : ‘/?page={page_number}‘,
  current_page: 5, //设置当前页 默认为1
  max_page : 40, //设置最大页 默认为1
  page_string : ‘当前第{current_page}页,共{max_page}页‘,
  paged : function(page) {
      //回发事件。。。
      }
});

参数配置

max_page
设置最大的页数，这个往往是从数据库中读取的数据的 count 总数来填充的

page_string 
文本框中显示的页码样式。

回调函数
当我们点击页码跳转到相应页时就要用到回调函数了，格式如下：

浏览器兼容

UC浏览器自带了预读下一页内容的功能，会扫描页面带有下页，下一页，下一章等关键字的链接，并提前加载链接的内容，到达你翻页时秒开下页。

那么问题来了，这插件原来的使用方式中，<a href="#" class="first" data-action="first">&laquo;</a>， 链接的地址其实加载了配置中link_string : ‘/?page={page_number}‘,的内容，就以官网的demo为例，鼠标放到下一页按键时，可以看到它加载的地址其实是不对的。

它需要点击后才生成一个正确的地址并跳转，但UC没管这么多，你写啥地址它直接读啥地址内容，有些版本甚至加载了下一页内容后直接覆盖掉你下页的按键事件，跳到了错误的地址上。。要避免这情况也很简单，只要不偷懒，在<a href="#" 中写上真实的地址就行。。

再吐槽一下，UC浏览器预读完成后，还会不忘强制改你颜色样式，给你链接套个绿帽什么的，也是醉了。。

1. position: relative;
2. color: rgb(0, 128, 0);

带个绿帽整个样子清（dou）新（bi）了。。

下载地址