自己写的一款基于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.nowoptions.max?options.max:options.now; var mainbox=$(this).html(); var page_box= $().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=$(+options.first+).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=$(+options.last+); 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=$(+options.now+).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) $(+i+).on(click,function(){if(typeof fn === function)fn($(this).text());}).appendto(page_box); else page_now.appendto(page_box); }, $.mypageinsertother=function(page_box){ $(…).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能够有所帮助。