基于bootstrap3和jquery的分页插件
自己写的一款基于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){ vardefaults={ now:1, max:1, callback:null, style:null, first:"«", last:"»" } varoptions=$.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?1:options.now>options.max?options.max:options.now; varmainbox=$(this).html(""); varpage_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) varpage_back=$("<li><ahref=\"javascript:void(0)\">"+options.first+"</a></li>").appendTo(page_box); if(options.now==1)page_back.addClass("disabled"); elsepage_back.on("click",function(){if(typeofoptions.callback==="function")options.callback(1);}) varpage_next=$("<li><ahref=\"javascript:void(0)\">"+options.last+"</a></li>"); if(options.now==options.max)page_next.addClass("disabled"); elsepage_next.on("click",function(){if(typeofoptions.callback==="function")options.callback(options.max);}) varpage_now=$("<li><ahref=\"javascript:void(0)\">"+options.now+"</a></li>").addClass("active"); if(options.max<=10) for(vari=1;i<=options.max;i++)$.mypageInsertItem(i,options.now,page_now,page_box,options.callback); else if(options.now<5){ for(vari=1;i<=6;i++)$.mypageInsertItem(i,options.now,page_now,page_box,options.callback); $.mypageInsertOther(page_box); }elseif(options.max-options.now<4){ $.mypageInsertOther(page_box); for(vari=options.max-5;i<=options.max;i++)$.mypageInsertItem(i,options.now,page_now,page_box,options.callback); }else{ $.mypageInsertOther(page_box); for(vari=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><ahref=\"javascript:void(0)\">"+i+"</a></li>").on("click",function(){if(typeoffn==="function")fn($(this).text());}).appendTo(page_box); elsepage_now.appendTo(page_box); }, $.mypageInsertOther=function(page_box){ $("<li><ahref=\"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能够有所帮助。