通用的框架
(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>