欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于bootstrap3和jquery的分頁插件

 更新時間:2015年07月31日 14:48:02   投稿:hebedich  
這篇文章主要介紹了基于bootstrap3和jquery的分頁插件的相關資料,需要的朋友可以參考下

自己寫的一款基于bootstrap3和jquery的分頁插件,初學jquery插件寫法,寫的很一般。拿出來獻丑了。

/**
* 基于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為當前頁,max為最大頁,fn為回掉函數(shù),回掉函數(shù)有一個參數(shù)為點擊的頁碼
* 
* 2.選擇器調(diào)用法
*  $(selector).mypage({
*   now:now,
*   last:last,
*   callback:fn,
*   max:max,
*   first:first,
*   style,style
*  });
*  參數(shù)說明:now為當前頁,max為最大頁,callback為回掉函數(shù),回掉函數(shù)有一個參數(shù)為點擊的頁碼,style可選參數(shù),有"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);

以上所述就是本文的全部內(nèi)容了,希望對大家學習jQuery能夠有所幫助。

相關文章

  • jQuery中attr()與prop()函數(shù)用法實例詳解(附用法區(qū)別)

    jQuery中attr()與prop()函數(shù)用法實例詳解(附用法區(qū)別)

    這篇文章主要介紹了jQuery中attr()與prop()函數(shù)用法,結合實例形式詳細分析了attr()與prop()函數(shù)的使用技巧與相關注意事項,并附帶了attr()與prop()函數(shù)用法的區(qū)別,需要的朋友可以參考下
    2015-12-12
  • jQuery Validate讓普通按鈕觸發(fā)表單驗證的方法

    jQuery Validate讓普通按鈕觸發(fā)表單驗證的方法

    一般的表單校驗都是直接注冊在頁面上的匿名函數(shù),導致只能通過固定的提交方式觸發(fā)表單校驗,如果想自定義一個按鈕觸發(fā)表單校驗如何實現(xiàn)呢,下面通過本文給大家詳細介紹
    2016-12-12
  • 一個支付頁面DEMO附截圖

    一個支付頁面DEMO附截圖

    這是一個支付頁面DEMO,有截圖,非常逼真,感興趣的朋友可以參考下
    2014-07-07
  • JQuery彈出層示例可自定義

    JQuery彈出層示例可自定義

    JQuery實現(xiàn)的彈出層,js和css可根據(jù)自己的實際情況而定,下面是具體的實現(xiàn)代碼,大家不妨參考下
    2014-05-05
  • Easyui 去除jquery-easui tab頁div自帶滾動條的方法

    Easyui 去除jquery-easui tab頁div自帶滾動條的方法

    這篇文章主要介紹了Easyui 去除jquery-easui tab頁div自帶滾動條的方法,非常不錯,具有一定的參考借鑒價值 ,需要的朋友可以參考下
    2019-05-05
  • jquery實現(xiàn)未經(jīng)美化的簡潔TAB菜單效果

    jquery實現(xiàn)未經(jīng)美化的簡潔TAB菜單效果

    這篇文章主要介紹了jquery實現(xiàn)未經(jīng)美化的簡潔TAB菜單效果,涉及jquery鼠標click事件實現(xiàn)頁面元素樣式動態(tài)變換的功能,需要的朋友可以參考下
    2015-08-08
  • javascript制作2048游戲

    javascript制作2048游戲

    這幾天玩兒著2048這個游戲,突然心血來潮想練習下寫程序的思路,于是乎就模仿做了一個,到目前位置還沒有實現(xiàn)動態(tài)移動,不是很好看,不過玩兒著自己模仿的小游戲還是蠻爽的,哈哈
    2015-03-03
  • 理解jQuery stop()方法

    理解jQuery stop()方法

    本文目的:為了了解stop()的用法,舉個例子,直觀的方式看看。非常的簡單實用,有需要的小伙伴參考下
    2014-11-11
  • jQuery回調(diào)函數(shù)的定義及用法實例

    jQuery回調(diào)函數(shù)的定義及用法實例

    這篇文章主要介紹了jQuery回調(diào)函數(shù)的定義及用法,以實例形式詳細分析了回調(diào)函數(shù)的原理與實現(xiàn)技巧,具有一定的參考借鑒價值,需要的朋友可以參考下
    2014-12-12
  • 利用jQuery實現(xiàn)打字機字幕效果實例代碼

    利用jQuery實現(xiàn)打字機字幕效果實例代碼

    這篇文章給大家介紹了如何利用jQuery來實現(xiàn)打字機字幕效果,文章介紹了實現(xiàn)原理和代碼,實現(xiàn)以后的效果還是不錯,有需要的可以參考借鑒。
    2016-09-09

最新評論