跟我一起学写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);

最重要的一步！

也许有些朋友觉得这样就算是完成了。但是切切相反，我们还有最重要的一步没有完成，那就是一定要在插件上方，写上插件的名称、版本号、完成日期、作者，作者的联系方式、出生日期、三围……等等。因为只有这样才能显的这个插件够专业。

/*

　*　tableUI　0.1

　*　Copyright　(c)　2009　JustinYoung　http://justinyoung.cnblogs.com/

　*　Date:　2010-03-30

　*　使用tableUI可以方便地将表格提示使用体验。先提供的功能有奇偶行颜色交替，鼠标移上高亮显示

　*/

(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);

ok！来看看一个完整的实例吧！

没图没真相，没代码没真相。所以贴图和完整实例是必须的。

查看原图（大图）

本文示例源代码或素材下载