编写自己的jquery组件

简介: 以一个翻页组件为例。前提,网上针对jquery ajax方式获取数据的翻页组件很多,有一个应用未使用ajax,而是直接通过jsp模板渲染数据,没有找到合适的组件。

以一个翻页组件为例。

前提,网上针对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,功能并不完善,如果做一个完整的组件,需要考虑的东西还很多。

目录
相关文章
|
JSON 前端开发 JavaScript
【前端】使用jQuery封装一套UI组件 - 级联选择器组件
本篇文章来讲解下级联选择器组件 级联选择器,在实际项目中也是比较常用的组件,比如:省市区三级关联,上下级联动等 最后面会附上全部代码
1355 0
|
JavaScript 前端开发 Java
bootsrap+jquery+组件项目引入文件的常见报错
bootsrap+jquery+组件项目引入文件的常见报错
83 0
|
设计模式 缓存 移动开发
像 jQuery 一样通过函数开发和调用小程序组件
像 jQuery 一样通过函数开发和调用小程序组件
184 0
|
JavaScript 前端开发 程序员
【前端】使用jQuery封装一套UI组件 - 是和否滑动切换组件
本篇文章来讲解下是和否的滑动切换组件 切换滑动组件,使用的场景实际上就是一个开和关的场景,一般有是和否,开和关,禁用和启用等等,只需要设置0和1即可
156 0
|
JavaScript 前端开发 程序员
【前端】使用jQuery封装一套UI组件 - 可编辑下拉框组件
下拉框也是比较常用的组件,对应原生的下拉标签就是select 本篇文章就来讲讲可编辑下拉框组件的封装过程
372 0
|
JavaScript 前端开发 程序员
【前端】使用jQuery封装一套UI组件 - 移动端时间选择组件
【首先要声明一点,技术不分好坏,能用好就行,不用鄙视老技术】 今天要给大家展示的是移动端时间选择组件 最开始,看到比较新颖的移动端时间选择组件是在某款手机上,分年月日下拉选择,UI界面也挺好看的 除了讲解实现的步骤以及关键点,文章最后面会有完整的代码
251 0
|
前端开发 JavaScript 程序员
【前端】使用jQuery封装一套UI组件 - 单选框
目前前端技术发展非常快,各大厂都开源和分享了自家的前端框架,非常多成熟的UI组件供大家选择,很实用也很方便,给开发上节省了不少时间成本,当然少不了学习成本,不过也不会占用太多时间,只要有前端基础的话,原理基本都是通用的,只是写法不一样。 因此,除了学习现有的优秀前端之外,最好能自己根据原理封装一套自己的UI组件,目的是为了更好的理解前端知识点以及锻炼编程逻辑
174 0
|
JavaScript API
编写自定义的JQuery插件的几个注意点
编写自定义的JQuery插件的几个注意点
128 0
|
前端开发 JavaScript
在 vue-cli 脚手架中引用 jQuery、bootstrap 以及使用 sass、less 编写 css [vue-cli配置入门]
写在前面: 本文是vue-手摸手教你使用vue-cli脚手架-详细步骤图文解析之后,又一篇关于vue-cli脚手架配置相关的文章,因为有些文章步骤不够清晰,当时我引入JQuery、bootstrap的时候颇费了一番功夫,所以本文的步骤会尽量详细一点。有需要的朋友可以做一下参考,喜欢的可以点波赞,或者关注一下,希望可以帮到大家。 引入bootstrap 1. 下载所需要的bootstrap文件。 将要使用的bootstrap文件放入src目录下的assets文件夹中。 2. 在入口文件src/main.js中引入bootstrap import './assets/bootstrap-3.3.7
298 0
在 vue-cli 脚手架中引用 jQuery、bootstrap 以及使用 sass、less 编写 css [vue-cli配置入门]
|
存储 缓存 JavaScript
编写高性能的jQuery代码
编写高性能的jQuery代码