jquery 插件开发

先写一个美化表格的例子，让表格的奇偶行颜色不同，然后鼠标移到某行上，某行可以高亮显示。

一个通用的框架
在动手写自己的jQuery插件之前，自然是先研究一下别人写的插件了。其实写jQuery也基本有一个通用的框架。

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

有了这个，咱就可以往里面套东西了。
名号、参数和属性
随便名号就叫做“tableUI”了！
参数和属性也很简单，就叫做：evenRowClass、oddRowClass和activeRowClass吧。

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

这里重点说一下这一句：

var options = $.extend(defaults, options);

这里就是，如果你在调用的时候写了新的参数，就用你新的参数，如果没有写，就用默认的参数。

 

找到基数行和偶数行（感谢jQuery提供了类似tr:even这种写法，使其及其简单），然后添加上相应的class。然后再给所有的tr，绑定mouseover和mouseout事件即可

(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) 2011 guojian * Date: 2011-05-31 * 使用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);

 

 

以下是网上大家推荐在开发jQuery插件时，要考虑的相关因素

1.在JQuery命名空间内声明一个特定的命名；
2.接收参数来控制插件的行为；
3.提供公有方法访问插件的配置项值；
4.提供公有方法来访问插件中其他的方法（如果可能的话）；
5.保证私有方法是私有的；
6.支持元数据插件