//#region 窗体
//UI窗体区域
Namespace.register("U.UF.UI") //窗体的命名空间
//#region 窗体
/** 初始化uform窗体,创建一个窗体，调用方式如下
* new new U.UF.UI.form(
* "测试内容",
* "中间内容",
* { "style": { "width": "570px", "height": "80%", "maxHeight": "700px"} },
* );
* @param string 头部标题 必填
* @param string|element 中间区域的内容 必填
* @param object 窗体的属性 {id :"1", style:{"width":"100px", "height":"100px"}} 选填 有默认的属性，原函数有注释
* @param object 窗体功能的属性 { istop: true, isdrag: true, isstretching:true,isenlarge:true,isnarrow:true,isclose:true } 选填
* @param object 头部的属性 {style:{"width":"100px"}} 选填 有默认的属性，原函数有注释
* @param object 内容的属性 { style:{"height":"100px"}} 选填 有默认属性，原函数有注释
* @param object 关闭、放大、缩小按钮区域的属性设置 { "style":{"left":"100px"}} 选填，有默认属性，原函数有注释
* @param element 窗体追加到制定的元素 选填 有默认的属性，原函数有注释
*/
U.UF.UI.form = function (title, content, formattr, formfun, headattr, contentattr, headbottomattr, parentel) {
var _this = this;
//所有的窗体中找到是否已经创建的窗体
if (formattr && U.UF.UI.form.allForm[formattr.id]) {
var _this = U.UF.UI.form.allForm[formattr.id]; //得到原来的窗体
}
//初始化未赋值，用到的变量
else {
//设置窗体唯一的识别
this.id = formattr && formattr.id ? formattr.id : Guid.newGuid();
//初始化成功后添加到所有窗体管理的对象中,以便于用户查找窗体和管理
U.UF.UI.form.allForm[this.id] = this;
}
_this.form; //窗体
_this.header; //头部
_this.middle; //中间区域
_this.title = title; //窗体的标题
_this.content = content; //需要插入的元素，包含div和iframe等元素,以前站外应用的功能是靠这个方式去实现的
_this.formattr = formattr; //窗体的属性
_this.headattr = headattr; //头部的属性
_this.contentattr = contentattr; //内容的属性
_this.headbottomattr = headbottomattr; //头部功能区域整体的属性设置
//下面是用户功能处理包含是否允许一直置顶、是否允许拖动、是否拉伸、是否允许放大、是否允许缩小、是否允许关闭
//如果用户没有传入功能处理
if (formfun == null) {
formfun = {}; //初始化一个功能处理类
}
_this.istop = null;
if (formfun.istop != null) { //是否允许一直置顶
_this.istop = formfun.istop;
}
_this.isdrag = true;
if (formfun.isdrag != null) { //是否允许拖动
_this.isdrag = formfun.isdrag; //是否允许拖动
}
_this.isstretching = true;
if (formfun.isstretching != null) { //是否拉伸
_this.isstretching = formfun.isstretching;
}
_this.isenlarge = true;
if (formfun.isenlarge != null) { //是否允许放大
_this.isenlarge = formfun.isenlarge;
}
_this.isnarrow = true;
if (formfun.isnarrow != null) { //是否允许缩小
_this.isnarrow = formfun.isnarrow; //是否允许缩小
}
_this.isclose = true;
_this.closecallback = formfun.closecallback; //关闭回调
if (formfun.isclose != null) { //是否允许关闭
_this.isclose = formfun.isclose; //是否允许关闭
}
_this.parentel = parentel || document.body; //窗体添加到制定的元素处理
_this.create(); //重新添加处理
return _this; //返回处理
}
//所有给给创建的窗体管理
U.UF.UI.form.allForm = {};
//窗体的方法
U.UF.UI.form.prototype = {
/** 初始化uform窗体
*/
create: function () {
var i, //用于循环
_resizefun,
_formel, //窗体元素
_headel, //窗体头部元素
_contentel, //内容区域的元素
_contentchildel, //内容区域的
_stretchingel, //拉伸元素
_stretchinginfo, //拉伸的信息
_headbottom, //头部按钮区域
_enlargeel, //放大按钮
_mousedown, //
_formattr = this.formattr || {}, //窗体属性
_headattr = this.headattr || {}, //头部属性
_contentattr = this.contentattr || {}, //内容的属性
_replaceel = U.UF.UI.form.allForm[_formattr.id] ? U.UF.UI.form.allForm[_formattr.id].form : null //得到之前创建的窗体，如果窗体存在，那么下面创建后直接替换
;
//窗体的统一属性设置，默认属性
if (_formattr.style) {
_formattr.style.cssText = _formattr.style.cssText || "";
_formattr.style.cssText = "width: 70%; position: fixed; border: 1px solid #444; background-color: #fff; z-index: 10; border-radius: 1px; overflow: hidden; -moz-box-shadow:0 0 30px 5px #555; -webkit-box-shadow:0 0 30px 5px #555; box-shadow:0 0 30px 5px #555; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius:5px;" + _formattr.style.cssText;
} else {
_formattr.style = {
cssText: "width: 70%; position: fixed; border: 1px solid #444; background-color: #fff; z-index: 10; border-radius: 1px; overflow: hidden; -moz-box-shadow:0 0 30px 5px #555; -webkit-box-shadow:0 0 30px 5px #555; box-shadow:0 0 30px 5px #555; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius:5px;"
};
}
_formattr.close = U.UF.C.apply(this, function () { //关闭窗体;
U.UF.F.closeWindow(this.form); //关闭窗体
});
_formattr.usform = "true"; //设置窗体的属性，作为窗体的识别，有助于调用的用户通过js找到所有的窗体
_formattr.id = _formattr.id || ""; //窗体的id
_formattr.style = _formattr.style || {}; //窗体的样式
if (_formattr.onresize) {
_resizefun = _formattr.onresize;
_mousedown = _formattr.onmousedown;
_formattr.onresize = U.UF.C.apply(this, function () { //当窗体大小发生变化的处理
this.size(); //大小变化处理
if (_resizefun) {
_resizefun(); //大小变化回调
}
});
_formattr.onmousedown = U.UF.C.apply(this, function () {
//窗体点击置顶的处理
if (this.istop !== false) {
this.top(); //大小变化处理
}
if (_mousedown) {
_mousedown(); //大小变化回调
}
});
} else if (_formattr.onresize !== false) {
_formattr.onresize = U.UF.C.apply(this, function () { //当窗体大小发生变化的处理
this.size(); //大小变化处理
});
}
//创建大窗体，设置窗体属性
var _formel = $$("div", this.formattr);
//判断是否允许一直置顶
if (this.istop === true) {
_formel.style.zIndex = "9999";
_formel["__top__"] = "false"; //设置不允许点击切换置顶
} else if (this.istop === false) {
_formel["__top__"] = "false"; //设置不允许点击切换置顶
}
this.form = _formel; //窗体全局变量设置
//如果用户设置了false，那么就不加载头部
if (this.title !== false) {
//窗体头部属性统一设置
if (_headattr.style) {
_headattr.style.cssText = _headattr.style.cssText || "";
_headattr.style.cssText = "text-indent: 10px; color: White; line-height: inherit; font-size: 14px; height: 30px; line-height: 30px; background-color: #2967A7; overflow: hidden; color: White; font-size: 14px; overflow: hidden; " + _headattr.style.cssText;
} else {
_headattr.style = {
cssText: "text-indent: 10px; color: White; line-height: inherit; font-size: 14px; height: 30px; line-height: 30px; background-color: #2967A7; overflow: hidden; color: White; font-size: 14px; overflow: hidden; "
}
}
//设置头部有拖拽事件
if (this.isdrag) { //判断是否允许拖动窗体
_headattr.onmousedown = function () {
U.UF.F.drag(_formel); //拖动事件调用
};
}
//创建头部区域
_headel = $$("div", _headattr, _formel);
//如果是字符串的处理
if (U.UF.C.isString(this.title)) {
_headel.innerHTML = this.title;
}
//如果中间区域是元素的处理
else if (U.UF.C.isElement(this.title)) {
_headel.appendChild(this.title); //添加所选元素
}
this.header = _headel; //设置中间的全局变量
}
//创建中间
_contentel = $$("div", { "style": { "cssText": "width: 100%; height:100%; position: relative;" } }, _formel);
//中间的内容
_contentattr.usbody = "true";
//窗体头部属性统一设置
if (_contentattr.style) {
_contentattr.style.cssText = _contentattr.style.cssText || "";
//_contentattr.style.cssText = "text-align: left; overflow: auto;" + _contentattr.style.cssText;
_contentattr.style.cssText = "text-align: left; overflow: hidden;" + _contentattr.style.cssText;
} else {
_contentattr.style = {
cssText: "text-align: left; overflow: auto;"
};
}
//创建中间内容元素
_contentchildel = $$("div", _contentattr, _contentel);
//如果是字符串的处理
if (U.UF.C.isString(this.content)) {
_contentchildel.innerHTML = this.content;
}
//如果中间区域是元素的处理
else if (U.UF.C.isElement(this.content)) {
_contentchildel.appendChild(this.content); //添加所选元素
}
this.middle = _contentchildel; //中间的内容
//在头部不存在的情况下，设置中间内容可以拖动
if (this.title === false && this.isdrag) {
_contentel.onmousedown = function () {
U.UF.F.drag(_formel); //拖动事件调用
};
}
//设置拉伸处理
if (this.isstretching !== false) {
//创建窗体拉伸
_stretchingel = $$("div", { style: { "cssText": "display: block;" } }, _formel);
//拉伸的信息 key代表样式的结尾,value代表拉伸的方向
_stretchinginfo = {
"top": "cursor: n-resize; left: 0px; top: 0px; width: 100%; height: 5px;",
"rightTop": "cursor: ne-resize; right: -2px; top: -2px; width: 12px; height: 12px;",
"leftTop": "cursor: nw-resize; top: 0px; left: 0px; width: 12px; height: 12px;",
"left": "cursor: w-resize; left: 0px; top: 0px; width: 5px; height: 100%;",
"right": "cursor: e-resize; right: 0px; top: 0px; width: 5px; height: 100%;",
"bottom": "cursor: s-resize; left: 0px; bottom: 0px; width: 100%; height: 5px;",
"leftBottom": "cursor: sw-resize; left: -2px; bottom: -2px; width: 12px; height: 12px;",
"rightBottom": "cursor: se-resize; right: -2px; bottom: -2px; width: 12px; height: 12px;"
}
//循环创建拉伸条，包含上、下、左、右、上左、下左、上右、下右
for (i in _stretchinginfo) {
$$("div", {
"style": {
"cssText": "position: absolute; overflow: hidden; display: block; z-index: 10;" + _stretchinginfo[i]
},
"onmousedown": U.UF.C.closure(function (scope, typename) {
//拉伸函数的调用
U.UF.F.stretching(_formel, typename, U.UF.C.apply(scope, scope.size));
}, [this, i])
}, _stretchingel);
}
}
//头部功能区域
if (this.title !== false) {
_headbottom = $$("div", {
"style": { "cssText": "position: absolute; top: 3px; right: 0px; width: 80px; display: table-cell; vertical-align: middle;" }
}, _formel);
}
if (this.isclose !== false) {
//关闭窗体的按钮
$$("div", {
"style": {
"cssText": "background-image:url(../../../img/close.png); _background-image:url(/img/close.png);width: 14px; height: 14px; background-repeat: no-repeat; background-size: 100%; float: right; margin-right: 5px;margin-top:6px; cursor: pointer;"
},
"title": "点击关闭",
"onmousedown": U.UF.EV.stopBubble,
"onclick": U.UF.C.apply(this, function () {
U.UF.F.closeWindow(this.form); //调用窗体关闭函数
try {
//关闭任务栏处理
if (U.MD.D.T.taskbar.close) {
U.MD.D.T.taskbar.close({ "forms": _formel });
//U.MD.N.urlWrite("", "智慧课堂平台");
}
} catch (e) { }
//回调处理
if (U.UF.C.isFunction(this.closecallback)) {
this.closecallback();
}
})
}, _headbottom);
}
//是否允许放大
if (this.isenlarge !== false) {
//放大按钮
_enlargeel = $$("div", {
"style": {
"cssText": "background-image:url(../../../img/max.png); _background-image:url(/img/max.png); background-size: 100%; float: right; margin-right: 10px; width: 17px; height: 17px; cursor: pointer;margin-top: 4px;"
},
"title": "最大化",
"onmousedown": U.UF.EV.stopBubble,
//最大化点击事件处理
"onclick": function () {
U.UF.F.windowZooming(_formel); //调用窗体最大化函数
}
}, _headbottom);
//如果有head头部的处理
if (_headel) {
//头部双击放大缩小处理处理
_headel.ondblclick = U.UF.C.apply(_headel, function () {
//判断双击的元素是否在头部导航上，否则如果头部上有其他的按钮什么的双击了，也会触发放大方法
if (event.srcElement == this || U.UF.EL.isChild(this, event.srcElement)) {
_enlargeel.onclick(); //放大的处理
}
});
}
}
//是否允许最小化
if (this.isnarrow !== false) {
//最小化的按钮处理
$$("div", {
"style": {
"cssText": "background-image:url(../../../img/min.png); _background-image:url(/img/min.png);background-size: 100%; float: right; margin-right: 10px; margin-top: 3px; width: 20px; height: 20px; cursor: pointer;background-repeat: no-repeat;"
},
"title": "最小化",
"onmousedown": U.UF.EV.stopBubble,
"onclick": function () {
U.UF.F.windowMinimize(_formel); //窗体最小化处理
}
}, _headbottom);
}
//如果窗体已经创建，那么直接替换
if (_replaceel && _replaceel.parentNode != null) {
_replaceel.parentNode.replaceChild(_formel, _replaceel);
}
//元素添加到制定的元素中
else {
this.parentel.appendChild(_formel);
}
//如果没有设置top和left那么居中弹出
if (_formel.style.top == "" && _formel.style.left == "" && _formel.style.right == "" && _formel.style.bottom == "") {
//居中置顶弹出
U.UF.F.windowTopCenter(_formel);
}
//否则置顶
else {
U.UF.F.topWindow(_formel);
}
//初始化的时候默认设置大小
this.size();
},
/** 窗体每一次点击置顶
*/
top: function () {
U.UF.F.topWindow(this.form); //点击置顶的处理
},
/** 窗体大小处理
*/
size: function () {
var _headheight = 0; //head头部的高度
//如果存在head头部，那么获取head头部处理
if (this.header) {
_headheight = this.header.clientHeight;
}
//设置窗体content区域大小设置
if (this.header) {
this.middle.style.height = this.form.clientHeight - this.header.clientHeight + "px";
} else {
this.middle.style.height = this.form.clientHeight + "px";
}
}
}
/** 窗体大小处理
*/
U.UF.UI.form.windowResize = function () {
var i,
_style,
_bodywidth = US.width, //获取原本在窗体大小没有变化前的width
_bodyheight = US.height, //获取原本在窗体大小没有变化前的height
_sizeinfo, //大小信息
_width, //长度
_height, //高度
_formel, //窗体元素
_forms = U.UF.UI.form.allForm //获取所有的窗体
;
//循环所有的窗体
for (i in _forms) {
_formel = _forms[i].form; //获取窗体的处理
if ($(_formel).css("display") != "none") { //判断窗体是否隐藏
_style = {}; //设置位置
_width = U.selectEl(_formel).css("width"); //获取窗体的长
_height = U.selectEl(_formel).css("height"); //获取窗体的宽
//计算位置，如果有百分比，则按照百分比的方式进行计算，否则，得到百分比。
_width = _width.indexOf("%") > -1 ? _width.toInt() / 100 : _formel.offsetWidth / _bodywidth;
_height = _height.indexOf("%") > -1 ? _height.toInt() / 100 : _formel.offsetWidth / _bodyheight;
//设置位置,如果没有右对齐，则设置左对齐
if (_formel.style.right == "" || _formel.style.right == "auto") {
_style.left = _formel.offsetLeft + (document.body.offsetWidth - _bodywidth) * ((1 - _width) / 2) + "px";
}
//如果没有下对齐，则设置上对齐
if (_formel.style.bottom == "" || _formel.style.bottom == "auto") {
_style.top = _formel.offsetTop + (document.body.offsetHeight - _bodyheight) * ((1 - _height) / 2) + "px";
}
//设置值
U.selectEl(_formel).addAttrArray({ "style": _style });
}
}
}
/** 关闭所有的窗体
*/
U.UF.UI.form.closeWindows = function () {
var i;
for (i in U.UF.UI.form.allForm) {
if (U.UF.UI.form.allForm[i].isclose) {
U.UF.UI.form.allForm[i].form.close();
}
}
}
//#endregion
//#endregion