以一个popup 的例子，学习怎么写jquery插件。插件 实例化时候 包括传属性，函数。类似jqueryUI 的使用感觉。
实现效果类似 android 的 toast 的效果。 显示提示消息，过几秒后消失。
是用方法与 JQuery UI 一样。
$('#aa').popup({
position:{
x:100,
y:200
},
duration:1000,
text:'大家好',
hide:function(duration) {
console.log(this);
alert('fadeout duraion' + duration);
}
});
代码讲解：
首先用jquery选择器，选择一个元素，来当作popup的容器。之后就是利用plugin的方法来穿参数。可以穿的参数有：
postion: popup显示的 position坐标
duration: popup显示的时间
text: 显示的文字
hide: popup div 隐藏后的回调函数
插件代码如下：
(function($) {
var methods = {
init:function(options) { //初始化一个 jqueryplugin实例
return this.each(function() {
var instance = this; //获取当前实例
var isInitialized = $(instance).data("isInitialized");
if(isInitialized == null) { //判断是否实例化过
$(instance).data('options', options);
//给 插件对象 附加css
render(instance);
$(instance).data("isInitialized", 'true');
}
})
},
show:function() {
var options = $(this).data('options'),
duration = options.duration,
that = this;
$(this).fadeIn(duration, function() {
that.fadeOut(duration, function() {
// 给初始化时候的 hide函数 传值
if(options.hide != undefined && options.hide != null) {
options.hide(duration);
}
});
});
}
};
//private
var popFadeOut = function(duration) {
setTimeout(function() {
}, duration);
};
//private
var render = function(instance) {
var $self = $(instance),
options = $self.data('options'),
duration = options.duration,
position = options.position,
isTop = options.isTop,
text = options.text;
var cssObject = new Object();
cssObject['height'] = '50px';
cssObject['width'] = '200px';
cssObject['position'] = 'absolute';
cssObject['left'] = position.x || 300;
cssObject['top'] = position.y || 100;
cssObject['background'] = 'black';
cssObject['color'] = 'white';
cssObject['display'] = 'none';
if(isTop) {
cssObject['zIndex'] = 999999;
}
$self.text(text);
$self.css(cssObject);
};
/**
* popUp插件构造函数。
*
* version 1.0
* Author: Yuqiao Gao 3/19/2013.
*/
$.fn.popup = function(method) {
if(methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if(typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist on jquery.popup');
}
};
})(jQuery);