/*预加载处理区域*/ Namespace.register("U.UF.DL"); //#region 加载js css等 /* * @param {object} 对象。 如果直接加载javascript,则构建一个javascript的对象,形如{src:"/uform.js","charset": "utf-8", "type": "text/javascript"},也可以带自定义属性。 由于QQ,微博,微信的加载方式如下:均采用对象形式构建javascript链接文件 异步加载qq登录的js {"data-appid": "100584402", "charset": "utf-8", "src": "http://qzonestyle.gtimg.cn/qzone/openapi/qc-1.0.1.js" } 异步加载微博登录的js {"charset": "utf-8", "src": "http://tjs.sjs.sinajs.cn/open/api/js/wb.js?appkey=1242324937&i=" + Guid.newGuid(), "charset": "utf-8", "type": "text/javascript"} 异步加载微信登录js {"charset": "utf-8", "src": "http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js", "charset": "utf-8", "type": "text/javascript" } * @param {function} 回调函数 */ U.UF.DL.asynLoadJs = function (obj, fun) { var _head = U.selectEl("head"); //获取head元素 //创建元素 var _script = $$("script", obj); //给元素设置事件 U.UF.DL.fileElementLoaded(_script, fun); //追加元素 _head.append(_script, 0, _head[0].firstChild); return _script; } /** * 动态添加css文件 * @param {object} 获取的地址对象 例如:{ "href": /uform.css", "type": "text/css", "rel": "stylesheet" }。 * @param {function} 回调函数 *返回值出去做什么?示例在哪里? 操作人可以删除这个link */ U.UF.DL.asynLoadCss = function (obj, fun) { var _head = U.selectEl("head"); //获取head元素 //创建元素 var _link = $$("link", obj); //给元素设置事件 U.UF.DL.fileElementLoaded(_link, fun); //追加元素 _head.append(_link, 0, _head[0].firstChild); return _link; } /** * 设置异步加载文件或者iframe * @param {element} 加载的元素 ----------$("iframe", { "id": _UTP, "name": _UTP, "width": 0, "height": 0, "style": { "display": "none" }, "src": _UDE[i][1] }, _UCS)的iframe对象。 * @param {function} 回调函数 */ U.UF.DL.iframeLoad = function (obj, fun) { U.UF.DL.fileElementLoaded(obj, fun); } //iframe,script标签,link标签三种元素的加载事件设置,并且回调 /** * @param {element} 加载的元素 ----------$("iframe", { "id": _UTP, "name": _UTP, "width": 0, "height": 0, "style": { "display": "none" }, "src": _UDE[i][1] }, _UCS)的iframe对象。 * @param {function} 回调函数 _B布尔类型 */ U.UF.DL.fileElementLoaded = function (obj, fun) { //ie系列的处理 if (obj.onreadystatechange !== undefined) { //为obj添加事件处理函数 类似于onclick之类的 obj.onreadystatechange = function () { //成功加载的状态码的判断。 在ie系列下readyState == complete 的时候为加载成功 if (obj.readyState == "complete") { //加载成功后去除事件 obj.onreadystatechange = null; //没加载成功重新执行isFunction函数 if (U.UF.C.isFunction(fun)) { //等加载成功直接回调 fun.call(obj) } } } } //如果是非ie浏览器支持onload事件加载iframe、 js 、css else { //为obj添加事件处理函数 类似于onclick之类的 obj.onload = function () { //加载成功后去除事件 obj.onload = null; //没加载成功重新执行isFunction函数 if (U.UF.C.isFunction(fun)) { //等加载成功直接回调 fun.call(obj) } } } } /** * 在head头部追加样式styleText * * @param {string} style标签的内容 * 例:U.UF.DL.loadStyle=(".classname {width:100px}") *返回值:object 返回出去做什么?用途在哪里? 用户可以根据自己的需求去管理这个object 例如当用户已经加载好不需要这个style可以删除这个style */ U.UF.DL.loadStyle = function (csstext) { //Style var _head = U.selectEl("head")[0]; //获取head标签 var _style = $$("style", {}); //创建一个style标签 //如果HTML5有此属性,则直接写内容 if (_style.styleSheet) { //html5兼容 _style.styleSheet.cssText = csstext; } else { //ie兼容 //否则,直接追加孩子节点. _style.appendChild(document.createTextNode(csstext)); } _head.appendChild(_style); document.body.offsetHeight; //添加设置和执行,重绘本页面. return _style; } /* **作用:在网页开发的过程中,我们会通过Ajax去后台进行通讯交互, * 在交互的过程中,我们无法预料整个交互的过程的时间,如果这里时候页面上没有任何的提示, * 那么用户会认为页面上不具备该功能,导致用户体验非常不好,所以在我们调用后台请求的时候, * 在指定的元素地方加上一个图片loading效果,那么在加载服务器数据的时候页面用户可以看到等待进行的图片, * 这样的话大大增加了用户体验,Loding加载功能主要的作用就是能在Ajax加载页面数据的时候, * 在指定区域的添加一张loading的图片 **案例:引用uform框架U.A.Request去后台取数据的时候,有的时候网络情况不是特别好, * 那么可能会在后台查询有段时间,那么这个时候就会通过U.UF.DL.loading(element); * 去创建一个loading加载等待数据 **@param {element} el 添加要加一个图片loading效果的指定的的元素 */ U.UF.DL.loading = function (el) { //判断是否有需要添加loading效果的元素 if (el) {//如果有需要添加loading效果的元素 //判断是否添加了loading元素 // if (el.loadingel) { // return false; // } // else { // var _elparent = U.selectEl(el).Parent(); //获取添加loading效果的指定元素的父级元素 // var _width = U.selectEl(_elparent)[0].style.width || U.UF.EL.getElementRealWidth ($(_elparent)[0]) + "px";//获取添加loading效果的元素的父级元素的宽 // var _height = U.selectEl(_elparent)[0].style.height || U.UF.EL.getElementRealHeight($(_elparent)[0]) + "px"; //获取添加loading效果的元素的父级元素的高 //判断loading元素的样式display是否隐藏或者显示 if (el.loadingel) { el.loadingel["P"]++; } else { if (U.UF.EL.offsetParent(el, true) != el) { el.postion = el.style.position; el.style.position = "relative"; } var _lodingel = el.loadingel = $$("div", { "P": 0, //这个为loading元素 "style": { "width": "100%", "height": "100%", "left": 0, "top": 0, "position": "absolute", "background-color": "#fff" }//做一个遮罩层,防止里面内容显示出来 }); var _loginimg = $$("div", { "style": { "display": "block", "z-index": "1000", "width": "37px", "height": "17px", "position": "absolute" } }, _lodingel); //判断loading元素的样式display是否隐藏或者显示 var _img = $$("img", { "src": "/img/Loading.gif" }, _loginimg); //创建一个存放loading图片的img元素 el.appendChild(_lodingel); //插入loading元素 _loginimg.style.left = ($(el)[0].offsetWidth - _loginimg.offsetWidth) / 2 + 'px'; //获取需要loading元素的父级元素的宽度减去loading元素的宽度除以2 _loginimg.style.top = ($(el)[0].offsetHeight - _loginimg.offsetHeight) / 2 + 'px'; //获取需要loading元素的父级元素的高度减去loading元素的高度除以2 //_elparent.style.overflow = "hidden"; //给当前元素的父级元素添加一个样式,作为一个遮罩层 } return _lodingel; // } } } /* ** 作用:当页面加载完毕后,就移除loading效果 ** @param {element} el 当前laoding元素的整体元素 */ U.UF.DL.uploading = function (el) { if (el && el.loadingel && el.loadingel["P"]-- == 0) { //移除loading效果 U.selectEl(el.loadingel).remove(); el.style.position = el.postion; el.loadingel = null; } } //#endregion