基于bootstrap3和jquery的分頁插件
自己寫的一款基于bootstrap3和jquery的分頁插件,初學(xué)jquery插件寫法,寫的很一般。拿出來獻(xiàn)丑了。
/**
* 基于bootstrap3的jquery分頁插件
* 調(diào)用方式分兩種
* 1.直接調(diào)用法
* 普通大小
* $.mypage(id,now,max,fn);
* 大尺寸
* $.mypagelg(id,now,max,fn);
* 小尺寸
* $.mypagesm(id,now,max,fn);
*
* 參數(shù)說明:id為放置分頁容器的ID,now為當(dāng)前頁,max為最大頁,fn為回掉函數(shù),回掉函數(shù)有一個參數(shù)為點(diǎn)擊的頁碼
*
* 2.選擇器調(diào)用法
* $(selector).mypage({
* now:now,
* last:last,
* callback:fn,
* max:max,
* first:first,
* style,style
* });
* 參數(shù)說明:now為當(dāng)前頁,max為最大頁,callback為回掉函數(shù),回掉函數(shù)有一個參數(shù)為點(diǎn)擊的頁碼,style可選參數(shù),有"big" 和"small",fitst為首頁按鈕的文本,last為尾頁按鈕的文本
*
* 當(dāng)最大頁為1時將不顯示,當(dāng)當(dāng)前頁設(shè)置小于1時默認(rèn)為1,當(dāng)前頁大于最大頁時默認(rèn)為最大頁
* 引用本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);
以上所述就是本文的全部內(nèi)容了,希望對大家學(xué)習(xí)jQuery能夠有所幫助。
- jQuery Pagination Ajax分頁插件(分頁切換時無刷新與延遲)中文翻譯版
- jquery分頁插件jquery.pagination.js使用方法解析
- Jquery 分頁插件之Jquery Pagination
- 最實(shí)用的jQuery分頁插件
- 分享一個自己動手寫的jQuery分頁插件
- Ajax分頁插件Pagination從前臺jQuery到后端java總結(jié)
- jQuery ajax分頁插件實(shí)例代碼
- jQuery插件分享之分頁插件jqPagination
- jquery ajax分頁插件的簡單實(shí)現(xiàn)
- jquery+css3打造一款ajax分頁插件(自寫)
- 使用JQuery實(shí)現(xiàn)的分頁插件分享
- jQuery實(shí)現(xiàn)的分頁插件完整示例
相關(guān)文章
『jQuery』.html(),.text()和.val()的概述及使用
如何使用jQuery中的.html(),.text()和.val()三種方法,用于讀取,修改元素的html結(jié)構(gòu),元素的文本內(nèi)容,以及表單元素的value值的方法2013-04-04
jQuery實(shí)現(xiàn)iframe父窗體和子窗體的相互調(diào)用
這篇文章主要介紹了jQuery實(shí)現(xiàn)iframe父窗體和子窗體的相互調(diào)用,涉及jQuery窗體調(diào)用的相關(guān)技巧,需要的朋友可以參考下2016-06-06
jquery之empty()與remove()區(qū)別說明
要用到移除指定元素的時候,發(fā)現(xiàn)empty()與remove([expr])都可以用來實(shí)現(xiàn)。可仔細(xì)觀察效果的話就可以發(fā)現(xiàn)。2010-09-09
分享33個jQuery與CSS3實(shí)現(xiàn)的絢麗鼠標(biāo)懸停效果
今天整理了33個使用jQuery與CSS3實(shí)現(xiàn)絢麗的鼠標(biāo)懸停效果,有些是純CSS3的,這些效果你完全可以用在你的網(wǎng)頁上,讓網(wǎng)站獲得更好的體驗(yàn)2014-12-12
瘋狂Jquery第一天(Jquery學(xué)習(xí)筆記)
之前一直學(xué)習(xí),現(xiàn)在終于有時間來整理一下文檔了。以下文章都是自己學(xué)習(xí)Jquery 的筆記,希望能留下痕跡,也希望能幫助到您2012-05-05
jQuery實(shí)現(xiàn)簡單的滑動導(dǎo)航代碼(移動端)
這篇文章主要介紹了jQuery實(shí)現(xiàn)簡單的滑動導(dǎo)航代碼,適合用于移動端。需要的朋友可以參考下2017-05-05
修改好的jquery滾動字幕效果實(shí)現(xiàn)代碼
修改好的jquery滾動字幕效果,需要的朋友可以參考下。2011-06-06
jquery select插件異步實(shí)時搜索實(shí)例代碼
這篇文章主要介紹了jquery select插件異步實(shí)時搜索實(shí)例代碼,需要的朋友可以參考下2017-10-10
jQuery基于ajax()使用serialize()提交form數(shù)據(jù)的方法
這篇文章主要介紹了jQuery基于ajax()使用serialize()提交form數(shù)據(jù)的方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了jQuery使用ajax提交serialize序列化后的表單數(shù)據(jù)的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-12-12

