编写自己的jquery组件

以一个翻页组件为例。

前提，网上针对jquery ajax方式获取数据的翻页组件很多，有一个应用未使用ajax，而是直接通过jsp模板渲染数据，没有找到合适的组件。那么就自己手写一个简单的组件吧。

先来看一下他长什么样子？

jquery组件的模板

//pagination 为自定义的组件名称$.fn.pagination=function(options){  var defaults = {    //默认的属性  };  //这里处理一下，把传入的参数options和defaults合并。  var settings = $.extend(defaults, options);  //合并以后，下面所有的逻辑需要使用参数的时候，都是用settings}

使用时，可以使用任意的jquery对象执行pagination方法。

$("#div1").pagination();

如需传入参数，传入一个json对象即可。

$("#div1").pagination({"attr1": "value1"});

开始制作自己的组件

设计属性

先些必须的属性，如果又需要的再增加。

var defaults = {    'currentPage': 1,    'totalPage': 5,    'url':""   };

在这里，currentPage仅用于判断如果是当前页，当前按钮做一个效果与其他区分。
totalPage 是总页数，简单起见本例不管总页数多少都直接显示出来，如果有几十甚至上百页就比较麻烦，后期可以改为折叠，只显示部分。
url，用于在使用组件时动态传入url。

初始化组件

this.append('<span class="pagination" value="1">首页</span>');//循环 totalPage次，添加页码for(var i=1;i<=settings.totalPage;i++){  if(settings.currentPage==i){    //如果添加的是当前页的页码，文本颜色变化一下以示区别    this.append('<span class="pagination" value="'+i+'" style="color:#2986db">'+i+'</span>');  }else{     this.append('<span class="pagination" value="'+i+'">'+i+'</span>');  }}this.append('<span class="pagination" value="'+settings.totalPage+'”">末页</span>');

修改样式

目前没有加样式，按钮是这个样子的：

加上样式：

//注册样式var buttoncss={  'padding':' 2px 8px',  'margin': '2px',  'cursor': 'pointer',  'border': 'solid 1px #e3e3e3',  'border-radius':'4px'};this.find(".pagination").css(buttoncss);

效果就出来了，可以根据喜好修改样式。

在这里加样式，是不想再多引入一个css文件。实际上引用外部css这个组件的js代码会更简单。

设置事件

现在样子出来了，点了也没反应。需要绑定事件。

//注册事件this.find(".pagination") .on("click",function(e){    window.location.href=settings.url+'?pageSize=10&currentPage=' + $(e.target).attr("value");  })  .on("mouseenter",function(){    $(this).css("background-color","#e2ecff");  })  .on("mouseleave",function(){    $(this).css("background-color","white");});

第一个事件最重要，用于控制跳转；2、3事件不是必须的，只是做了一个效果，鼠标进去背景高亮一下，离开恢复。

2、3事件，如果用外部css，可以更简单：

.pagination:hover {background-color:#e2ecff;}

结束组件

最后，如果在组件构建以后还想修改它，那么可以在最后返回自己。

return this;

测试

<div id="pagination"/><script type="text/javascript">  $(function(){    var o=$("#pagination").pagination({"url":"./other.jsp"});  });</script>

完整的代码

$.fn.pagination=function(options){  var defaults = {    'currentPage': 1,    'totalPage': 5,    'pageSize': 10,    'url':""   };   var settings = $.extend(defaults, options);   this.append('<span class="pagination" value="1">首页</span>');   for(var i=1;i<=settings.totalPage;i++){     if(settings.currentPage==i){       this.append('<span class="pagination" value="'+i+'" style="color:#2986db">'+i+'</span>');     }else{        this.append('<span class="pagination" value="'+i+'">'+i+'</span>');     }   }   this.append('<span class="pagination" value="'+settings.totalPage+'”">末页</span>');   //注册样式   var buttoncss={     'padding':' 2px 8px',     'margin': '2px',     'cursor': 'pointer',     'border': 'solid 1px #e3e3e3',     'border-radius':'4px'   };   this.find(".pagination").css(buttoncss);   //注册事件   this.find(".pagination")    .on("click",function(e){       window.location.href=settings.url+'?pageSize=10&currentPage=' + $(e.target).attr("value");     })     .on("mouseenter",function(){       $(this).css("background-color","#e2ecff");     })     .on("mouseleave",function(){       $(this).css("background-color","white");   });   return this;};

小结

这里只是一个helloworld，功能并不完善，如果做一个完整的组件，需要考虑的东西还很多。