自己写的一款基于bootstrap3和jquery的分页插件,初学jquery插件写法,写的很一般。拿出来献丑了。
/** * 基于bootstrap3的jquery分页插件 * 调用方式分两种 * 1.直接调用法 * 普通大小 * $.mypage(id,now,max,fn); * 大尺寸 * $.mypagelg(id,now,max,fn); * 小尺寸 * $.mypagesm(id,now,max,fn); * * 参数说明:id为放置分页容器的ID,now为当前页,max为最大页,fn为回掉函数,回掉函数有一个参数为点击的页码 * * 2.选择器调用法 * $(selector).mypage({ * now:now, * last:last, * callback:fn, * max:max, * first:first, * style,style * }); * 参数说明:now为当前页,max为最大页,callback为回掉函数,回掉函数有一个参数为点击的页码,style可选参数,有"big" 和"small",fitst为首页按钮的文本,last为尾页按钮的文本 * * 当最大页为1时将不显示,当当前页设置小于1时默认为1,当前页大于最大页时默认为最大页 * 引用本js前请先引用jquery的js文件和bootstrap3的css文件 * */ (function ($) { $.fn.mypage = function(options){ var defaults = { now:1, max:1, callback:null, style:null, first:"«", last:"»" } var options = $.extend(defaults, options); this.each(function(){ options.max=Math.round(options.max); options.now=Math.round(options.now); if(options.max<=1||isNaN(options.max)||isNaN(options.now))return; options.now=options.now<1""); var page_box= $("<ul></ul>").addClass("pagination").appendTo(mainbox); if(options.style!=null) page_box.addClass(options.style=="big""pagination-lg":options.style=="small""pagination-sm":options.style) var page_back=$("<li><a href=\"javascript:void(0)\">"+options.first+"</a></li>").appendTo(page_box); if(options.now==1) page_back.addClass("disabled"); else page_back.on("click",function(){if(typeof options.callback === "function")options.callback(1);}) var page_next=$("<li><a href=\"javascript:void(0)\">"+options.last+"</a></li>"); if(options.now==options.max) page_next.addClass("disabled"); else page_next.on("click",function(){if(typeof options.callback === "function")options.callback(options.max);}) var page_now=$("<li><a href=\"javascript:void(0)\">"+options.now+"</a></li>").addClass("active"); if(options.max<=10) for(var i=1;i<=options.max;i++) $.mypageInsertItem(i,options.now,page_now,page_box,options.callback); else if(options.now<5){ for(var i=1;i<=6;i++) $.mypageInsertItem(i,options.now,page_now,page_box,options.callback); $.mypageInsertOther(page_box); }else if(options.max-options.now<4){ $.mypageInsertOther(page_box); for(var i=options.max-5;i<=options.max;i++) $.mypageInsertItem(i,options.now,page_now,page_box,options.callback); }else{ $.mypageInsertOther(page_box); for(var i=options.now-2;i<=options.now+2;i++) $.mypageInsertItem(i,options.now,page_now,page_box,options.callback); $.mypageInsertOther(page_box); } page_next.appendTo(page_box); }) }, $.mypageInsertItem=function(i,now,page_now,page_box,fn){ if(i!=now) $("<li><a href=\"javascript:void(0)\">"+i+"</a></li>").on("click",function(){if(typeof fn === "function")fn($(this).text());}).appendTo(page_box); else page_now.appendTo(page_box); }, $.mypageInsertOther=function(page_box){ $("<li><a href=\"javascript:void(0)\">…</a></li>").addClass("disabled").appendTo(page_box); }, $.mypage=function(id,now,max,fn){$("#"+id).mypage({now:now,max:max,callback:fn})}, $.mypagesm=function(id,now,max,fn){$("#"+id).mypage({now:now,max:max,callback:fn,style:"pagination-sm"})}, $.mypagelg=function(id,now,max,fn){$("#"+id).mypage({now:now,max:max,callback:fn,style:"pagination-lg"})} })(jQuery);
以上所述就是本文的全部内容了,希望对大家学习jQuery能够有所帮助。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“基于bootstrap3和jquery的分页插件”评论...
更新动态
2024年11月15日
2024年11月15日
- 群星-时尚慢摇DJ舞曲《发烧车载中文天碟-调情》非卖品[WAV]
- 潘美辰.2008-全新重声大碟(出道20年精选纪念版)【倍特音乐】【WAV+CUE】
- 罗时丰.2002-唱歌的人(2011再生版)【贝特音乐】【WAV+CUE】
- 罗时丰.2003-唱歌的人台语精选+新歌【贝特音乐】【WAV+CUE】
- 999PUNKSTA《情绪数码故障》[Hi-Res][24bit 48kHz][FLAC/分轨][301.83MB]
- HOYO-MiX《原神-珍珠之歌4 游戏音乐》[320K/MP3][289.48MB]
- 陈崎凡《CHEN》[320K/MP3][81.13MB]
- skt都在哪一年夺冠 英雄联盟skt夺冠赛季介绍
- 炉石传说抢先体验乱斗什么时候结束 深暗领域体验乱斗结束时间
- 炉石传说抢先乱斗卡组有什么 深暗领域抢先体验乱斗卡组推荐
- 荣耀手机腕上最佳搭档 荣耀手表5首销开启
- 雷克沙ARES 6000 C28战神之翼 AMD 9800X3D超强搭档
- 咪咕快游感恩同游,超值回馈尽在咪咕咪粉节!
- 陈崎凡《CHEN》[FLAC/分轨][326.32MB]
- 群星《我们的歌第六季 第2期》[320K/MP3][74.05MB]