jQuery分页插件代码

2019独角兽企业重金招聘Python工程师标准>>>

后台将查询出来的内容全部显示到页面上，这个插件要控制这些内容，使其一页一页显示。有上一页，下一页，首页，尾页的功能。在第一页时，上一页，首页要隐藏。在最后一页时，尾页，下一页要隐藏。一次只显示几个按钮，当点击当次最后一个按钮时，显示后面几个。

 接下来简单说一下编码过程：

首先可以大胆的先写下以下的代码：

// 为了更好的兼容性，开始前有个分号
;(
function($){ // 此处将$作为匿名函数的形参
}
)(jQuery) // 将jQuery作为实参传递给匿名函数

这段代码大家应该不陌生，就是javascript的神级特性---闭包。这也是jQuery插件的常见结构。为什么要使用闭包来作这jQuery的常用结构呢，一来既可以避免内部临时变量影响全局空间，又可以在插件内部继续使用$作为jQuery的别名。

接下来就是在这个结构里面写自己的方法了，jQuery提供了两种方式可以在jQuery里面扩展方法。打开jQuery API，找到插件机制，可以看到两个方法

•  jQuery.extend(object)  扩展jQuery对象本身。用来在jQuery命名空间上增加新函数。
•  jQuery.fn.extend(object)  扩展 jQuery 元素集来提供新的方法（通常用来制作插件）。

从上面可以看到jQuery.extend(object)是扩展jQuery本身，要是参照java或者C#这些语言的角度来讲，就相当于向jQuery中添加静态方法。比如说我们这样写：

jQuery.extend({
   " max ":function(){
      return max;
   } 

}) 

这样，就相当于在jQuery对象里面添加了一个max方法，调用的时候可以进行这样调用：jQuery.max()

那么，jQuery.fn是什么呢，打开jQuery源码，可以看到 jQuery.fn = jQuery.prototype。那么jQuery.fn.extend相当于在jQuery中添加成员函数。

这样子应该明白两者之间的区别了吧，静态方法可以直接调用,jQuery.max()。成员函数只有jQuery实例可以调用，比如jQuery("#my").max()。

这里我采用jQuery.extend方法。代码如下：

;(
     function($){
        $.extend({
           "easypage": function(options){
            options = $.extend({ // 参数设置
            contentclass:"contentlist", // 要显示的内容的class
            navigateid:"navigatediv", // 导航按钮所在的容器的id
            everycount:"5", // 每页显示多少个
            navigatecount:"5" // 导航按钮一次显示多少个
            }, options); 

}); 

easypage就是使用分页插件使用的方法名胸围，contentclass,navigateid,everycount,navigatecount是参数。

基本框架已经搭好了，接下来就是完成功能。 

首先是要找到要分页的内容，并生成导航按钮。代码如下：

var currentpage = 0; // 当前页    
var contents = $("."+options.contentclass); // 要显示的内容
var contentcount = contents.length; // 得到内容的个数
var pagecount = Math.ceil(contentcount/options.everycount);//计算出页数
// 拼接导航按钮
var navigatehtml = "< div id='pagefirst' class='pagefirst'><a href='javascript:void(0)'& gt;首页</a></div><div id='pagepre' class='pagepre'>< a href='javascript:void(0)'>上一页</a></div>";
for( var i = 1;i <= pagecount;i++){
   navigatehtml+='<div class="pagenavigate"><a href="javascript:void(0)">'+i+'</a></div>';
}
navigatehtml+="<div id='pagenext' class='pagenext'>< a href='javascript:void(0)'>下一页</a></div>< div id='pagelast' class='pagelast'><a href='javascript:void(0)'& gt;尾页</a></div>";
  // 加载导航按钮

$("#"+options.navigateid).html(navigatehtml)  

这段代码比较简单，就不多讲。

接下来就是就是实现一些基本的功能，这里抽取其中两个显示

//隐藏所有的导航按钮

$.extend({

"hidenavigates":function(){

//遍历所有的导航按钮

navigates.each(function(){

$(this).hide();

})

}

});

//显示导航按钮

$.extend({

"shownavigate":function(currentnavigate){

$.hidenavigates();

//当前按钮如果小于要求一次显示按钮个数的，从0开始显示

var begin = currentnavigate>=options.navigatecount?currentnavigate-parseInt(options.navigatecount):0;

//这里保证从第二页开始，按钮的个数都是2*options.navigatecount

if(begin>navigates.length-2*options.navigatecount){

begin = navigates.length-2*options.navigatecount;

}

//开始显示

for(var i = begin;i < currentnavigate+parseInt(options.navigatecount);i++){

$(navigates[i]).show();

}

}

});

 好了，基本的代码流程就是这样了，程序的源代码在附件中，具体的功能实现在源代码注释中已经解释的挺清楚了。对于闭包还有疑问的，可以查看我上一篇博客

转载于:https://my.oschina.net/linuxred/blog/38856