实战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);//创建一个容器divthis.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>");$.DM.setDrag(this.body, this.titlearea);//实现拖拽功能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

.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

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);

实现了主要部分，还有许多待改进的地方，请大家指正。