559      技術社區[雲棲]

一個簡單的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 ><div ></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 : "https://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

最後更新：2017-04-03 12:54:57

  上一篇： [LeetCode]67.Add Binary

  下一篇： PHP全角半角轉換函數