almost 6 years ago

Plugin 練習
兩種模式的浮動視窗
寫得好亂XDD

/*
 * 顯示浮動視窗工具
 *  範例
 *  $('#test1').myPopUp({showId: "PopUpbox"});
 *  $('#test2').myPopUp({showId: "PopUpbox2", closeId: "closeBox2"});
 *  $('#debug').myPopUp({bind: "mouseover", closebind: "mouseout", showId: "PopUpbox", closeId: "debug", showType: "float"});
 *  說明
 * bind 為主物件綁定的事件 預設 click
 * showId 顯示容器的Id 預設 myPopUpbox
 * closeId 關閉容器的Id 預設 closeBox
 * closebind 關閉容易的事件  預設 click
 * showType 顯示類型 popUp & float 預設 popUp
 * showBox 顯示時所要執行的 call back 
 */
$.fn.myPopUp = function (settings) {
    
    var _defaultSettings = {
            
            bind: "click",
            showId: "myPopUpbox",
            closeId: "closeBox",
            closebind: "click",
            showType:"popUp",
            showBox: function () {}
    };
    
    var _settings = $.extend(_defaultSettings, settings);
    
    var _boxMethods = {
            initBox: function () {
                if (_settings.showType == "popUp")  {
                    _popMethods.initPopUp();
                } else {
                    
                }
            },
            showBox :   function () {
                if (_settings.showType == "popUp")  {
                    _popMethods.showPopUp();
                } else {
                    _floatMethods.showFloat();
                }
            },
            closeBox : function () {
                if (_settings.showType == "popUp")  {
                    _popMethods.closePopUp();
                } else {
                    _floatMethods.closeFloat();
                }
            }
    };
    
    var _floatMethods = {
            
            showFloat : function () {
                var myoffset = _settings.id_object.offset();
                var width = _settings.id_object.width();
                
                _settings.showId_object.css({ "position":"absolute", 
          'left': myoffset.left + width + 15, 'top': myoffset.top, 'z-index':100 });
          
                _settings.showId_object.show(1000, function () {
                    $(this).stop();
                });
                
            },
            closeFloat : function () {
                _settings.showId_object.hide(1000, function () {
                    $(this).stop();
                });
            }
    };
    
    var _popMethods = {
            
            showPopUp : function () {
                    var boxWidth = _settings.showId_object.width(); 
                var boxheight = _settings.showId_object.height();
          
                _settings.showId_object.css({"position":"absolute", 
            "left": (_settings.document_object.width() - boxWidth) / 2, 
            "top": (_settings.document_object.height()) / 2, 'z-index': 100 });
            
                _settings.box_id_object.css({"width": _settings.document_object.width(), 
            "height": _settings.document_object.height() });
            
                _settings.showId_object.show();
                _settings.box_id_object.show();
            },
            resizePopUP : function () {         
                    var boxWidth = _settings.showId_object.width(); 
                var boxheight = _settings.showId_object.height();
                _settings.showId_object.css({ "left": (_settings.document_object.width() - boxWidth) / 2, 
          "top": (_settings.document_object.height()) / 2, 'z-index': 100 }); 
          
                _settings.box_id_object.css({ "width": _settings.document_object.width(), 
          "height": _settings.document_object.height() });  
            },
            closePopUp : function () {
                _settings.showId_object.hide();
                _settings.box_id_object.hide();
            },
            initPopUp: function () {
                $("body").append('<div id="' + _settings.background_box_id + 
        '" style="position:absolute;display:none;width:100%;height:100%;background-color:#999999;left:0px;top:0px;opacity: 0.50;filter: alpha(opacity=50);"></div>');
                _settings.box_id_object = $("#" + _settings.background_box_id);
                // 設定底圖關閉事件
                 _settings.box_id_object.click(function () {
                    _boxMethods.closeBox();
                });
                // 設定視窗刷新大小
                $(window).resize(function(){ 
                    _popMethods.resizePopUP();
                });
            }
            
    };
    
    var _handler = function () {
        
        // 初始化必要物件
        _settings.background_box_id = this.id +  "_background_box";
        _settings.id_object = $("#" + this.id);
        _settings.showId_object = $("#" + _settings.showId);
        _settings.window_object = $(window);
        _settings.document_object = $(document);
        _boxMethods.initBox();
        
        // 綁定事件
        var this_object = $(this);
        this_object.bind(_settings.bind, _settings.showBox);
        this_object.bind(_settings.bind, _boxMethods.showBox);
        
        if ((this.id == _settings.closeId && _settings.closebind != _settings.bind) || 
                this.id != _settings.closeId) {
            
            $("#" + _settings.closeId).bind(_settings.closebind, _boxMethods.closeBox);
        }
    };
    
    return this.each(_handler);
}
← resize img Plugin img 遮罩 Plugin →
 
comments powered by Disqus