首页 >

基于bootstrap3和jquery的分页插件【jquery】

web前端|js教程基于bootstrap3和jquery的分页插件【jquery】
bootstrap3,jquery,分页插件
web前端-js教程
自己写的一款基于bootstrap3和jquery的分页插件,初学jquery插件写法,写的很一般。拿出来献丑了。
顺丰官网源码,ubuntu没有分配空间,tomcat命令启动项目,爬虫面试经验,php对接api服务,seo顾问和seo专员lzw
/*** 基于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.nowoptions.max?options.max:options.now;   var mainbox=$(this).html("");   var page_box= $("").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=$(""+options.first+"").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=$(""+options.last+"");   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=$(""+options.now+"").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) $(""+i+"").on("click",function(){if(typeof fn === "function")fn($(this).text());}).appendTo(page_box);  else page_now.appendTo(page_box); }, $.mypageInsertOther=function(page_box){  $("…").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能够有所帮助。
原版乐彩源码分享,vscode串口乱码,ubuntu本地设备,tomcat中role,sqlite提交事务,香港1g带宽服务器,js文本比较插件,前端框架工作流,西安卖爬虫,php培训学习班,一个seo优化员工资多少,设计公司网站html源码,html网页插入视频代码,产品推介模板,jsp中页面左侧下拉菜单,文档管理系统源程序,微信端淘宝客程序破解版lzw

基于bootstrap3和jquery的分页插件【jquery】
  • 一款Jquery 分页插件的改造方法(服务器端分页)【jquery】
  • 一款Jquery 分页插件的改造方法(服务器端分页)【jquery】 | 一款Jquery 分页插件的改造方法(服务器端分页)【jquery】 ...

    基于bootstrap3和jquery的分页插件【jquery】
  • bootstrap3和bootstrap4的区别
  • bootstrap3和bootstrap4的区别 | bootstrap3和bootstrap4的区别 ...

    基于bootstrap3和jquery的分页插件【jquery】
  • jquery分页插件jquery.pagination.js实现无刷新分页【jquery】
  • jquery分页插件jquery.pagination.js实现无刷新分页【jquery】 | jquery分页插件jquery.pagination.js实现无刷新分页【jquery】 ...