实战jquery(2)-自建可拖拽模态对话框

模态对话框的实现思路
 
 1.一个容器div，限制模态对话框的作用域，被该div覆盖的组件不可被点选。
 
 2.容器div中一个半透明的子div， 实现遮罩效果，width:100% height:100%；
 
 3.容器div中一个对话框div，用于布局对话框中的组件。对话框包括titler、body、footer三个部分。
 
 推拽功能的实现思路
 
 在指定组件上监听鼠标按下(mousedown)事件，在该事件中为需要被拖拽的组件添加mousemove事件（移动组件）以及moueseup事件（结束拖拽）
 
效果图如下：
 
 
 
测试代码：
 
 
var msg = '<p class="tipgreen">请确认付款金额无误，刷卡完成缴费！</p>'+ 
                    '<p class="tipred">付款总额：3.0元</p>'+ 
                    '<br><ol id="oprationlog" class="log"><li>读卡成功，非本人卡，验证消费密码。消费密码验证成功！</li><li>aaa</li></ol><p id="tip4" class="tipgreen">20秒后返回首页!</p>'; 
                     
var testDialog = $.DS.UI.Dialog.show(msg, { title:"付款确认-测试对话框"}); 
下面是代码和css
 
一、对话框代码
 
 
(function($){ 
    if( !$.DS ) $.DS = {}; 
    if( !$.DS.UI ) $.DS.UI = {}; 
     
    /**
     * 对话框构造函数。
     * @param {Object} msg
     * @param {Object} setting
     * @param {Object} owner :jQuery对象。
     */  
    $.DS.UI.Dialog = function(msg, setting, owner){ 
        this.owner = owner; 
        if( owner === undefined || null == owner ) this.owner = $(window.document.body); 
         
        this.setting = $.extend($.DS.UI.Dialog.defaultSetting, setting); 
        //创建一个容器div 
        this.container = $('<div class="dialog_container"/>'); 
        this.mask = $('<div class="dialog_mask"/>'); 
        this.body = $('<div class="dialog_body"/>'); 
         
        this.container.append(this.mask); 
        this.container.append(this.body); 
         
        this.titlearea = $('<div class="dialog_body_titlearea"><img class="dialog_body_title_icon" src="'+this.setting.icon+'"/><p>'+this.setting.title+"</p></div>"); 
<strong><span style="color:#ff6666;">       $.DM.setDrag(this.body, this.titlearea);    //实现拖拽功能 
</span></strong>        this.main = $('<div class="dialog_body_mainarea">'+msg+'</div>'); 
        this.footer = $('<div class="dialog_body_footarea"><button id="_btn_close">close</button></div>'); 
        this.body.append(this.titlearea); 
        this.body.append(this.main); 
        this.body.append(this.footer); 
         
        this.footer.find("#_btn_close").click(function(){ 
            this.dialog.close(); 
        })[0].dialog = this; 
    }; 
     
    $.DS.UI.Dialog.defaultSetting = { 
        model:true, 
        width:600, 
        height:450, 
        title:"对话框", 
        icon:"./img/sys/dicon.png" 
    }; 
     
    /**
     * 显示对话框-静态方法，用户显示一个对话框
     * @param {String} msg: 提示信息；
     * @param {Object} seeting: 对话框设置；
     * @param {Object} owner
     * 对话框遮盖对象，如果owner=null，则ownere=body
    */   
    $.DS.UI.Dialog.show = function(msg, setting, owner){ 
        var dlg = new $.DS.UI.Dialog(msg, setting, owner) 
        dlg.show(); 
        return dlg;  
    }; 
     
    $.DS.UI.Dialog.prototype = { 
        show:function(){ 
            this.owner.append(this.container); 
            this.body.width(this.setting.width); 
            //因为ff中，width:100%会多出两个像素，所以只能代码设置。 
            this.titlearea.width(this.setting.width-2); 
            this.body.height(this.setting.height); 
            this.body.offset({left:(this.container.width()-this.setting.width)/2, top:100}); 
            this.main.height(this.setting.height - this.titlearea.height() - this.footer.height() ); 
        }, 
         
        close:function(){ 
            if( this.setting.closeHandler ){ 
                this.setting.closeHandler(); 
            } 
            this.owner[0].removeChild(this.container[0]); 
        } 
    } 
})(jQuery); 
二、对话框css
 
[css] view plaincopy
.dialog_container{ 
    position:absolute; 
    top:0; 
    left:0;  
    width:100%; 
    height:100%; 
    z-index:100; 
} 
 
.dialog_mask{ 
    position:absolute; 
    width:100%; 
    height:100%; 
    top:0; 
    left:0;  
    background:#999;  
    opacity:0.7; 
    filter:alpha(opacity=70); 
    z-index:0;  
} 
 
.dialog_body{ 
    overflow:hidden; 
    position:absolute; 
    border-left:#ccc 2px solid; 
    border-top:#ffffff 2px solid; 
    border-bottom:#666 2px solid; 
    border-right:#666 2px solid; 
    background:#999; 
    border-radius: 5px 5px; 
    box-shadow: 2px 2px 3px #000; 
    z-index:10;  
} 
 
.dialog_body_titlearea{ 
    padding:3px 0 0 0; 
    width:100%; 
    cursor:move; 
    vertical-align:middle; 
    border-left:#666 1px solid; 
    border-top:#666 1px solid; 
    border-bottom:#fff 1px solid; 
    border-right:#eee 1px solid; 
    background:#669; 
    font-weight:bolder; 
    height:20px; 
} 
 
.dialog_body_title_icon{ 
    border:0; 
    width:18px; 
    height:18px; 
    margin-left:2px; 
    margin-right:2px; 
    float:left; 
} 
 
.dialog_body_mainarea{ 
    padding:5px; 
    width:100%; 
    height:200px; 
    border-bottom:#666 1px solid; 
} 
 
.dialog_body_footarea{ 
    padding:5px; 
    width:100%; 
    border-top:#fff 1px solid; 
    height:70px; 
} 
 
 
测试用的css
 
[css] view plaincopy
ol.log { 
    border: 1px solid #617775; 
    background: #f0f6e4; 
    width:95%; 
    height:238px; 
    overflow: hidden; 
    font-size: 20; 
} 
 
ol.log.small { 
    height:45px; 
} 
 
ol.log li { 
    color: #666666; 
    padding-left: 10px; 
} 
 
ol.log li.dark { 
    background-color: #E3E3E3; 
} 
 
三、拖拽管理代码
 
 
(function($){ 
    /**
     * DM = drag manager
     */ 
    $.DM = { 
        /**
         * 设置一个可被拖拽的组件
         * @param {Object} component：可被拖拽的组件
         * @param {Object} rect：进入拖拽的区域，如果不指定则为组件客户区
         */ 
        setDrag:function(component, handler){ 
            var dragable = component; 
            if( null != handler) dragable = handler; 
             
            dragable.bind("mousedown.dragbegin", function(event){ 
                //alert("Drag begin!"); 
                component[0]._cx = event.clientX; 
                component[0]._cy = event.clientY; 
                 
                component.bind("mousemove.dragging", function(event){ 
                    var _ox = event.clientX - this._cx; 
                    var _oy = event.clientY - this._cy; 
                     
                    this._cx = event.clientX; 
                    this._cy = event.clientY; 
                      
                    $(this).offset({top:$(this).offset().top + _oy, left:$(this).offset().left + _ox}); 
                }); 
                 
                component.bind("mouseup.dragstop", function(){ 
                    component.unbind("mousemove.dragging") 
                }) 
            }); 
        } 
    } 
})(jQuery); 
 
实现了主要部分，还有许多待改进的地方，请大家指正

摘自 DS的专栏