CocoRoboDesktop/js/Controls/Basic/Dialog.js

//#region alert弹窗代码、confirm对话框

//UI窗体区域
Namespace.register("U.UF.UI") //窗体的命名空间

//#region 对话框

/**
* 创建对话框
* @content      {string/elemnet}  内容
* @determineFun {function}        确认回调函数
* @cancelFun    {function}        取消回调函数
*/
U.UF.UI.Confirm = U.UF.UI.confirm = function (content, determineFun, cancelFun) {
    //创建对话框主体元素
    var _confirm = $$("div", { "style": { "cssText": "width: 100%; background: rgb(255,255,255);overflow:hidden; "} });

    //创建内容区域
    var _content = $$("div", { "style": { "cssText": "width: 100%;"} }, _confirm);

    //判断内容是否为元素
    if (U.UF.C.isElement(content)) {
        //如果为元素则动态添加到对话框中
        U.selectEl(_content).append(content);
    } else {
        _content.style.cssText = "text-align: center; margin: 10px;";
        //如果为文字则修改inerHTML。
        _content.innerHTML = content || '内容';
    }
    //创建页脚部分
    var _footer = $$("div", { "style": { "cssText": "height:28px; margin:14px 0;"} }, _confirm);

    //创建确定按钮 绑定点击事件，默认点击后执行关闭窗体函数
    $$("div", {
        "style": {
            "cssText": "text-align: center; color: rgb(255,255,255); width: 92px; line-height:28px; background: rgb(48,126,208); border-radius: 5px;float: right; margin-right:29px; "
        },
        innerHTML: "确定",
        onclick: function () {
            var _bool = true;
            if (U.UF.C.isFunction(determineFun)) {
                _bool = determineFun(); //判断是否存在回调 有则执行。
            }
            if (_bool !== false) {
                U.UF.F.closeWindow(_form.form);    //关闭窗口函数
            }
        }
    }, _footer);

    //创建取消按钮 绑定点击事件，默认点击后执行关闭窗体函数
    $$("div", {
        "style": {
            "cssText": "text-align: center; color: rgb(255,255,255); width: 92px; line-height:28px; background: rgb(48,126,208); border-radius: 5px;background: rgb(170,170,170); float: right; margin-right:21px;margin-left:29px;"
        },
        "innerHTML": "取消",
        "onclick": function () {
            U.UF.C.isFunction(cancelFun) && cancelFun(); //判断是否存在回调 有则执行。
            U.UF.F.closeWindow(_form.form);  //关闭窗口函数
        }
    }, _footer);
    //调用Uform窗体创建函数将主体内容添加到窗体中
    var _form = new U.UF.UI.form(
        "提示",
        _confirm,
        {
            "style": {
                "cssText": "font-size: 14px; background: rgb(255,255,255); width: 310px; position: fixed; box-shadow: 0 0 10px 3px rgb(0,0,0); border-radius: 5px;"
            }
        },
        {
            "istop": true,
            "isenlarge": false,
            "isstretching": false,
            "isnarrow": false
        },
        {
            "style": {
                "cssText": " background: rgb(59,88,120); padding: 5px; color: rgb(255,255,255); "
            }
        });
    return _form;
}

/**
* 创建提示框
* @content     {string/elemnet}  内容
* @callBackFun {function}        回调函数
*/
U.UF.UI.Dialog = U.UF.UI.Dialog = function (content, callBackFun) {
    var _dialog = $$("div", { "style": { "cssText": "width: 100%; background: #fff; overflow:hidden; "} });  //创建提示框主体
    var _content = $$("div", { "style": { "cssText": "text-align: center; margin: 30px 20px 30px 20px; "} }, _dialog); //创建内容区域
    //判断内容是否为元素
    if (U.UF.C.isElement(content)) {
        U.selectEl(_content).append(content);   //如果为元素则动态添加到对话框中
    } else {
        _content.innerHTML = content || '内容';  //如果为文字则修改inerHTML。
    }
    //创建页脚部分
    var footer = $$("div", { "style": { "cssText": "height:45px;"} }, _dialog);
    //调用Uform窗体创建函数将主体内容添加到窗体中
    var _form = new U.UF.UI.form("提示框", _dialog,
    {
        "style": {
            "cssText": "font-size: 14px; width: 300px; background:#fff; position: fixed; top: 100px; left: 40%; box-shadow: 0 0 10px 3px black; border-radius: 5px;"
        }
    },
    null,
    {
        "style": { "cssText": "background: #3b5878; padding: 10px; color:#fff;" }
    });
    //创建确定按钮 并绑定点击函数，默认点击后执行关闭窗体函数
    $$("div", {
        "style": {
            "cssText": "text-align: center; color: #fff; width: 30%; padding: 5px; background: #307ed0; border-radius: 5px;float: right; margin: 0 12px 12px 0;"
        },
        innerHTML: "确定",  // 绑定innerHTML
        onclick: function () {
            U.UF.C.isFunction(callBackFun) && callBackFun(); //判断是否存在回调 有则执行。
            U.UF.F.closeWindow(_form.form); //关闭窗口函数
        }
    }, footer);
}


//#endregion

//#region alert

/*
创建点击确认对话框
*/
U.UF.UI.alertClick = function (content, attr) {
    //创建点击确认对话框的主体区域
    var _content = $$("div", { "class": "USBalert_text", "style": { width: "100%"} });
    //判断内容是否为元素
    if (U.UF.C.isElement(content)) {
        //如果为元素则动态添加到对话框中
        U.selectEl(_content).append(content);
    }
    else {
        $$("div", { "style": { cssText: "text-align:center;padding:10px; margin:10px auto; word-break:break-word;" }, innerHTML: content || '内容' }, _content);
    }

    //创建页脚
    var _footer = $$("div", { "class": "USBalert_onclicks", style: { height: "43px"} }, _content);
    //调用Uform窗体创建函数将主体内容添加到窗体中
    var _form = new U.UF.UI.form("提示框", _content,
        {
            "style": {
                "cssText": "font-size: 16px; width:320px; background: rgb(255,255,255);box-shadow: 0 0 10px 3px rgb(0,0,0); border-radius: 5px;"
            }
        },
        {
            "isnarrow": false,
            "isenlarge": false,
            isstretching: false
        },
        {
            "style": {
                "cssText": "background: rgb(59,88,120); padding: 10px; color: rgb(255,255,255);"
            }
        });

    //创建确定按钮 并绑定点击函数，默认点击后执行关闭窗体函数
    $$("div", { "style": { "cssText": "text-align: center; color: #fff; width: 30%;max-width:150px; padding: 5px; background: #307ed0; border-radius: 5px;float: right; margin: 0 12px 12px 0;" }, innerHTML: "确定", onclick: function () { U.UF.F.closeWindow(_form.form); } }, _footer);
}

/**
* 创建对话框
*/
U.Alert = U.alert = function (c, t) {
    !t ? t = 3000 : "";
    var bg = $$("div", {
        "style": {
            "cssText": "padding: 12px 25px 12px 25px;font-size: 16px;max-width:300px;min-width:100px;color: rgba(255,255,255,1);background: rgba(0,0,0,0.75);border-radius: 10px;position: fixed;top:20%;left:0px;right:0px;margin:0px auto;text-align:center; word-break: break-word; "
            //white-space: nowrap; -o-text-overflow: ellipsis; text-overflow: ellipsis; 
        },
        innerHTML: c
    }, document.body);
    U.UF.F.topWindow(bg);
    setTimeout(function () {
        bg.parentNode.removeChild(bg);
    }, t);

}
//#endregion

//#endregion