jQuery插件--表格隔行变色
插件分俩种:
·类级别组件开发:
---即给JQuery命名空间下添加新的全局函数,也称静态方法。形式如下:
jQuery.myPlugin=function(){//dosomething};
例如:$.ajax(options); $.type();
·对象级别组件开发
---挂在JQuery原型下的方法,通过选择器获取的JQuery对象实例能共享该方法,称为动态方法。形式如下:
//$.fn==$.prototype$.fn.myPlugin=function(){//dosomthing};
例如:.addClass(); .attr();
同时,插件也要保持JQuery链式调用的特性,链式调用的形式如下:
$.fn.myPlugin = function (){
return this.each(function (){ //return实现链式调用
//do something
});
};
----------------------------------以上就是插件机制---------------------------------
下面实现一个简单的表格隔行变色插件:
//为了更好的兼容性,前面有个分号(function($){$.fn.tableUI=function(options){vardefaults={evenRowClass:"evenRow",oddRowClass:"oddRow",activeRowClass:"activeRow",clickRowClass:"clickRow"}varoptions=$.extend(defaults,options);//$.extend(option...)返回一个对象.//为了实现链式调用,用return返回对象returnthis.each(function(){//缓存thisvarthisTable=$(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);
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。