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