jquery插件开发

贴代码：

jQuery.fn.drag=function(){
var moveAble=false;
var that=$(this);
var _top=0;
var _left=0;
$(document).bind("mousemove",function(e){
if(moveAble){
that.css({"left":e.pageX-_left,"top":e.pageY-_top});
}
});
$(this).mousedown(function(e){
_top=e.pageY-Number(that.css("top").replace("px",""));
_left=e.pageX-Number(that.css("left").replace("px",""));
moveAble=true;
});
$(document).mouseup(function(){
moveAble=false;
});
};

代码有点乱，而且没优化过，不过今天主要是说一下插件开发，这些先不理。。。

jquery插件无非是在jquery命名空间上添加对每个jquery实例有效方法和属性

基本上都是套用这种模式：

/*向jquery里面添加drag方法*/
jQuery.fn.drag

于是我就可以使用了（这是一个简易的拖动元素的插件）

$(".XX").drag();

有些插件是可以带参数或者不带

例如（时间不足，网上找了一个）：

jQuery.fn.quberTip = function (options) {
var defaults = {
speed: 500,
xOffset: 10,
yOffset: 10
};
var options = $.extend(defaults, options);
return this.each(function () {
var $this = jQuery(this);
if ($this.attr('title') != undefined) {
//Pass the title to a variable and then remove it from DOM
if ($this.attr('title') != '') {
var tipTitle = ($this.attr('title'));
} else {
var tipTitle = 'Null';
}
//Remove title attribute
$this.removeAttr('title');
$(this).hover(function (e) {
//            $(this).css('cursor', 'pointer');
$("body").append("<div id='tooltip'>" + tipTitle + "</div>");
$("#tooltip").css({ "position": "absolute",
"z-index": "9999",
"background": "#D3DDF5",
"padding": "5px",
"opacity": "1",
"border": "1px solid #A3C0E8",
"font-weight": "bold",
"font-size": "12px",
"display": "none",
"max-width":"300px"
});
$("#tooltip")
.css("top", (e.pageY + defaults.xOffset) + "px")
.css("left", (e.pageX + defaults.yOffset) + "px")
.fadeIn(options.speed);
}, function () {
//Remove the tooltip from the DOM
$("#tooltip").remove();
});
$(this).mousemove(function (e) {
$("#tooltip")
.css("top", (e.pageY + defaults.xOffset) + "px")
.css("left", (e.pageX + defaults.yOffset) + "px");
});
}
});
};

里面多了这个：

var defaults = {
speed: 500,
xOffset: 10,
yOffset: 10
};
var options = $.extend(defaults, options);

defaults就是默认的参数，extened就是把实参覆盖到默认参数上面，来个和而唯一，于是当你用这个插件是可以

$(xx).quberTip();
$(xx).quberTip（ speed: 2000, xOffset: 100,）;/*或者*/
$(xx).quberTip（ speed: 2000, xOffset: 100,yOffset: 10）;/*或者*/