专栏首页云架构修炼手册编写自己的jquery组件

编写自己的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.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;
};

小结

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Maven 项目中依赖的搜索顺序

    网上有很多关于maven项目中mirror、profile、repository的搜索顺序的文章,说法不一。官方文档并没有找到相关的说明,鉴于此,我抽时间做了一...

    pollyduan
  • Eclipse配置JNDI连接池

    之前用Eclipse JEE开发web工程,按照网上的一些说法,配置,发现很麻烦。而且每次project重新remove再加载,配置就丢失了。

    pollyduan
  • vagrant provision 典型应用场景

    将如下配置添加到Vagrantfile的"config.vm.synced_folder" 下面即可。

    pollyduan
  • asp.net core 系列之中间件进阶篇-编写自定义中间件(middleware)

    中间件是被用到管道(pipeline)上来处理请求(request)和响应的(response)。

    Vincent-yuan
  • lncRNA实战项目-第五步-差异表达的mRNA和lncRNA

    上一步骤得到了表达矩阵,两个样本分别是F_1yr.OC和M_1yr.OC, 所以接下来的差异分析就是比较1岁猕猴脑OC区域女性和男性的差别,差异分析的分析方法很...

    生信技能树
  • IEEE专访李开复:人类已打开潘多拉盒子,封堵AI变革只会徒劳

    在荣登多个排行榜后,IEEE旗下《IEEE Spectrum》,对李开复进行了专访,谈到了众多当前AI领域最受关注的话题。

    量子位
  • 盘点互联网大厂AI战略变迁,开发者将怎样pick前进路线?

    随着各大企业相继试水“全面 AI”,人工智能在技术落地层面也开始持续深入,泛人工智能时代正在逼近。越来越多的发展趋势表明,未来的人工智能将逐步迈入广泛普及阶段,...

    AI科技大本营
  • 霍金李开复张亚勤等纵论AI:关于创造和毁灭、创业和机遇的碰撞

    问耕 发自 凹非寺 量子位 报道 | 公众号 QbitAI ? 霍金、李开复、张亚勤等一众人工智能产学研领域的旗帜性人物,聚在一起会碰撞出怎样的火花?今天有了一...

    量子位
  • JVM面试问题系列:判断对象是否已死和四种垃圾回收算法总结

    判断对象是否已死就是找出哪些对象是已经死掉的,以后不会再用到的,就像地上有废纸、饮料瓶和百元大钞,扫地前要先判断出地上废纸和饮料瓶是垃圾,百元大钞不是垃圾。判断...

    zhisheng
  • XSS跨站脚本攻击的原理分析与解剖

    《xss攻击手法》一开始在互联网上资料并不多(都是现成的代码,没有从基础的开始),直到刺的《白帽子讲WEB安全》和cn4rry的《XSS跨站脚本攻击剖析与防...

    奶糖味的代言

扫码关注云+社区

领取腾讯云代金券