CocoRoboDesktop/js/UForm/DynamicLoad.js

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