简单的jquery插件编写：table换行颜色变化

最新推荐文章于 2022-10-14 14:31:42 发布

toFriday

最新推荐文章于 2022-10-14 14:31:42 发布

阅读量689

点赞数

分类专栏： jQuery

jQuery 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、开始编写插件：（转载）
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>

</head>

</html>

toFriday

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单的jquery插件编写：table换行颜色变化

一、开始编写插件：（转载）1、结构：（function($){})(jQuery); 或$(fn) 或$(function(){}); // 等价于$(document).ready(function){});(function($){})(jQuery);2、插件的定义：$.fn.插件名 = function(){} 函数中为插件的各种属性、参数(function
复制链接

扫一扫