编写自己的jquery组件

pollyduan

发布于 2019-11-04 13:28:42

7700

发布于 2019-11-04 13:28:42

文章被收录于专栏：云架构修炼手册云架构修炼手册

以一个翻页组件为例。

前提，网上针对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.kk=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.kk=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;
};