自己寫的一款基于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?1:options.now>options.max?options.max:options.now; var mainbox=$(this).html(""); 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能夠有所幫助。
新聞熱點
疑難解答