您的位置：首页 > Web前端 > JQuery

jQuery 分页插件 jPages 使用

2016-02-29 17:26 681 查看

jPages是一个典型的客户端分页插件，提供了相比其它分页插件更多的特性和功能。

主要特性

自动翻页
键盘和鼠标滚动浏览
延缓页面内容显示
完全自定义的分页导航支持
如果需要特效或者lazyload，可和其它js类库整合：Animate.css 和

Lazy Load
支持各种类型的页面导航菜单，可供大家选择
兼容主流浏览器及其IE7+

如何使用

添加如下代码到<head>区域：

<link rel="stylesheet" href="css/jPages.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/jPages.js"></script>

如果你使用Animate.css的话，你需要添加如下：

<link rel="stylesheet" href="css/animate.css">

演示代码如下：

<!-- Future navigation panel -->
<div class="holder"></div>

<!-- Item container (doesn't need to be an UL) -->
<ul id="itemContainer">
<!-- Items -->
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
...
</ul>

初始化插件：

$(function(){
$("div.holder").jPages({
containerID : "itemContainer"
});
});

div.holder代码如下：

<!-- navigation panel -->
<div class="holder">
<a class="jp-previous jp-disabled">← previous</a>
<a class="jp-current">1</a>
<span class="jp-hidden">...</span>
<a>2</a>
<a>3</a>
<a>4</a>
<a>5</a>
<a class="jp-hidden">6</a>
<a class="jp-hidden">7</a>
<a class="jp-hidden">8</a>
<a class="jp-hidden">9</a>
<span>...</span>
<a>10</a>
<a class="jp-next">next →</a>
</div>

主要选项

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：使用Animate.css的动画效果，当然需要添加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");
}
});

});

注意：分页的样式可以自己根据分页中自动生成的类名进行自行修改编辑。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery 分页插件

相关文章推荐

新的分享

章节导航