怎么用jq封装插件
怎么用jq封装插件
以隔行变色为例
实现原理：1.找到表格的奇偶行，然后添加不同的class，激活行高亮显示也很简单，只要判断mouseover事件，然后添加一个class，mouseout的时候，再移除
class就行；
2.不用class，直接改变background属性；
直接开干，这里用第二种方法。
第一步： 模板
jq有一个基本框架，直接搬过来呗
(function($){
$.fn.yourName = function(options){
//各种属性、参数
}
var options = $.extend(defaults, options);
return this.each(function(){
//插件实现代码
});
};
})(jQuery);
第二步： 套东西进去
1.命名
2.有哪些参数、属性，这里就是要结合功能来考虑了
evenColor (偶数行颜色) oddColor（奇数行颜色） activeColor（激活行颜色） changeFlag（是否开启隔行变色）oldColor （保存原来的颜色)；
(function ($) {
$.fn.tableUI = function ( options ) {
var defaults = {
evenColor: '#dddddd', //偶数行颜色
oddColor: '#ffffff', //奇数行颜色
activeColor: '#09f', //激活行颜色
changeFlag: true, //是否开启隔行变色
oldColor: '' //保存原来颜色
}
var options = $.extend( defaults, options );
return this.each(function () {
//功能代码
})
}
})(jQuery);
此处重点：
var options = $.extend( defaults, options );
合并多个对象为一个，就是如果你在调用的时候写了新的参数，就用你新的参数，如果没有写，就用默认的参数。
现在就是完善功能代码
(function ($) {
$.fn.tableUI = function ( options ) {
var defaults = {
evenColor: '#dddddd', //偶数行颜色
oddColor: '#ffffff', //奇数行颜色
activeColor: '#09f', //激活行颜色
changeFlag: true, //是否开启隔行变色
oldColor: ''
}
var options = $.extend( defaults, options );
return this.each(function () {
var thisTable = $(this);
if ( options.changeFlag ) {
//奇偶行颜色
$(thisTable).find('tr:even').css( 'background', options.evenColor );
$(thisTable).find('tr:odd').css( 'background', options.oddColor );
//激活行颜色
$(thisTable).find('tr').bind('mouseover', function () {
//保存原来的颜色，以便于移出时恢复
options.oldColor = $(this).css('background');
$(this).css( 'background', options.activeColor );
});
$(thisTable).find('tr').bind('mouseout', function () {
$(this).css( 'background', options.oldColor );
})
}
})
}
})(jQuery);
到这里，就基本完成了，最后在插件上方，写上插件的名称、版本号、完成日期、作者，作者的联系方式……等等，因为只有这样才能显的这个插件够专业。
/*
* tableUI 0.1
* Copyright (c) 梦幻飞雪 http://www.cnblogs.com/wangyihong/
* Date: 2017-06-28
* 使用tableUI可以方便地将表格提示使用体验。先提供的功能有奇偶行颜色交替，鼠标移上高亮显示
*/
(function ($) {
$.fn.tableUI = function ( options ) {
var defaults = {
evenColor: '#dddddd', //偶数行颜色
oddColor: '#ffffff', //奇数行颜色
activeColor: '#09f', //激活行颜色
changeFlag: true, //是否开启隔行变色
oldColor: ''
}
var options = $.extend( defaults, options );
return this.each(function () {
var thisTable = $(this);
if ( options.changeFlag ) {
//奇偶行颜色
$(thisTable).find('tr:even').css( 'background', options.evenColor );
$(thisTable).find('tr:odd').css( 'background', options.oddColor );
//激活行颜色
$(thisTable).find('tr').bind('mouseover', function () {
//保存原来的颜色，以便于移出时恢复
options.oldColor = $(this).css('background');
$(this).css( 'background', options.activeColor );
});
$(thisTable).find('tr').bind('mouseout', function () {
$(this).css( 'background', options.oldColor );
})
}
})
}
})(jQuery);
ok，大功告成，就差验证使用了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src='./js/jquery.min.js'></script>
<script src='./js/tableUI.js'></script>
<style>
*{
padding: ;
margin: ;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
#table {
width: 800px;
margin: 50px auto;
display: block;
border-collapse:collapse;
}
#table tr {
height: 50px;
font-size: 20px;
}
#table tr td, #table tr th {
border: 1px solid #;
width: 200px;
text-align: center;
}
</style>
</head>
<body>
<table id='table' >
<tr>
<th>姓名</th>
<th>年龄</th>
<th>专业</th>
<th>班级</th>
</tr>
<tr>
<td>张三</td>
<td></td>
<td>计算机</td>
<td></td>
</tr>
<tr>
<td>张三</td>
<td></td>
<td>计算机</td>
<td></td>
</tr>
<tr>
<td>张三</td>
<td></td>
<td>计算机</td>
<td></td>
</tr>
<tr>
<td>张三</td>
<td></td>
<td>计算机</td>
<td></td>
</tr>
<tr>
<td>张三</td>
<td></td>
<td>计算机</td>
<td></td>
</tr>
<tr>
<td>张三</td>
<td></td>
<td>计算机</td>
<td></td>
</tr>
<tr>
<td>张三</td>
<td></td>
<td>计算机</td>
<td></td>
</tr>
</table>
//插件使用
<script>
$("#table").tableUI(); //默认的属性参数
</script>
</body>
</html>
设置新的属性参数
<script>
$("#table").tableUI(
options = {
evenColor: 'blue', //偶数行颜色
oddColor: 'green', //奇数行颜色
activeColor: 'red', //激活行颜色
changeFlag: true, //是否开启隔行变色
});
</script> //此处options = 也可以不写
怎么用jq封装插件的更多相关文章
- jq封装插件
$.extend()拓展方法: $(function(){ $.extend({ money:function(){ alert("我要努力赚钱") }, money:functi ...
- jq封装插件，简单dome
(function($) { $.fn.extend({ bold: function() { this.css({ fontWeight: "bold", color: 'red ...
- jQuery框架-3.jQuery自定义封装插件和第三方插件
一.jQuery的封装扩展 1.jQuery中extend方法使用 (挂在到jQuery和jQuery.fn两对象身上的使用) 1.1.官方文档定义: jQuery.extend Merge th ...
- jq分页插件
jq分页插件 http://www.zhangxinxu.com/jq/pagination_zh/ html --------------- <tbody id="hiddenres ...
- vue封装插件并发布到npm上
vue封装插件并发布到npm上 项目初始化 首先,要创建项目,封装vue的插件用webpack-simple很合适,vue init webpack-simple 项目名称此命令创建我们的项目的目录, ...
- ***使用jQuery去封装插件（组件化、模块化的思想），即扩展方法
如何使用jQuery去封装插件,区分扩展全局方法与扩展一个普通的jQuery实例对象的方法 1.给全局对象扩展方法:①$.方法 = function(参数可加可不加){} ②使用:$.方法(有参数的 ...
- jq封装选项卡写法
jq普通选项卡写法: var tabTag=$('#tabon'); var tabon=tabTag.find('li');//菜单栏 var tabCon=$(".hidden" ...
- 封装插件并发布到npm的历程
1.封装插件 2.使用webpack打包的时候发生了很多问题 3.过程很反复 4.但最终还是发布成功了
- JQ封装图片预加载插件
我们知道,图片的加载,特别是资源较大的图片,加载相当耗费时间.为了提高用户体验,不得不使用图片预加载技术来提前加载,以提高用户在浏览时的流畅度. 先来弄明白图片的懒加载和预加载的不同: 1)概念:懒加 ...
随机推荐
- Centos7.3 安装Mysql5.7并修改初始密码
1.官方安装文档 http://dev.mysql.com/doc/mysql-yum-repo-quick-guide/en/ 2.下载 Mysql yum包 http://dev.mysql.co ...
- MFC入门教程01 Windows编程基础
- Spring BeanFactory源码学习
一.BeanFactory BeanFactory是Spring IOC容器的基础,是IOC容器的基础接口,所有的容器都是从它这里继承实现而来.BeanFactory提供了最基本的IOC容器的功能,即 ...
- python 之变量
什么是变量? 变量就是存储一个不固定的值,可以随时更改其值. 1.变量不仅可以是数字,还可以是任意数据类型 2.变量名必须是大小写英文.数字和_的组合,且不能用数字开头 python变量如何存储 首先 ...
- JSP Cookie的使用
Cookie 通常用于网站记录客户的某些信息,比如客户的用户名及客户的喜好等.一旦用户下次登录,网站可以获取到客户的相关信息,根据这些客户信息,网站可以对客户提供更友好的服务. Cookie sess ...
- Unicode字符集和编码方式
通常将一个标准中能够表示的所有字符的集合称为字符集,比如ISO/Unicode所定义的字符集为Unicode.在Unicode中,每个字符占据一个码位/Unicode 编号(用4位十六进制数表示,Co ...
- 发布自己第一个npm 组件包（基于Vue的文字跑马灯组件）
一.前言 总结下最近工作上在移动端实现的一个跑马灯效果,最终效果如下: 印象中好像HTML标签的'marquee'的直接可以实现这个效果,不过 HTML标准中已经废弃了'marquee'标签 既然HT ...
- js实现导航菜单栏随着屏幕的滚动进行滚动的效果
$(window).scroll(function () { var $nav = $(".floatingMenu ul li"), length = $nav.length-1 ...
- jquery实现点击进行跳转后,改点击的元素添加选中的效果
<style> .active { color: red; } </style> //html代码 <ul id="tab2"> <li& ...
- redis集群搭建实践
参考 第一个节点 第一个节点为本地的机器 IP:192.168.23.148 检查机器配置 $ uname -a Linux wangya-Lenovo-G480 4.8.0-52-generic # ...