|
插件分俩种：
·类级别组件开发：
---即给JQuery命名空间下添加新的全局函数，也称静态方法。形式如下：
jQuery.myPlugin = function (){ //do something};
例如：$.ajax(options); $.type();
·对象级别组件开发
---挂在JQuery原型下的方法，通过选择器获取的JQuery对象实例能共享该方法，称为动态方法。形式如下：
//$.fn == $.prototype$.fn.myPlugin = function () { //do somthing};
例如：.addClass(); .attr();
同时，插件也要保持JQuery链式调用的特性，链式调用的形式如下：
$.fn.myPlugin = function (){
return this.each(function (){ //return实现链式调用
//do something
});
};
----------------------------------以上就是插件机制---------------------------------
下面实现一个简单的表格隔行变色插件：
//为了更好的兼容性，前面有个分号(function($){
$.fn.tableUI = function(options){ var defaults = {
evenRowClass:"evenRow",
oddRowClass:"oddRow",
activeRowClass:"activeRow",
clickRowClass:"clickRow"
} var options = $.extend(defaults, options);//$.extend(option...)返回一个对象.
//为了实现链式调用，用return返回对象
return this.each(function(){ //缓存this
var thisTable = $(this);
$(thisTable).find("tr:even").addClass(options.evenRowClass);
$(thisTable).find("tr:odd").addClass(options.oddRowClass);
$(thisTable).find("tr").bind("mouseover",function(){
$(this).removeClass(options.clickRowClass).addClass(options.activeRowClass);
});
$(thisTable).find("tr").bind("mouseout",function(){
$(this).removeClass(options.clickRowClass).removeClass(options.activeRowClass);
});
$(thisTable).find("tr").bind("click",function(){
$(this).addClass(options.clickRowClass);
});
});
};
})(jQuery);
|