基于bootstrap3和jquery的分頁(yè)插件
自己寫的一款基于bootstrap3和jquery的分頁(yè)插件,初學(xué)jquery插件寫法,寫的很一般。拿出來(lái)獻(xiàn)丑了。
/** * 基于bootstrap3的jquery分頁(yè)插件 * 調(diào)用方式分兩種 * 1.直接調(diào)用法 * 普通大小 * $.mypage(id,now,max,fn); * 大尺寸 * $.mypagelg(id,now,max,fn); * 小尺寸 * $.mypagesm(id,now,max,fn); * * 參數(shù)說(shuō)明:id為放置分頁(yè)容器的ID,now為當(dāng)前頁(yè),max為最大頁(yè),fn為回掉函數(shù),回掉函數(shù)有一個(gè)參數(shù)為點(diǎn)擊的頁(yè)碼 * * 2.選擇器調(diào)用法 * $(selector).mypage({ * now:now, * last:last, * callback:fn, * max:max, * first:first, * style,style * }); * 參數(shù)說(shuō)明:now為當(dāng)前頁(yè),max為最大頁(yè),callback為回掉函數(shù),回掉函數(shù)有一個(gè)參數(shù)為點(diǎn)擊的頁(yè)碼,style可選參數(shù),有"big" 和"small",fitst為首頁(yè)按鈕的文本,last為尾頁(yè)按鈕的文本 * * 當(dāng)最大頁(yè)為1時(shí)將不顯示,當(dāng)當(dāng)前頁(yè)設(shè)置小于1時(shí)默認(rèn)為1,當(dāng)前頁(yè)大于最大頁(yè)時(shí)默認(rèn)為最大頁(yè) * 引用本js前請(qǐng)先引用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);
以上所述就是本文的全部?jī)?nèi)容了,希望對(duì)大家學(xué)習(xí)jQuery能夠有所幫助。
- jQuery Pagination Ajax分頁(yè)插件(分頁(yè)切換時(shí)無(wú)刷新與延遲)中文翻譯版
- jquery分頁(yè)插件jquery.pagination.js使用方法解析
- Jquery 分頁(yè)插件之Jquery Pagination
- 最實(shí)用的jQuery分頁(yè)插件
- 分享一個(gè)自己動(dòng)手寫的jQuery分頁(yè)插件
- Ajax分頁(yè)插件Pagination從前臺(tái)jQuery到后端java總結(jié)
- jQuery ajax分頁(yè)插件實(shí)例代碼
- jQuery插件分享之分頁(yè)插件jqPagination
- jquery ajax分頁(yè)插件的簡(jiǎn)單實(shí)現(xiàn)
- jquery+css3打造一款ajax分頁(yè)插件(自寫)
- 使用JQuery實(shí)現(xiàn)的分頁(yè)插件分享
- jQuery實(shí)現(xiàn)的分頁(yè)插件完整示例
相關(guān)文章
jQuery中attr()與prop()函數(shù)用法實(shí)例詳解(附用法區(qū)別)
這篇文章主要介紹了jQuery中attr()與prop()函數(shù)用法,結(jié)合實(shí)例形式詳細(xì)分析了attr()與prop()函數(shù)的使用技巧與相關(guān)注意事項(xiàng),并附帶了attr()與prop()函數(shù)用法的區(qū)別,需要的朋友可以參考下2015-12-12jQuery Validate讓普通按鈕觸發(fā)表單驗(yàn)證的方法
一般的表單校驗(yàn)都是直接注冊(cè)在頁(yè)面上的匿名函數(shù),導(dǎo)致只能通過(guò)固定的提交方式觸發(fā)表單校驗(yàn),如果想自定義一個(gè)按鈕觸發(fā)表單校驗(yàn)如何實(shí)現(xiàn)呢,下面通過(guò)本文給大家詳細(xì)介紹2016-12-12Easyui 去除jquery-easui tab頁(yè)div自帶滾動(dòng)條的方法
這篇文章主要介紹了Easyui 去除jquery-easui tab頁(yè)div自帶滾動(dòng)條的方法,非常不錯(cuò),具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-05-05jquery實(shí)現(xiàn)未經(jīng)美化的簡(jiǎn)潔TAB菜單效果
這篇文章主要介紹了jquery實(shí)現(xiàn)未經(jīng)美化的簡(jiǎn)潔TAB菜單效果,涉及jquery鼠標(biāo)click事件實(shí)現(xiàn)頁(yè)面元素樣式動(dòng)態(tài)變換的功能,需要的朋友可以參考下2015-08-08jQuery回調(diào)函數(shù)的定義及用法實(shí)例
這篇文章主要介紹了jQuery回調(diào)函數(shù)的定義及用法,以實(shí)例形式詳細(xì)分析了回調(diào)函數(shù)的原理與實(shí)現(xiàn)技巧,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12利用jQuery實(shí)現(xiàn)打字機(jī)字幕效果實(shí)例代碼
這篇文章給大家介紹了如何利用jQuery來(lái)實(shí)現(xiàn)打字機(jī)字幕效果,文章介紹了實(shí)現(xiàn)原理和代碼,實(shí)現(xiàn)以后的效果還是不錯(cuò),有需要的可以參考借鑒。2016-09-09