通用的框架
(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();
$(function(){
$(".myTab").tableUI();
或者
/*
$(".myTab").tableUI({
evenRowClass:自定义的样式,//可以不赋值,不赋值则使用默认的样式,其他属性也一样
});
*/
});
</script>
});
</script>