//#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