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

加载与分页

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

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

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

插件信息

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

官网：

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为例，鼠标放到下一页按键时，可以看到它加载的地址其实是不对的。

临行之前，面对太多的疑问和不解：

相关文章：

你感兴趣的文章：

标签云：