基于bootstrap3和jquery的分页插件

 更新时间:2015年07月31日 14:48:02   投稿:hebedich  
这篇文章主要介绍了基于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){
  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能够有所帮助。

相关文章

  • jQuery中attr()与prop()函数用法实例详解(附用法区别)

    jQuery中attr()与prop()函数用法实例详解(附用法区别)

    这篇文章主要介绍了jQuery中attr()与prop()函数用法,结合实例形式详细分析了attr()与prop()函数的使用技巧与相关注意事项,并附带了attr()与prop()函数用法的区别,需要的朋友可以参考下
    2015-12-12
  • jQuery Validate让普通按钮触发表单验证的方法

    jQuery Validate让普通按钮触发表单验证的方法

    一般的表单校验都是直接注册在页面上的匿名函数,导致只能通过固定的提交方式触发表单校验,如果想自定义一个按钮触发表单校验如何实现呢,下面通过本文给大家详细介绍
    2016-12-12
  • 一个支付页面DEMO附截图

    一个支付页面DEMO附截图

    这是一个支付页面DEMO,有截图,非常逼真,感兴趣的朋友可以参考下
    2014-07-07
  • JQuery弹出层示例可自定义

    JQuery弹出层示例可自定义

    JQuery实现的弹出层,js和css可根据自己的实际情况而定,下面是具体的实现代码,大家不妨参考下
    2014-05-05
  • Easyui 去除jquery-easui tab页div自带滚动条的方法

    Easyui 去除jquery-easui tab页div自带滚动条的方法

    这篇文章主要介绍了Easyui 去除jquery-easui tab页div自带滚动条的方法,非常不错,具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2019-05-05
  • jquery实现未经美化的简洁TAB菜单效果

    jquery实现未经美化的简洁TAB菜单效果

    这篇文章主要介绍了jquery实现未经美化的简洁TAB菜单效果,涉及jquery鼠标click事件实现页面元素样式动态变换的功能,需要的朋友可以参考下
    2015-08-08
  • javascript制作2048游戏

    javascript制作2048游戏

    这几天玩儿着2048这个游戏,突然心血来潮想练习下写程序的思路,于是乎就模仿做了一个,到目前位置还没有实现动态移动,不是很好看,不过玩儿着自己模仿的小游戏还是蛮爽的,哈哈
    2015-03-03
  • 理解jQuery stop()方法

    理解jQuery stop()方法

    本文目的:为了了解stop()的用法,举个例子,直观的方式看看。非常的简单实用,有需要的小伙伴参考下
    2014-11-11
  • jQuery回调函数的定义及用法实例

    jQuery回调函数的定义及用法实例

    这篇文章主要介绍了jQuery回调函数的定义及用法,以实例形式详细分析了回调函数的原理与实现技巧,具有一定的参考借鉴价值,需要的朋友可以参考下
    2014-12-12
  • 利用jQuery实现打字机字幕效果实例代码

    利用jQuery实现打字机字幕效果实例代码

    这篇文章给大家介绍了如何利用jQuery来实现打字机字幕效果,文章介绍了实现原理和代码,实现以后的效果还是不错,有需要的可以参考借鉴。
    2016-09-09

最新评论