jQuery的分页插件很多，但是大都的功能都比较简单，今天我们分享一个非常酷的分页插件 - ，拥有丰富的功能和特效，大家肯定会喜欢！
jPages是一个典型的客户端分页插件，提供了相比其它分页插件更多的特性和功能。
主要特性
- 自动翻页
- 键盘和鼠标滚动浏览
- 延缓页面内容显示
- 完全自定义的分页导航支持
- 如果需要特效或者lazyload，可和其它js类库整合： 和
- 支持各种类型的页面导航菜单，可供大家选择
- 兼容主流浏览器及其IE7+
如何使用
添加如下代码到<head>区域：
如果你使用的话，你需要添加如下：
演示代码如下：
- ...
- ...
- ...
- ...
- ... ...
初始化插件：
$(function(){ $("div.holder").jPages({ containerID : "itemContainer" });}); div.holder代码如下：
主要选项
- containerID：需要实现分页的容器元素，可以是div或者UL，OL
- first： 自定义”首页“button是否显示，缺省为false，如果传递字符串，则显示为“首页”文字。
- previous：自定义”上一页“button是否显示
- next：同上是否显示”下一页“button
- last：是否显示”尾页“button
- startPage：需要显示的开发页数，缺省为”1“
- perPage：每页显示的项目数，缺省为”10“
- midRange：显示包含当前页数显示页面数量，缺省为”5“
- startRange：显示开始显示的页面数，无论目前你处于哪个页面，缺省”1”。
- endRange：显示末尾显示的页面数，无论目前你处于哪个页面，缺省”1”。
- callback：回调函数function(page, items){}，pages对象属性，pages.current，pages.interval，pages.count
- animation：使用的动画效果，当然需要添加css3类库支持。
- fallback：如果不使用CSS3动画，你可以使用fallback来设定jQuery的淡入效果的速度。
演示代码
/* when document is ready */$(function(){ /* initiate the plugin */ $("div.holder").jPages({ containerID : "itemContainer", first: '首页', last: '尾页', previous: '上页', next: '下页', perPage: 12, startPage: 1, startRange: 2, midRange: 3, endRange: 2, animation: 'wobble', keyBrowse: true, callback : function( pages, items ){ /* lazy load current images */ items.showing.find("img").trigger("turnPage"); /* lazy load next page images */ items.oncoming.find("img").trigger("turnPage"); } });});