简单的jquery插件编写：table换行颜色变化
2014-04-18 16:06
441 查看
一、开始编写插件：（转载）
1、结构：（function($){})(jQuery); 或$(fn) 或$(function(){}); // 等价于$(document).ready(function){});
(function($){
})(jQuery);
2、插件的定义：$.fn.插件名 = function(){} 函数中为插件的各种属性、参数
(function($){
$.fn.插件名 = function(){
};
})(jQuery);
3、在函数中邪插件的各种属性、参数
(function($){
$.fn.tableUI = function(options){
var defaults = {
evenRowClass :"evenRow";
oddRowClass:"oddRow";
activeRowClass:"activeRow";
}
};
})(jQuery);
4、定义好函数的属性和对应的值以后，合并插件名的调用即扩展jquery功能：var options = $.extend(defaults,options);
var options = $.extend(defaults,options); // 合并多个参数options到defaults中为一个参数。返回值为合并后的defaults
扩展已经有的objiect的对象：var newSrc = $.extend(dest,src1,src2,src3...)将后面几个合到dest中，返回值为合并后的dest。
(function($){
$.fn.tableUI = function(options){
var defaults = {
evenRowClass :"evenRow";
oddRowClass:"oddRow";
activeRowClass:"activeRow";
}
var options = $.extend(defaults,options);
};
})(jQuery);
5、实现插件的功能代码
this.each(function){
// 实现代码
// this，使用这个插件的对象。此处应该为table对象。
var thisTab = $(this) // this是html dom对象，$(this)是jquery对象。
// $(thisTab)? 不是thisTab??
$(thisTab).find("tr:even").addClass(options.evenRowClass); // options.evenRowClass：options是扩展后的jquery插件对象。evenRowClass是调用它的属性。
$(thisTab).find("tr:odd").addClass(options.oddRowClass);
$(thisTab).find("tr").on("mouseover",function(){
$(thisTab).addClass(options.activeRowClass)
});
$(thisTab).find("tr").on("mouseout",function(){
$(thisTab).removeClass(options.activeRowClass)
});
6、调用插件
$(function(){
$("#tableID").tableUI();
})(jQuery);
总结：
(function($){
$.fn.yourName = function(options){
//各种属性、参数
}
var options = $.extend(defaults, options);
this.each(function(){
//插件实现代码
});
};
})(jQuery);
完整代码测试：
<html>
<head>
<title>table 不同行颜色变化 </title>
<style type="text/css">
.active{background-color:#fff;}
.even{background-color:#EBEBEB;}
.odd{background-color:#5dbafd;}
tr td{border: 1px solid #000;height:32px;line-height:32px;text-align:center;}
</style>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script type="text/javascript">
(function($){
$.fn.tableUI = function(options){
var defaults = {
evenRowClass:"even",
oddRowClass:"odd",
eRowClass:"even",
oClass:"odd"
}
var options = $.extend(defaults, options);
this.each(function(){
var thisTab=$(this); // $(thisTab)与thisTab？？
$(thisTab).find("tr:even").addClass(options.evenRowClass);
$(thisTab).find("tr:odd").addClass(options.oddRowClass);
$(thisTab).find("tr").on("mouseover",function(){
$(this).addClass(options.oClass);
});
$(thisTab).find("tr").on("mouseout",function(){
$(this).removeClass(options.oClass);
});
});
};
})(jQuery);
</script>
<script type="text/javascript">
$().ready(function(){ //不可以用$(function($){})等简写方式？
$("#tableID").tableUI();
})
//})(jQuery);
</script>
</head>
<body>
<table width="100%" id="tableID">
<tr><td>标题</td><td>01</td></tr>
<tr><td>结构</td><td>01</td></tr>
<tr><td>样式</td><td>01</td></tr>
<tr><td>题目</td><td>01</td></tr>
<tr><td>总结</td><td>01</td></tr>
</table></body>
</html>
1、结构：（function($){})(jQuery); 或$(fn) 或$(function(){}); // 等价于$(document).ready(function){});
(function($){
})(jQuery);
2、插件的定义：$.fn.插件名 = function(){} 函数中为插件的各种属性、参数
(function($){
$.fn.插件名 = function(){
};
})(jQuery);
3、在函数中邪插件的各种属性、参数
(function($){
$.fn.tableUI = function(options){
var defaults = {
evenRowClass :"evenRow";
oddRowClass:"oddRow";
activeRowClass:"activeRow";
}
};
})(jQuery);
4、定义好函数的属性和对应的值以后，合并插件名的调用即扩展jquery功能：var options = $.extend(defaults,options);
var options = $.extend(defaults,options); // 合并多个参数options到defaults中为一个参数。返回值为合并后的defaults
扩展已经有的objiect的对象：var newSrc = $.extend(dest,src1,src2,src3...)将后面几个合到dest中，返回值为合并后的dest。
(function($){
$.fn.tableUI = function(options){
var defaults = {
evenRowClass :"evenRow";
oddRowClass:"oddRow";
activeRowClass:"activeRow";
}
var options = $.extend(defaults,options);
};
})(jQuery);
5、实现插件的功能代码
this.each(function){
// 实现代码
// this，使用这个插件的对象。此处应该为table对象。
var thisTab = $(this) // this是html dom对象，$(this)是jquery对象。
// $(thisTab)? 不是thisTab??
$(thisTab).find("tr:even").addClass(options.evenRowClass); // options.evenRowClass：options是扩展后的jquery插件对象。evenRowClass是调用它的属性。
$(thisTab).find("tr:odd").addClass(options.oddRowClass);
$(thisTab).find("tr").on("mouseover",function(){
$(thisTab).addClass(options.activeRowClass)
});
$(thisTab).find("tr").on("mouseout",function(){
$(thisTab).removeClass(options.activeRowClass)
});
6、调用插件
$(function(){
$("#tableID").tableUI();
})(jQuery);
总结：
(function($){
$.fn.yourName = function(options){
//各种属性、参数
}
var options = $.extend(defaults, options);
this.each(function(){
//插件实现代码
});
};
})(jQuery);
完整代码测试：
<html>
<head>
<title>table 不同行颜色变化 </title>
<style type="text/css">
.active{background-color:#fff;}
.even{background-color:#EBEBEB;}
.odd{background-color:#5dbafd;}
tr td{border: 1px solid #000;height:32px;line-height:32px;text-align:center;}
</style>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script type="text/javascript">
(function($){
$.fn.tableUI = function(options){
var defaults = {
evenRowClass:"even",
oddRowClass:"odd",
eRowClass:"even",
oClass:"odd"
}
var options = $.extend(defaults, options);
this.each(function(){
var thisTab=$(this); // $(thisTab)与thisTab？？
$(thisTab).find("tr:even").addClass(options.evenRowClass);
$(thisTab).find("tr:odd").addClass(options.oddRowClass);
$(thisTab).find("tr").on("mouseover",function(){
$(this).addClass(options.oClass);
});
$(thisTab).find("tr").on("mouseout",function(){
$(this).removeClass(options.oClass);
});
});
};
})(jQuery);
</script>
<script type="text/javascript">
$().ready(function(){ //不可以用$(function($){})等简写方式？
$("#tableID").tableUI();
})
//})(jQuery);
</script>
</head>
<body>
<table width="100%" id="tableID">
<tr><td>标题</td><td>01</td></tr>
<tr><td>结构</td><td>01</td></tr>
<tr><td>样式</td><td>01</td></tr>
<tr><td>题目</td><td>01</td></tr>
<tr><td>总结</td><td>01</td></tr>
</table></body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 简单的Jquery 插件编写
- 编写自己的jQuery插件简单实现代码
- 编写jQuery插件---简单总结
- jQuery插件如何编写05_ 简单的全选反选插件（完整版）
- jQuery插件如何编写03_ 简单的全选反选插件
- （原创）简单 jQuery 插件让 Table 中的 Tr 实现光棒效果
- jQuery插件如何编写02_ 简单的全选插件
- jquery 插件简单编写
- 编写简单的jQuery提示插件
- jQuery编写设置和获取颜色的插件
- 利用jQuery编写一个简单的插件
- 编写一个简单的Jquery插件
- 编写自己的jQuery插件简单实现代码
- 编写一个简单的jQuery插件
- Table之CSS控制Table内外边框,颜色,大小,样式变化更简单
- 一个简单的jQuery插件的写法 tableUI
- 编写一个简单的 jQuery 插件（模板）
- jQuery插件如何编写04_ 简单的全选反选插件（关联了主复选框和子复选框，代码简单）
- 简单实现编写自己的jQuery插件
- jquery插件方式实现table查询功能的简单实例