jquery的插件机制以及应用

插件中的几个注意事项:

1.插件的文件名推荐用jquery.[插件名].js,避免与其他插件混淆.
2.所有的对象方法都应该附加到jQuery.fn对象上,而所有的全局函数都应当附加jQuery对象本身上.
3.在插件内部,this指向的是当前通过选择器获取的jQuery对象.

4.插件应该返回一个jQuery对象,以保证插件的可链式操作.
5.避免在插件内部使用$作为jQuery对象的别名,而应使用完整的jQuery来表示,这样可以避免冲突.

 

 

插件的可链式
1.返回数据的可链式，以保证还可以使用其它的方法.
如下的方式，它会返回一个jquery对象.

调用时:
$("#table2").alterBgColor()  //应用插件
.find("th").css("color","red");//可以链式操作

 

 

 

>>>>在实际的写法上 :

 

常用的参数设置，默认参数的实现.
;(function($) {
$.fn.extend({
"alterBgColor":function(options){
  //设置默认值
options=$.extend({
odd:"odd",    /* 偶数行样式*/
even:"even", /* 奇数行样式*/
selected:"selected" /* 选中行样式*/
},options);
$("tbody>tr:odd",this).addClass(options.odd);
$("tbody>tr:even",this).addClass(options.even);
$('tbody>tr',this).click(function() {
//判断当前是否选中
var hasSelected=$(this).hasClass(options.selected);
//如果选中，则移出selected类，否则就加上selected类
$(this)[hasSelected?"removeClass":"addClass"](options.selected)
//查找内部的checkbox,设置对应的属性。
.find(':checkbox').attr('checked',!hasSelected);
});
// 如果单选框默认情况下是选择的，则高色.
$('tbody>tr:has(:checked)',this).addClass(options.selected);
return this;  //返回this，使方法可链。
}
});
})(jQuery);


说明:1. 使用extend来对函数的参数进行默认的赋值.

    2. 使用插件下的元素匹配,即选择器的设置.
如要当前表格中刚单击的一个tr表格行.>>
   $("tbody>tr:odd",this).addClass(options.odd);
   $("tbody>tr:even",this).addClass(options.even);

 

 

6.为插件来传递调用方法时.

$.fn.mywin = function(position, hidefunc, initPos)
{
//定义关闭按钮的动作
currentwin.children(".title").children("img").click(function() {
if (!hidefunc) {
currentwin.hide("slow")    ;
} else {
hidefunc();
}
});

}


此函数的内容为:

rightwin.mywin({left: "right", top: "bottom"}, function() {
rightwin.hide();
},{left: rleft, top: scrollTop + browserheight}).fadeOut(15000).dequeue();
}

即当进行click时，它会调用hidefunc()的方法.