一个简单的jQuery插件开发实例

两年前写的一个简单的jQuery插件开发实例，还是可以看看的：

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
(function($){
// 为指定节点添加遮盖效果
var methods = {
Documents : {},
Options : {},
Show : function(){
// 配置参数
var defaults = {
zIndex : 9990, // 层高
opacity : 0.7, // 透明度
bgColor : "#000", // 背景色
bgImg : "", // 背景图
fixSpace : [0,0,0,0], // 补偿四边的像素 顺序:上右下左
callback : $.noop  // 显示输出后的回调函数, 第一个参数为当前 cover 的 jQuery 对象 function(cover){}
};
var settings = $.extend({}, defaults, this.Options);

var getFixSpace = function(index){
if (typeof settings.fixSpace === "number") return settings.fixSpace;
return settings.fixSpace[index] ? settings.fixSpace[index] : 0;
}

this.Documents.each(function(){
var $this = $(this);
var cover = $this.find(".my-ui-cover-wrapper");
if (cover.size() < 1) {
cover = $('<div class="my-ui-cover-wrapper"><div class="my-ui-cover"></div></div>');

// 设置渲染样式并输出到页面
cover.css({ position:"relative", margin:0, padding:0, float:"none", fontSize:0, lineHeight:0 }).prependTo($this)
.find(".my-ui-cover")
.css({ position:"absolute", zIndex:settings.zIndex, backgroundColor:settings.bgColor, backgroundImage:"url("+ settings.bgImg +")" })
.fadeTo(0, settings.opacity);
}

// 显示输出后的回调函数
if (typeof settings.callback === "function") settings.callback(cover);

// 动态适应窗口大小
var setPosition = function(){
var top = $this.css("paddingTop").replace("px", "")*-1 + getFixSpace(0);
var left = $this.css("paddingLeft").replace("px", "")*-1 + getFixSpace(3);
var width = $this.width() + left*-1 + $this.css("paddingRight").replace("px", "")*1 + getFixSpace(1);
var height = $this.height() + top*-1 + $this.css("paddingTop").replace("px", "")*1 + getFixSpace(2);
cover.find(".my-ui-cover").css({ top:top, left:left, width:width, height:height });
};
$(window).resize(setPosition); setPosition();
});

return this.Documents;
},

// 移除指定节点下的全部遮盖效果
Remove : function(callback){
this.Documents.find(".my-ui-cover-wrapper").fadeOut(function(){
$(this).remove();
typeof callback === "function" ? callback() : "";
});
}
}

// 遮盖插件
$.fn.Cover = function(options){
methods.Documents = this;
methods.Options = options;
return methods;
};
})(jQuery);

$(function(){
$("body").Cover({
bgImg : "http://yuyan.ai9475.com/front/templates/yuyan/styles/style2/image/line_bg.png",
callback : function(cover){
cover.click(function(){ $(this).fadeOut() });
}
})
.Show();
setTimeout(function(){
$("body").Cover().Remove(function(){ alert("yes"); });
}, 1000);
});
</script>

可以对任何一个或多个容器进行遮盖，还未进行完整测试可能存在一些小问题

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

原文发表于：2012/08/03 23:07