jQuery插件的开发包括两种:
一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法。jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级别的插件开发,即给jQuery对象添加方法,这样通过选择器获取的jQuery对象实例也能共享该方法。下面就两种函数的开发做详细的说明。
1、类级别的插件开发
类级别的插件开发最直接的理解就是给jQuery类添加类方法,可以理解为添加静态方法。典型的例子就是$.AJAX()这个函数,将函数定义于jQuery的命名空间中。关于类级别的插件开发可以采用如下几种形式进行扩展:
2、对象级别的插件开发
对象级别插件95%的用户(针对包装集)的写法
第一种写法:
/**对象级别的插件
* @author leech
*/
;(function($) {
$.fn.extend({
"fousColor":function(li_col) {
var def_col = "#ccc"; //默认的颜色
var lst_col = "#fff"; //失去焦点颜色
//传进来的颜色参数是否为空
li_col = (li_col == 'undefined') ? def_col : li_col;
//遍历li中的元素
$(this).find("li").each(function() {
$(this).mouseover(function() {
$(this).css("background-color", li_col) ;
}).mouseout(function() {
$(this).css("background-color", lst_col) ;
}) ;
}) ;
return this;
},
//表格行换颜色
"alterBgColor":function(opts) {
//设置默认参数值
opts = $.extend({
odd:"odd",
even:"even",
selected:"selected"
}, opts) ;
$("tbody>tr:odd",this).addClass(opts.odd) ;
$("tbody>tr:even",this).addClass(opts.even) ;
$("tbody>tr",this).click(function() {
//判断当前是否选中
var hasSelected = $(this).hasClass(opts.selected) ;
if(hasSelected) {
$(this).removeClass(opts.selected).find(":checkbox").attr("checked",false) ;
} else {
$(this).addClass(opts.selected).find(":checkbox").attr("checked",true) ;
}
}) ;
return this;
}
});
})(jQuery) ;
第二种写法:
/**
* @author Administrator
* 包装器方法
*/
(function($) {
$.fn.focusColor = function(opts) {
var settings = $.extend({
def_col:"#ccc",
lst_col:"#fff"
},opts||{});
$(this).find("li").each(function() {
$(this).mouseenter(function() {
$(this).css("background-color", settings.def_col) ;
}).mouseleave(function() {
$(this).css("background-color", settings.lst_col) ;
});
});
};
})(jQuery);
全局函数的插件写法:
;(function($) {
$.extend({
ltrim :function( text ) {
return (text || "").replace( /^\s+/g, "" )
},
rtrim :function rtrim( text ) {
return (text || "").replace( /\s+$/g, "" )
}
});
})(jQuery);
插件的编写一般应用闭包....