编写自己的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¤tPage=' + $(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¤tPage=' + $(e.target).attr("value");
})
.on("mouseenter",function(){
$(this).css("background-color","#e2ecff");
})
.on("mouseleave",function(){
$(this).css("background-color","white");
});
return this;
};

小结

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