dwz框架自定義組件 使dialog在navTab下顯示

主頁面

打開全屏頁面  只佔navTab部分

根據Dwz框架的原理,應是在某個元素下append元素,設置z-index,先將全屏默認用的body改成想要使用的layoutBox元素下,同時修改width計算的值,maxsize方法下,$("document").width();改爲$("layoutBox").width()  並賦值

/**
 * @author Roger Wu
 * reference:dwz.drag.js, dwz.dialogDrag.js, dwz.resize.js, dwz.taskBar.js
 */
(function($){
	$.pdialog = {
		_op:{height:300, width:580, minH:40, minW:50, total:20, max:false, mask:false, resizable:true, drawable:true, maxable:true,minable:true,fresh:true},
		_current:null,
		_zIndex:1000,
		getCurrent:function(){
			return this._current;
		},
		reload:function(url, options){
			var op = $.extend({data:{}, dialogId:"", callback:null}, options);
			var dialog = (op.dialogId && $(".layoutBox").data(op.dialogId)) || this._current;
			if (dialog){
				var jDContent = dialog. find(".dialogContent");
				jDContent.ajaxUrl({
					type:"POST", url:url, data:op.data, callback:function(response){
						jDContent.find("[layoutH]").layoutH(jDContent);
						$(".pageContent", dialog).width($(dialog).width()-14);
						$(":button.close", dialog).click(function(){
							$.pdialog.close(dialog);
							return false;
						});
						if ($.isFunction(op.callback)) op.callback(response);
					}
				});
			}
		},
		//打開一個層
		open:function(url, dlgid, title, options) {
			var op = $.extend({},$.pdialog._op, options);
			var dialog = $(".layoutBox").data(dlgid);
			//重複打開一個層
			if(dialog) {
				if(dialog.is(":hidden")) {
					dialog.show();
				}
				if(op.fresh || url != $(dialog).data("url")){
					dialog.data("url",url);
					dialog.find(".dialogHeader").find("h1").html(title);
					this.switchDialog(dialog);
					var jDContent = dialog.find(".dialogContent");

					jDContent.ajaxUrl({
						type:options.type||'GET', url:url, data:options.data || {}, callback:function(){
							jDContent.find("[layoutH]").layoutH(jDContent);
							$(".pageContent", dialog).width($(dialog).width()-14);
							$("button.close", dialog).click(function(){
								$.pdialog.close(dialog);
								return false;
							});
						}
					});
				}
			
			} else { //打開一個全新的層
			
				$(".layoutBox").append(DWZ.frag["dialogFrag"]);
				dialog = $(">.dialog:last-child", ".layoutBox");
				dialog.data("id",dlgid);
				dialog.data("url",url);
				if(options.close) dialog.data("close",options.close);
				if(options.param) dialog.data("param",options.param);
				($.fn.bgiframe && dialog.bgiframe());
				
				dialog.find(".dialogHeader").find("h1").html(title);
				$(dialog).css("zIndex", ($.pdialog._zIndex));
				/*註釋掉陰影層 yps 2018-10-17*/
				// $("div.shadow").css("zIndex", $.pdialog._zIndex - 1).show();
				$.pdialog._init(dialog, options);
				//$(dialog).click(function(){
				//	$.pdialog.switchDialog(dialog);
				//});
				
				if(op.resizable)
					dialog.jresize();
				if(op.drawable)
				 	dialog.dialogDrag();
				$("a.close", dialog).click(function(event){ 
					$.pdialog.close(dialog);
					return false;
				});
				if (op.maxable) {
					$("a.maximize", dialog).show().click(function(event){
						//$.pdialog.switchDialog(dialog);
						$.pdialog.maxsize(dialog);
						dialog.jresize("destroy").dialogDrag("destroy");
						return false;
					});
				} else {
					$("a.maximize", dialog).hide();
				}
				$("a.restore", dialog).click(function(event){
					$.pdialog.restore(dialog);
					dialog.jresize().dialogDrag();
					return false;
				});
				if (op.minable) {
					$("a.minimize", dialog).show().click(function(event){
						$.pdialog.minimize(dialog);
						return false;
					});
				} else {
					$("a.minimize", dialog).hide();
				}
				$("div.dialogHeader a", dialog).mousedown(function(){
					return false;
				});
				$("div.dialogHeader", dialog).dblclick(function(){
					if($("a.restore",dialog).is(":hidden"))
						$("a.maximize",dialog).trigger("click");
					else
						$("a.restore",dialog).trigger("click");
				});
				if(op.max) {
//					$.pdialog.switchDialog(dialog);
					$.pdialog.maxsize(dialog);
					dialog.jresize("destroy").dialogDrag("destroy");
				}
				$(".layoutBox").data(dlgid, dialog);
				$.pdialog._current = dialog;
				$.pdialog.attachShadow(dialog);
				//load data
				var jDContent = $(".dialogContent",dialog);
				jDContent.ajaxUrl({
					type:options.type||'GET', url:url, data:options.data || {}, callback:function(){
						jDContent.find("[layoutH]").layoutH(jDContent);
						$(".pageContent", dialog).width($(dialog).width()-14);
						$("button.close", dialog).click(function(){
							$.pdialog.close(dialog);
							return false;
						});
					}
				});
			}
			if (op.mask) {
				$("a.minimize",dialog).hide();
				$(dialog).data("mask", true);
				$("#dialogBackground").show();
                $("#dialogBackground").css("zIndex", ($.pdialog._zIndex));
                $(dialog).css("zIndex", ($.pdialog._zIndex+1));

                var preDialog = $(".dialog:first");
                $(preDialog).css("zIndex", ($.pdialog._zIndex-1));

                $.pdialog.attachShadow(dialog);
                //$("div.shadow").css("zIndex", $.pdialog._zIndex - 1).show();
			}else {
				//add a task to task bar
				if(op.minable) $.taskBar.addDialog(dlgid,title);
			}
		},
		/**
		 * 切換當前層
		 * @param {Object} dialog
		 */
		switchDialog:function(dialog) {
			var index = $(dialog).css("zIndex");
			$.pdialog.attachShadow(dialog);
			if($.pdialog._current) {
				var cindex = $($.pdialog._current).css("zIndex");
				$($.pdialog._current).css("zIndex", index);
				$(dialog).css("zIndex", cindex);
				$("div.shadow").css("zIndex", cindex - 1);
				$.pdialog._current = dialog;
			}
			$.taskBar.switchTask(dialog.data("id"));
		},
		/**
		 * 給當前層附上陰隱層
		 * @param {Object} dialog
		 */
		attachShadow:function(dialog) {
			/*遮罩層註釋 yps 2018-10-17*/
			// var shadow = $("div.shadow");
			// if(shadow.is(":hidden")) shadow.show();
			// shadow.css({
			// 	top: parseInt($(dialog)[0].style.top) - 2,
			// 	left: parseInt($(dialog)[0].style.left) - 4,
			// 	height: parseInt($(dialog).height()) + 8,
			// 	width: parseInt($(dialog).width()) + 8,
			// 	zIndex:parseInt($(dialog).css("zIndex")) - 1
			// });
			// $(".shadow_c", shadow).children().andSelf().each(function(){
			// 	$(this).css("height", $(dialog).outerHeight() - 4);
			// });
		},
		_init:function(dialog, options) {
			var op = $.extend({}, this._op, options);
			var height = op.height>op.minH?op.height:op.minH;
			var width = op.width>op.minW?op.width:op.minW;
			if(isNaN(dialog.height()) || dialog.height() < height){
				$(dialog).height(height+"px");
				$(".dialogContent",dialog).height(height - $(".dialogHeader", dialog).outerHeight() - $(".dialogFooter", dialog).outerHeight() - 6);
			}
			if(isNaN(dialog.css("width")) || dialog.width() < width) {
				$(dialog).width(width+"px");
			}
			
			var iTop = ($(window).height()-dialog.height())/2;
			dialog.css({
				left: ($(window).width()-dialog.width())/2,
				top: iTop > 0 ? iTop : 0
			});
		},
		/**
		 * 初始化半透明層
		 * @param {Object} resizable
		 * @param {Object} dialog
		 * @param {Object} target
		 */
		initResize:function(resizable, dialog,target) {
			$(".layoutBox").css("cursor", target + "-resize");
			resizable.css({
				top: $(dialog).css("top"),
				left: $(dialog).css("left"),
				height:$(dialog).css("height"),
				width:$(dialog).css("width")
			});
			resizable.show();
		},
		/**
		 * 改變陰隱層
		 * @param {Object} target
		 * @param {Object} options
		 */
		repaint:function(target,options){
			/*註釋掉陰影層*/
			// var shadow = $("div.shadow");
			// if(target != "w" && target != "e") {
			// 	shadow.css("height", shadow.outerHeight() + options.tmove);
			// 	$(".shadow_c", shadow).children().andSelf().each(function(){
			// 		$(this).css("height", $(this).outerHeight() + options.tmove);
			// 	});
			// }
			// if(target == "n" || target =="nw" || target == "ne") {
			// 	shadow.css("top", options.otop - 2);
			// }
			// if(options.owidth && (target != "n" || target != "s")) {
			// 	shadow.css("width", options.owidth + 8);
			// }
			// if(target.indexOf("w") >= 0) {
			// 	shadow.css("left", options.oleft - 4);
			// }
		},
		/**
		 * 改變左右拖動層的高度
		 * @param {Object} target
		 * @param {Object} tmove
		 * @param {Object} dialog
		 */
		resizeTool:function(target, tmove, dialog) {
			$("div[class^='resizable']", dialog).filter(function(){
				return $(this).attr("tar") == 'w' || $(this).attr("tar") == 'e';
			}).each(function(){
				$(this).css("height", $(this).outerHeight() + tmove);
			});
		},
		/**
		 * 改變原始層的大小
		 * @param {Object} obj
		 * @param {Object} dialog
		 * @param {Object} target
		 */
		resizeDialog:function(obj, dialog, target) {
			var oleft = parseInt(obj.style.left);
			var otop = parseInt(obj.style.top);
			var height = parseInt(obj.style.height);
			var width = parseInt(obj.style.width);
			if(target == "n" || target == "nw") {
				tmove = parseInt($(dialog).css("top")) - otop;
			} else {
				tmove = height - parseInt($(dialog).css("height"));
			}
			$(dialog).css({left:oleft,width:width,top:otop,height:height});
			$(".dialogContent", dialog).css("width", (width-12) + "px");
			$(".pageContent", dialog).css("width", (width-14) + "px");
			if (target != "w" && target != "e") {
				var content = $(".dialogContent", dialog);
				content.css({height:height - $(".dialogHeader", dialog).outerHeight() - $(".dialogFooter", dialog).outerHeight() - 6});
				content.find("[layoutH]").layoutH(content);
				$.pdialog.resizeTool(target, tmove, dialog);
			}
			$.pdialog.repaint(target, {oleft:oleft,otop: otop,tmove: tmove,owidth:width});
			
			$(window).trigger(DWZ.eventType.resizeGrid);
		},
		close:function(dialog) {
			if(typeof dialog == 'string') dialog = $(".layoutBox").data(dialog);
			var close = dialog.data("close");
			var go = true;
			if(close && $.isFunction(close)) {
				var param = dialog.data("param");
				if(param && param != ""){
					param = DWZ.jsonEval(param);
					go = close(param);
				} else {
					go = close();
				}
				if(!go) return;
			}
			$.pdialog._current=$(".dialog:first");
			$("#background").hide();
			/*console.log($(dialog));
		    console.log($(dialog).css("display"));*/
			$(dialog).hide();
			$("div.shadow").hide();
			if($(dialog).data("mask")){
				$("#dialogBackground").hide();
			} else{
				if ($(dialog).data("id")) $.taskBar.closeDialog($(dialog).data("id"));
			}
			$(".layoutBox").removeData($(dialog).data("id"));
			$(dialog).trigger(DWZ.eventType.pageClear).remove();
		},
		closeCurrent:function(){
			this.close($.pdialog._current);
		},
		checkCloseCurrent:function(json){
			if (!json) return;
			if (json[DWZ.keys.statusCode] == DWZ.statusCode.timeout
				|| (json[DWZ.keys.statusCode] == DWZ.statusCode.error && "closeCurrentDialog" == json.callbackType) ) {
				this.closeCurrent();
			}
		},
		maxsize:function(dialog) {
			$(dialog).data("original",{
				top:$(dialog).css("top"),
				left:$(dialog).css("left"),
				width:$(dialog).css("width"),
				height:$(dialog).css("height")
			});
			$("a.maximize",dialog).hide();
			$("a.restore",dialog).show();
			/*不全屏打開,修改爲在頁籤內打開  yps 2018-10-17*/
			// var iContentW = $(window).width();
			// var iContentH = $(window).height();
			var iContentW = $(".layoutBox").width();
			var iContentH = $(".layoutBox").height();
			$(dialog).css({top:"0px",left:"0px",width:iContentW+"px",height:iContentH+"px"});
			$.pdialog._resizeContent(dialog,iContentW,iContentH);
		},
		restore:function(dialog) {
			var original = $(dialog).data("original");
			var dwidth = parseInt(original.width);
			var dheight = parseInt(original.height);
			$(dialog).css({
				top:original.top,
				left:original.left,
				width:dwidth,
				height:dheight
			});
			$.pdialog._resizeContent(dialog,dwidth,dheight);
			$("a.maximize",dialog).show();
			$("a.restore",dialog).hide();
			$.pdialog.attachShadow(dialog);
		},
		minimize:function(dialog){
			$(dialog).hide();
			$("div.shadow").hide();
			var task = $.taskBar.getTask($(dialog).data("id"));
			$(".resizable").css({
				top: $(dialog).css("top"),
				left: $(dialog).css("left"),
				height:$(dialog).css("height"),
				width:$(dialog).css("width")
			}).show().animate({top:$(window).height(),left:task.position().left,width:task.outerWidth(),height:task.outerHeight()},250,function(){
				$(this).hide();
				$.taskBar.inactive($(dialog).data("id"));
			});
		},
		_resizeContent:function(dialog,width,height) {
			var content = $(".dialogContent", dialog);
			content.css({width:(width) + "px",height:height - $(".dialogHeader", dialog).outerHeight() - $(".dialogFooter", dialog).outerHeight() - 6});
			content.find("[layoutH]").layoutH(content);
			$(".pageContent", dialog).css("width", (width-14) + "px");
			
			$(window).trigger(DWZ.eventType.resizeGrid);
		}
	};
})(jQuery);

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章