实战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>");
		$.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);

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