jquery插件

来源:互联网 发布:java nginx tomcat 编辑:程序博客网 时间:2024/04/29 16:58

示例插件功能:

美化表格,让表格的奇偶行颜色不同,然后鼠标移到某行上,某行可以高亮显示。

一个通用的框架:

(function($){ 
$.fn.yourName = function(options){ 
//各种属性、参数 

var options = $.extend(defaults, options); 
this.each(function(){ 
//插件实现代码 
}); 
}; 
})(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); 

原创粉丝点击