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

为什么80%的码农都做不了架构师？>>>   

两年前写的一个简单的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

转载于:https://my.oschina.net/zhouz/blog/213189