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

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

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

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

插件信息

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

官网：http://beneverard.github.com/jqPagination/

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

默认样式如下：

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

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

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

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

　　2. 再需要如下HTML

<div class="pagination">
<a href="#" class="first" data-action="first">«</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">»</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) {
//回发事件。。。
}
});

参数配置

current_page
初始化设置当前的页码，默认值为：1

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

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

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

paged: function(page) {

//点击页码要做的操作

//如果是无刷新分页的话，就可以写成 getDataByPage(page) 这里 getDataByPage 是一个从服务端获取指定页数据的方法

//如果是一般动态页或者是静态页的话，就直接跳转到相应的页面   location.href="view.aspx?id="+page  或者 location.href="view-"+page+".html"

再说样子

插件的样式比较欧式风格，可能天朝国民看着不习惯，作为前端开发人员，整个容的能力还是有的。这样看起来是不是亲切多了。320 X 480的小屏机也毫无压力。

浏览器兼容

经亲测，在电脑和移动端主流的浏览器都没有问题，但注意如果中文化了，就要做下小改动，适应某些浏览器自带的一些牛（qi）逼（pa）功能，例如UC。

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

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

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

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

a[ucautopagerstatus="complete"] {

position: relative;
color: rgb(0, 128, 0);

}

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

下载地址

官方下载：https://github.com/beneverard/jqPagination/zipball/master