Jquery 插件学习实例1-插件制作说明与tableUI优化

一.   先对jQuery制作方式，jQuery为开发扩展提拱了两个方法，分别是：

     jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。

jQuery.fn.extend(object);给jQuery对象添加方法。

1.1、jQuery.fn.extend(object):

可以参靠jquery参考手册的连个例子：

$.fn.extend({

      check: function() {

             return this.each(function() { this.checked = true; });

      },

      uncheck: function() {

             return this.each(function() { this.checked = false; });

      }

});

使用：

$("input[type=checkbox]").check();

$("input[type=radio]").uncheck();

1.2、jQueryjQuery.extend(object)

扩展jQuery对象本身。用来在jQuery命名空间上增加新函数。

jQuery 代码:

$.extend({

      min: function(a, b) { return a < b ? a : b; },

      max: function(a, b) { return a > b ? a : b; }

});

使用：

$.min(2,3); // => 2

$.max(4,5); // => 5

二、tableUI具体的插件示例代码如下：

 /*
* tableUI 0.2
* 就不写版权了吧，呵呵
* Date: 4/1/2010
* 使用tableUI可以方便地将表格提示使用体验。先提供的功能有奇偶行颜色交替，鼠标移上高亮显示
* 0.2版结合25个小贴士对“政委”的那个做了些优化，学习之用，还请指正。

*来源：http://www.cnblogs.com/windy2008/archive/2010/04/01/1702126.html
*/
(function($) {
    $.fn.tableUI = function(options) {
        //默认参数
        var defaults = {
            evenRowClass: "evenRow",
            oddRowClass: "oddRow",
            activeRowClass: "activeRow"
        };
        //用传入参数覆盖了默认值
        options = $.extend(defaults, options);
        //表对象
        var thisTable = $(this);
        //添加奇偶行颜色
        thisTable.find("tr:even").addClass(options.evenRowClass);
        thisTable.find("tr:odd").addClass(options.oddRowClass);
        //绑定鼠标移动事件，不必对每行都绑定事件。
        thisTable.live("mouseover", function(e) {
            //获取鼠标所指目标对象父级tr
            $(e.target).parent().addClass(options.activeRowClass);
            //阻止事件冒泡
            return false;
        }).live("mouseout", function(e) {
            $(e.target).parent().removeClass(options.activeRowClass);
            return false;
        });
    };
})(jQuery);