/*预加载处理区域*/
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