1 /**
  2  * 对话框
  3  * @constructor
  4  * @author putaoshu@126.com
  5  * @date 2012-03-13
  6  * @param {Object} options 组件配置
  7 
  8  * @param {Object} options.message  主对象
  9  * @param {Boolean} options.mask  true 是否有遮罩层
 10  * @param {Number} options.opacity   0.15 遮罩层透明度
 11  * @todo {Boolean} options.drag   false 
 12  * @param {String} options.maskClass vuiDialogMask 遮罩层样式
 13  * @param {String} options.dialogClass vuiDialog 对话框主体样式
 14  * @param {Object} options.close  true 是否采用vui.undialog关闭浮层
 15  * @param {Boolean} options.maskIframe false 遮罩层用iframe做底
 16  * @param {Boolean} options.appendType true true 直接先append到body
 17  * @param {Object} options.stick null  需要粘在某个元素上
 18  * @param {Boolean} options.autoClientX false 浮层宽度为当前窗口宽度
 19  * @param {Boolean} options.autoClientY false 浮层高度为当前窗口高度
 20  * @param {Boolean} options.fixed true 浮层是否fixed
 21 
 22  * @param {Object} options.css  主体样式配置
 23  * @param {Number} options.css.width   null 主体宽度
 24  * @param {Number} options.css.height  null 主体高度
 25  * @param {Number} options.css.top   null 主体top
 26  * @param {Number} options.css.left   null 主体left
 27  * @param {Number} options.css.zIndex 9998 主体zIndex
 28 
 29  * @param {Function}  callback 回调函数
 30  * @example 
 31 vui.dialog({message:$('#dialog')});
 32 
 33 vui.dialog({
 34 	message:"<h2 >标题 </h2>",
 35 	css:{
 36 		top:'10px',
 37 		left:'20px',
 38 		width:'300px',
 39 		zIndex:'10000'
 40 	}
 41 });
 42 
 43 vui.dialog({
 44 	message:$('#userGuide'),
 45 	opacity:0.5,
 46 	stick: $('#picModeOpt'), //粘到某个元素上
 47 	css:{
 48 		top : -17,
 49 		left : -365,
 50 		zIndex:10
 51 	}
 52 });
 53 
 54  * @2012-05-28 浮层宽度为当前窗口宽度 autoClientX:true
 55  * @todo 拖动;
 56  */
 57 vui.dialog  =  function(options,callback){
 58 	var $this = '';
 59 	options = $.extend({
 60 		message : null,
 61 		mask : true,
 62 		opacity : 0.15,
 63 		drag : false,
 64 		maskClass:'vuiDialogMask',
 65 		dialogClass:'vuiDialog',
 66 		close:true,//是否采用vui.undialog关闭浮层
 67 		maskIframe:false,
 68 		appendType:true,//true:直接先append到body
 69 		stick:null,//需要粘在某个元素上
 70 		autoClientX:false,//浮层宽度为当前窗口宽度
 71 		autoClientY:false,//浮层高度为当前窗口高度
 72 		fixed:true, //浮层fixed与否
 73 		css : {
 74 			width : null,
 75 			height :null,
 76 			top : null,
 77 			left : null,
 78 			zIndex:9998
 79 		}
 80 	},options);
 81 
 82 	//插入模式
 83 	var insideTag = vui.isObject(options.message);
 84 	var stickDom = options.stick;
 85 
 86 	//加遮照层
 87 	var maskObj;
 88 	
 89 	if (options.mask){
 90 		maskObj = $(document.createElement("div"));
 91 		maskObj.attr('class',options.maskClass);
 92 		maskObj.addClass('vuiMaskLayer');
 93 		maskObj.css({
 94 			position:"absolute",zIndex:options.css.zIndex,left:0,top:0,opacity:options.opacity,backgroundColor:"#000",
 95 			width:vui.pageSize().docWidth,
 96 			height:vui.pageSize().docHeight
 97 		});
 98 		if (!$('.'+options.maskClass)[0]) maskObj.appendTo('body');
 99 		
100 		//ie6 select bug 
101 		if (vui.browser.ie6 || options.maskIframe){
102 			maskObj.append('<iframe src="javascript:;" class="vuiSelectBug" frameBorder="0" style="width:100%;height:100%;position:absolute;z-index:'+(options.css.zIndex+1)+';opacity:0;filter:alpha(opacity=0);top:0;left:0;">');
103 		}
104 		
105 		//自适应窗口
106 		$(window).resize(function(){
107 			var currentCSS = {
108 				width:vui.pageSize().docWidth,
109 				height:vui.pageSize().docHeight
110 			}
111 			$('.'+options.maskClass).css(currentCSS);
112 		});
113 	}
114 	
115 	//开始始 appendTo body
116 	if(insideTag){
117 		if (options.appendType){
118 			options.message.appendTo('body');
119 		}
120 		options.message.css({top:0,left:0})
121 	}
122 	
123 	//垂直距中
124 	var dialogObj = $(document.createElement("div"));
125 
126 	if (vui.isString(options.message)){
127 		dialogObj.append(options.message);
128 		$this = dialogObj.children().first();
129 	}else if(insideTag){
130 		$this = options.message;
131 	}else{
132 		dialogObj.append($this);
133 	}
134 
135 	//兼容IE6
136 	$this.css({'float':'left',position:'',top:'',bottom:'',left:'',right:''});
137 
138 	autoClient();
139 	dialogObj.attr('class',options.dialogClass);
140 	if(!insideTag) dialogObj.appendTo('body');
141 	
142 	if (insideTag) dialogObj =	options.message;
143 
144 	var dialogObjCss = {
145 		position:  'absolute' ,
146 		zIndex:options.css.zIndex+2,
147 		display:"block"
148 	}
149 	
150 	//setStyle
151 	function setStyle(){
152 		autoClient();
153 		var tag = vui.browser.ie6 ;
154 		var currentCSS = {
155 			position: tag ? 'absolute' : "fixed" ,
156 			top:(options.css.top == null) ? ($(window).height() - $this.height() ) / 2 + (tag ? $(window).scrollTop() :0 ) : options.css.top,
157 			left:(options.css.left == null) ?  ($(window).width() - $this.width() ) / 2 + (tag ? $(window).scrollLeft() :0 )  : options.css.left
158 		}
159 		
160 		if (!options.fixed){
161 			currentCSS.position = 'absolute' ;
162 		}
163 		dialogObj.css(currentCSS);
164 	}
165 
166 	//窗口自适应的dom
167 	if (stickDom){
168 		dialogObjCss.left = stickDom.offset().left+options.css.left;
169 		dialogObjCss.top = stickDom.offset().top+options.css.top;
170 	}
171 
172 	//浮层宽和高为当前窗口宽和高
173 	function autoClient(){
174 		if (options.autoClientX){
175 			$this.css({width:$(window).width()});
176 		}
177 		if (options.autoClientY){
178 			$this.css({height:$(window).height()});
179 		}
180 	}
181 
182 	//样式最终设定
183 	dialogObj.css(dialogObjCss);
184 	if (!stickDom) setStyle();
185 
186 	
187 	//fixed (IE6模拟)
188 	if (vui.browser.ie6 && !stickDom){
189 		if (options.fixed){
190 			$(window).bind('scroll',function(){
191 				setStyle();
192 			});
193 		}
194 	}
195 
196 	//窗口自适应
197 	$(window).resize(function(){
198 		if (stickDom){
199 			dialogObj.css({
200 				left : stickDom.offset().left+options.css.left,
201 				top : stickDom.offset().top+options.css.top
202 			});
203 		}else{
204 			setStyle();
205 		}
206 	});
207 
208 	//默认.dialogclose可以移除浮层
209 	$('.dialogclose',dialogObj).click(function(){
210 		dialogObj.remove();
211 		maskObj.remove();
212 	});
213 
214 	$(window).data('dialog.options.close',options.close);
215 	$(window).data('dialog.maskObj',maskObj);
216 	$(window).data('dialog.dialogObj',dialogObj);	
217 
218 	if (callback){
219 		callback(); 
220 	}
221 	
222 	if (options.close){
223 		vui.preventScroll.init();
224 	}
225 }
226 
227 //兼容unblockUI
228 vui.undialog = function(){
229 	if ($(window).data('dialog.maskObj') && ( $(window).data('dialog.options.close')==true ) ){
230 		$(window).data('dialog.maskObj').remove();
231 		$(window).data('dialog.dialogObj').remove();
232 		var maskLayer = $('.vuiMaskLayer:last');
233 		if (!maskLayer.is(':visible') || maskLayer.css('visibility')=='hidden'){
234 			vui.preventScroll.destroy();
235 		}
236 	}
237 };
238 
239