最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

JQuery的Pager分页器实现代码_jquery

来源:动视网 责编:小OO 时间:2020-11-27 21:49:54
文档

JQuery的Pager分页器实现代码_jquery

效果图。代码。html代码。 分页器 。css代码。
推荐度:
导读效果图。代码。html代码。 分页器 。css代码。
 本文实例为大家分享了JQuery的Pager分页器的具体实现代码,供大家参考,具体内容如下

效果图:

代码:

html代码:




 
 分页器
 


 
 
 

css代码:

.pager-box:after{
 display:block;
 height:0;
 visibility:hidden;
 clear:both;
 content:'';
}
.pager{
 float:left;
 position:relative;
 left:50%;
 font-family:微软雅黑;
}
.pager a,.pager span{
 position:relative;
 left:-50%;
 display:block;
 float:left;
 margin-left:5px;
 border:1px solid #b6bcc1;
 padding: 5px 10px;
 text-decoration:none;
 color:#b6bcc1;
 border-radius:3px;
}
.pager span{
 border:0;
}
.pager a.js-selected{
 background:#b6bcc1;
 color:#fff;
 cursor:default;
}
.pager a.js-disabled{
 background:#f1f1f1;
 border-color:#f1f1f1;
 cursor:default;
 color:#fff;
}

pager.js代码

主要思路:

分页器共分为以下4种情况:

情况1,当total < 8 时,所有的页码全部显示。

情况2,当total >= 8 且 index < 5时,显示1-6和最后一页。

情况3,当total >= 8 且 index > total - 4时,显示1和最后6项。

情况4,当total >= 8 且 5 <= index <= total - 4时,显示1和最后一页,和中间5项。

Pager类实例化时传入一个设置对象:

当我们实例化Pager时,执行Pager函数体内的语句,首先赋值,然后就执行初始化函数:

初始化函数this.__init结构:

初始化完成,点击后就会做出相应的判断,并使用this._$setIndex(index)进行跳转。

更多关于分页教程的文章,请查看以下专题:

javascript分页功能操作
jquery分页功能操作
php分页功能操作
ASP.NET分页功能操作

下载:paper

文档

JQuery的Pager分页器实现代码_jquery

效果图。代码。html代码。 分页器 。css代码。
推荐度:
标签: 实现 代码 jQuery
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top