243 lines
8.1 KiB
JavaScript
243 lines
8.1 KiB
JavaScript
/*!
|
||
* 主 题：《页面弹出窗口》
|
||
* 说 明：用于子页面弹出时的窗口。
|
||
* 功能描述：
|
||
* 1、生成弹出窗口，窗口内包括iframe控件，用于加载实际控制页面；
|
||
* 2、窗口弹出时，生成背景遮罩；
|
||
* 3、窗口最小为宽高100，小于等于100时，宽高值默认为浏览器窗口的百分比；
|
||
*
|
||
*
|
||
* 作 者：宋雷鸣
|
||
* 开发时间: 2012年12月28日
|
||
*/
|
||
//窗体Jquery对象
|
||
PageBox.prototype.WinBox = null;
|
||
//窗口关闭时的事件
|
||
PageBox.prototype.CloseEvent = null;
|
||
//弹出窗口的主类
|
||
//title:窗口标题
|
||
//page:打开的页面
|
||
//width:窗口宽度
|
||
//height:窗口高度
|
||
//widId:窗口id
|
||
function PageBox(title, page, width, height, winId) {
|
||
this.Init(title, page, width, height, winId);
|
||
}
|
||
//初始化参数
|
||
PageBox.prototype.Init = function (title, page, width, height, winId) {
|
||
title = title != null && title != "" ? title : "newWinBox";
|
||
//如果为空，则为浏览器窗口一半宽高
|
||
width = width != null && width != 0 && width != "" ? Number(width) : $("body").width() / 2;
|
||
height = height != null && height != 0 && height != "" ? Number(height) : $("body").height() / 2;
|
||
//如果宽高小于100，则默认为浏览器窗口的百分比
|
||
width = width > 100 ? Number(width) : $("body").width() * Number(width) / 100;
|
||
height = height > 100 ? Number(height) : $("body").height() * Number(height) / 100;
|
||
//alert(winId);
|
||
if (winId == null) {
|
||
winId = new Date().ToString() + "_" + Math.floor(Math.random() * 1000 + 1);
|
||
}
|
||
//
|
||
this.Title = title;
|
||
this.Width = width;
|
||
this.Height = height;
|
||
this.Page = page;
|
||
this.WinId = winId;
|
||
}
|
||
//创建窗口，并打开
|
||
PageBox.prototype.Open = function (title, page, width, height, winId) {
|
||
//判断是否已经存在窗口
|
||
var WinBox = $(".PageBox[winId='" + this.WinId + "']");
|
||
if (WinBox.size() > 0) return;
|
||
this.Close();
|
||
//生成窗口
|
||
this.Mask();
|
||
this.BuildFrame();
|
||
this.BuildTitle();
|
||
this.BuildIFrame();
|
||
if (this.CloseEvent != null) {
|
||
var str = String(this.CloseEvent).replace(/[\r\n]/g, "").replace(/\{2,}/g, "");
|
||
str = str.replace(/'/g, "'").replace(/"/g, """);
|
||
this.WinBox.attr("closeevent", str);
|
||
}
|
||
//设置拖动
|
||
$(".PageBox").easydrag();
|
||
$(".PageBox").setHandler("PageBoxTitle");
|
||
//开始拖动
|
||
$(".PageBox").ondrag(function () {
|
||
$("#PageBoxIframeMask").show();
|
||
var frame = $("#PageBoxIframeTemp");
|
||
if (frame.size() > 0) {
|
||
frame.hide();
|
||
}
|
||
});
|
||
//停止拖动
|
||
$(".PageBox").ondrop(function () {
|
||
$("#PageBoxIframeMask").hide();
|
||
var frame = $("#PageBoxIframeTemp");
|
||
if (frame.size() > 0) {
|
||
var PageBox = $(".PageBox");
|
||
var offset = PageBox.offset();
|
||
frame.css("top", offset.top);
|
||
frame.css("left", offset.left);
|
||
frame.show();
|
||
}
|
||
});
|
||
//完成后触发事件
|
||
this.OnComplete();
|
||
}
|
||
//生成窗体外框
|
||
PageBox.prototype.BuildFrame = function () {
|
||
//屏幕的宽高
|
||
var hg = $(window).height();
|
||
var wd = $(window).width();
|
||
//
|
||
$("body").append("<div id=\"PageBox\" type=\"PageBox\" winId=\"" + this.WinId + "\"></div>");
|
||
var PageBox = $(".PageBox");
|
||
this.WinBox = PageBox;
|
||
var border = parseInt(PageBox.css("border-width")); //窗体边线宽度
|
||
border = !isNaN(border) ? border : 0;
|
||
//设置窗口的位置
|
||
PageBox.css("top", (hg - this.Height) / 2 - border);
|
||
PageBox.css("left", (wd - this.Width) / 2 - border);
|
||
PageBox.css("position", "absolute");
|
||
PageBox.css("z-index", "20001");
|
||
PageBox.css("width", this.Width);
|
||
PageBox.css("height", this.Height);
|
||
}
|
||
//生成标题栏
|
||
PageBox.prototype.BuildTitle = function () {
|
||
var box = this.WinBox;
|
||
box.append("<div id=\"PageBoxTitle\"></div>");
|
||
var titbox = $("#PageBoxTitle");
|
||
var tm = "<table width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\">";
|
||
tm += "<tr>";
|
||
//tm+="<td width=\"25\" > </td>"
|
||
tm += "<td ><div id=\"PageBoxTitleTxt\">" + this.Title + "</div></td>";
|
||
tm += "<td width=\"15\" align=\"center\">";
|
||
tm += "<a id=\"PageBoxTitleClose\" href=\"#\"><img src=\"/manage/images/winClose.gif\"/></a></td>";
|
||
tm += "</tr></table>"
|
||
titbox.append(tm);
|
||
//关闭按钮
|
||
$("#PageBoxTitleClose").click(function () {
|
||
var box = $(this).parents("div[type=PageBox]");
|
||
var winid = box.attr("winid");
|
||
PageBox.Close(winid);
|
||
return false;
|
||
});
|
||
}
|
||
//生成页面frame区域
|
||
PageBox.prototype.BuildIFrame = function () {
|
||
var box = this.WinBox;
|
||
var width = box.width();
|
||
//标题栏的高度
|
||
var titHg = $("#PageBoxTitle").outerHeight();
|
||
var height = box.height() - titHg;
|
||
var frame = "";
|
||
frame += "<iframe src=\"" + this.Page + "\" name=\"PageBoxIframe\" id=\"PageBoxIframe\" ";
|
||
frame += "width=\"" + width + "\"";
|
||
frame += "height=\"" + height + "\"";
|
||
frame += "marginwidth=\"0\" marginheight=\"0\" align=\"top\" scrolling=\"auto\"";
|
||
//frame+="frameborder=\"0\" allowtransparency=\"false\">";
|
||
frame += "frameborder=\"0\" >";
|
||
frame += "</iframe>";
|
||
box.append(frame);
|
||
//生成iframe上面的覆盖
|
||
box.append("<div id=\"PageBoxIframeMask\"></div>");
|
||
var mask = $("#PageBoxIframeMask");
|
||
mask.width(box.width());
|
||
mask.height(height);
|
||
mask.css({
|
||
position: "absolute",
|
||
left: "0px",
|
||
top: titHg
|
||
});
|
||
var alpha = 60;
|
||
mask.css("background-color", "#ffffff");
|
||
mask.css("filter", "Alpha(Opacity=" + alpha + ")");
|
||
mask.css("display", "block");
|
||
mask.css("-moz-opacity", alpha / 100);
|
||
mask.css("opacity", alpha / 100);
|
||
mask.fadeIn("slow");
|
||
mask.hide();
|
||
}
|
||
//关闭窗口
|
||
PageBox.prototype.Close = function (winid) { //清除窗口
|
||
PageBox.Close(winid);
|
||
}
|
||
PageBox.Close = function (winid) {
|
||
if (winid == null) {
|
||
$(".PageBox").remove();
|
||
} else {
|
||
var WinBox = $(".PageBox[winid='" + winid + "']");
|
||
if (WinBox.size() > 0) {
|
||
WinBox.remove();
|
||
}
|
||
//窗口关闭后的事件
|
||
var func = WinBox.attr("closeevent");
|
||
if (func != null && func != "") {
|
||
func = func.replace(/\'/g, "'").replace(/\"/g, "\"");
|
||
var event = eval("(" + func + ")");
|
||
event();
|
||
}
|
||
}
|
||
$("#screenMask").fadeOut(200, function () {
|
||
$("#screenMask").remove();
|
||
});
|
||
}
|
||
//隐藏关闭按钮
|
||
PageBox.prototype.HideClose = function () {
|
||
$("#PageBoxTitleClose").hide();
|
||
}
|
||
//关闭窗口并刷新当前打开的页面
|
||
PageBox.prototype.CloseAndRefresh = function () { //清除窗口
|
||
this.Close();
|
||
try {
|
||
//当前处于焦点的面板
|
||
var focusId = new parent.PagePanel().focus();
|
||
var frame = $("#consFame_" + focusId);
|
||
//刷新界面
|
||
var src = frame[0].contentWindow.location.href;
|
||
frame.attr("src", src);
|
||
} catch (err) {
|
||
history.go(0);
|
||
}
|
||
}
|
||
//生成遮罩层
|
||
PageBox.prototype.Mask = function () {
|
||
$("body").append("<div id=\"screenMask\"/>");
|
||
var mask = $("#screenMask");
|
||
//屏幕的宽高
|
||
var hg = document.documentElement.clientHeight;
|
||
var wd = document.documentElement.clientWidth;
|
||
mask.css({ "position": "absolute", "z-index": "10000",
|
||
"width": wd, "height": hg, top: 0, left: 0
|
||
});
|
||
var alpha = 60;
|
||
mask.css({ "background-color": "#999", "filter": "Alpha(Opacity=" + alpha + ")",
|
||
"display": "block", "-moz-opacity": alpha / 100, "opacity": alpha / 100
|
||
});
|
||
mask.fadeIn("slow");
|
||
}
|
||
//当浏览器窗口变化时
|
||
PageBox.prototype.OnReSize = function () {
|
||
var box = $(".PageBox");
|
||
if (box.size() < 1) return;
|
||
//重新设置遮罩
|
||
this.Mask();
|
||
//屏幕的宽高
|
||
//窗体的内容宽高
|
||
var hg = document.documentElement.clientHeight;
|
||
var wd = document.documentElement.clientWidth;
|
||
//设置窗口的位置
|
||
box.css("top", (hg - box.height()) / 2);
|
||
box.css("left", (wd - box.width()) / 2);
|
||
|
||
}
|
||
//当完成后，触发事件
|
||
PageBox.prototype.OnComplete = function () {
|
||
var num = 50;
|
||
var p = $(".PageBox");
|
||
//谈入效果
|
||
p.hide();
|
||
p.fadeIn();
|
||
} |