jQuery插件开发

通用的框架

 

(function($){ 
$.fn.yourName = function(options){ 
//各种属性、参数 
} 
var options = $.extend(defaults, options); 
this.each(function(){ 
//插件实现代码 
}); 
}; 
})(jQuery); 

各种属性、参数实现，定义插件函数名称tableUI

 

(function($){ 
$.fn.tableUI = function(options){ 
var defaults = { 
evenRowClass:"evenRow", 
oddRowClass:"oddRow", 
activeRowClass:"activeRow" 
} 
var options = $.extend(defaults, options); //合并多个对象为一个
this.each(function(){ 
//实现代码 
}); 
}; 
})(jQuery); 

 

实现代码

 

(function($){ 
$.fn.tableUI = function(options){ 
var defaults = { 
evenRowClass:"evenRow", 
oddRowClass:"oddRow", 
activeRowClass:"activeRow" 
} 
var options = $.extend(defaults, options); 
this.each(function(){ 
var thisTable=$(this); 
//添加奇偶行颜色 
$(thisTable).find("tr:even").addClass(options.evenRowClass); 
$(thisTable).find("tr:odd").addClass(options.oddRowClass); 
//添加活动行颜色 
$(thisTable).find("tr").bind("mouseover",function(){ 
$(this).addClass(options.activeRowClass); 
}); 
$(thisTable).find("tr").bind("mouseout",function(){ 
$(this).removeClass(options.activeRowClass); 
}); 
}); 
}; 
})(jQuery); 

假设页面上存在一个或多个类名含myTab的表格，则可以使用如下方式调用，所有表格都将具有这样的效果：

<script type="text/javascript">
$(function(){
$(".myTab").tableUI();

或者

/*

$(".myTab").tableUI({

evenRowClass:自定义的样式,//可以不赋值，不赋值则使用默认的样式，其他属性也一样

});

*/
});
</script>