前台分页控件有很多,这里分享我的分页控件 pagination.js 1.0版本,该控件基于jquery。
先来看一下预览效果:
默认情况下,点击页码会像博客园一样,在url后面加上"#p页码"。
控件有2个参数需要注意:
1. beforeRender: 在每个页码项呈现前会被调用,参数为页码的jQuery对象。这个时候我们可以在呈现前做一些处理,例如增加自己的属性等。默认情况下,点击页码,会在url后面加上“#p页码”,这样的url并不会刷新页面。如果我们需要刷新页面,例如url为,"default.aspx",就可以在这个回调函数里处理。
2. callback: 点击页码触发,参数为整个options。点击页码并不会发起ajax请求,需要自己处理,options.index 就是本次点击的页码。有时候我们的总数可能会变化,callback 可以将 options 参数回传,这里只要重新设置总数,然后 return 即可。
具体看调用例子就明白了。
源代码:
/*分页控件v1.0 date:2015.08.26 */ (function(window,$){ $.fn.pagination = function(options){ var _dftOpts = { count:0,//总数 size:10,//每页数量 index:1,//当前页 lrCount:5,//当前页左右最多显示的数量 lCount:0,//最开始预留的数量 rCount:0,//最后预留的数量 first:"首页", last:"尾页", before:"上一页", next:"下一页", callback:null,//点击事件 beforeRender:null//项呈现前 }; $.extend(_dftOpts,options); var count = _dftOpts.count; if(count <= 0) return; var _ellipsis = "..."; var _size = _dftOpts.size > 0 "#p"; var jthis = this; var jPager = $("<div>",{"class":"pager"}); initJPager(); jthis.append(jPager); regisiterEvent(); return jthis; /*function*/ function initJPager(){ _FromTo = GetFromTo(); var from = _FromTo.from; var to = _FromTo.to; var before = _index <= 1 "<a>",{text:index,href:_url+index}); if(active){ jA.addClass("active"); } if(_dftOpts.beforeRender){ _dftOpts.beforeRender(jA); } jPager.append(jA); } function appendFirstAndLast(){ var jFirst = $("<a>",{text:_first}); var jBefore = $("<a>",{text:_before}); var jLast = $("<a>",{text:_last}); var jNext = $("<a>",{text:_next}); jPager.append(jNext).append(jLast); jBefore.insertBefore(jPager.find("a").first()); jFirst.insertBefore(jBefore); if(_index === 1){ jFirst.addClass("disabled"); jBefore.addClass("disabled"); }else{ jFirst.attr("href",_url+1); jBefore.attr("href",_url+(_index-1)); } if(_index === _page){ jLast.addClass("disabled"); jNext.addClass("disabled"); }else{ jLast.attr("href",_url+_page); jNext.attr("href",_url+(_index+1)); } } function appendEllipsis(){ jPager.append(_ellipsis); } //event function regisiterEvent(){ jPager.on("mouseenter","a",function(){ var jthis = $(this); if(!jthis.hasClass("active") && !jthis.hasClass("disabled")){ jthis.addClass("hover"); } }).on("mouseout","a",function(){ var jthis = $(this); if(!jthis.hasClass("active")){ jthis.removeClass("hover"); } }).on("click","a",function(){ var jItem = $(this); if(jItem.hasClass("disabled")){ return; } var text = jItem.text(); var index = 0; switch(text){ case _first: index = 1; break; case _before: index = _index - 1; break; case _last: index = _page; break; case _next: index = _index + 1; break; default: index = parseInt(text); break; } var callback = _dftOpts.callback; var newOpts; _dftOpts.index = index; jPager.remove(); if(callback){ newOpts = callback(_dftOpts); } if(newOpts){ _dftOpts = newOpts; } jthis.pagination(_dftOpts); }); } } })(window,$);
样式:
样式很简单,可以自己调。
.pager{height:30px;line-height:30px;font-size: 12px;margin: 25px 0px;text-align: center;color: #2E6AB1;overflow: hidden;} .pager a{border:1px solid #9AAFE5;color:#2E6AB1;margin:0px 5px;padding:5px 8px;text-decoration: none;} .pager a.hover,.pager a.active{background-color:#2E6AB1;border-color:#000080;color:#FFF;} .pager a.disabled{color:#C8CDD2;cursor:auto;}
使用例子:
$(".div1").pagination({ count:200, size:10, index:1, lrCount:3, lCount:1, rCount:1, callback:function(options){ //alert(options.index); //options.count = 300; //return options; }, beforeRender:function(jA){ //jA.attr("href","default.aspx"+jA.text()); } });
pagination.js 1.0 还有可能还有一些不足和bug,我会及时修正。
以上就是本文的全部内容,希望对大家的学习有所帮助。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2024年11月16日
2024年11月16日
- 中国武警男声合唱团《辉煌之声1天路》[DTS-WAV分轨]
- 紫薇《旧曲新韵》[320K/MP3][175.29MB]
- 紫薇《旧曲新韵》[FLAC/分轨][550.18MB]
- 周深《反深代词》[先听版][320K/MP3][72.71MB]
- 李佳薇.2024-会发光的【黑籁音乐】【FLAC分轨】
- 后弦.2012-很有爱【天浩盛世】【WAV+CUE】
- 林俊吉.2012-将你惜命命【美华】【WAV+CUE】
- 晓雅《分享》DTS-WAV
- 黑鸭子2008-飞歌[首版][WAV+CUE]
- 黄乙玲1989-水泼落地难收回[日本天龙版][WAV+CUE]
- 周深《反深代词》[先听版][FLAC/分轨][310.97MB]
- 姜育恒1984《什么时候·串起又散落》台湾复刻版[WAV+CUE][1G]
- 那英《如今》引进版[WAV+CUE][1G]
- 蔡幸娟.1991-真的让我爱你吗【飞碟】【WAV+CUE】
- 群星.2024-好团圆电视剧原声带【TME】【FLAC分轨】