Bootstrap智能消息提示框

简介: Bootstrap智能消息提示框

Bootstrap智能消息提示框。


“我觉得操作成功后,需要一个弹出提示框”,客户说。

“需要吗?我觉得没必要,错误的时候提示,成功时自动跳转就行了!”,我弱弱的答。

“你那样不人性化,听我的,加一个”,客户继续说。

“那好吧!”我继续弱弱的答。


第一关


其实客户的要求,一点都难不倒我,看我的:


ajaxDoneSuccess("订单已支付", "/mem/initDeal/2");


这串代码就是把消息传递到前端。

function tabAjaxDone(json) {
    YUNM.debug("tab ajaxdone回调函数");
    YUNM.ajaxDone(json);
    if (json[YUNM.keys.statusCode] == YUNM.statusCode.ok || json[YUNM.keys.statusCode] == YUNM.statusCode.info) {
        var msg = json[YUNM.keys.message];
        // 弹出消息提示
        YUNM.debug(msg);
        var thenfunc = null;
        if ("forward" == json.callbackType) {
            thenfunc = function() {
                if (json.forwardURL) {
                    location.href = json.forwardURL;
                }
            };
        }
        $.showInfo(msg, thenfunc);
    }
}

1. 页面回调函数执行时,获取服务端传递的消息,同时将后续操作加入到thenfunc中。

2. 紧接着,通过showInfo函数将消息输出。

3. 你想看到showInfo方法,没问题。

$.showInfo = function(str, func) {
    $.weeboxs.open(str, {
        boxid : 'yunm_info_box',
        contentType : 'text',
        showButton : true,
        showCancel : false,
        showOk : true,
        title : '提示 ',
        type : 'wee',
        onclose : func
    });
};


打开一个weebox弹出框,然后弹出框关闭的时候执行后续函数func。

image.png



然后你点击确定或者X号就会执行回调函数跳转。


第二关


“你这不够人性化,不是所有的执行成功都想弹出消息。”客户说。

“好,明白”,我答。


这依然很简单:


ajaxDoneSuccess("", "/mem/initDeal/2");
if (msg) {
$.showInfo(msg, thenfunc, YUNM._set.timeout);
} else {
    thenfunc();
}

第三关


“你这还不够人性化,我不想点击确定、关闭,就能够跳转。”客户说。

“好,你想它多长时间自动关闭,才能让你’dont make me wait’”,我喃喃道。

“什么?”,客户把头朝向我,若有所思的问。

“哦,没啥,一会就好”,我懒得给他啰嗦。


这也没啥,不就是加一个timeout嘛,weebox本身就有这个参数。


if (msg) {
    $.showInfo(msg, thenfunc, YUNM._set.timeout);
} else {
    thenfunc();
}
$.showInfo = function(str, func, timeout) {
    $.weeboxs.open(str, {
        boxid : 'yunm_info_box',
        contentType : 'text',
        showButton : true,
        showCancel : false,
        showOk : true,
        title : '提示 ' + timeout + "秒后自动关闭",
        type : 'wee',
        onclose : func,
        timeout : timeout
    });
};
相关文章
|
8月前
|
机器学习/深度学习 JSON 移动开发
详细解读BootStrap智能表单系列八表单配置json详解
详细解读BootStrap智能表单系列八表单配置json详解
49 0
|
前端开发
bootstrap 组件之分页 提示框 提示工具组件
bootstrap 组件之分页 提示框 提示工具组件
|
前端开发 JavaScript
Bootstrap教程(15)--警告框、弹出框、工具提示框
本文目录 1. 概述 2. 警告框 2.1 普通警告框 2.2 可关闭警告框 3. 弹出框 3.1 弹出框初始化 3.2 弹出框显示 4. 工具提示框 4.1 工具提示框初始化 4.2 工具提示框显示 5. 小结
574 0
Bootstrap教程(15)--警告框、弹出框、工具提示框
|
JSON 前端开发 数据格式
Bootstrap智能消息提示框
版权声明:欢迎转载,请注明沉默王二原创。 https://blog.csdn.net/qing_gee/article/details/49155557 Bootstrap智能消息提示框。
916 0
|
JavaScript 前端开发 API
JS组件系列——Bootstrap寒冬暖身篇:弹出框和提示框效果以及代码展示
原文:JS组件系列——Bootstrap寒冬暖身篇:弹出框和提示框效果以及代码展示 前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑。
1292 0
|
7月前
|
开发框架 前端开发 JavaScript
循序渐进BootstrapVue,开发公司门户网站(1)---基于Bootstrap网站模板构建组件界面
循序渐进BootstrapVue,开发公司门户网站(1)---基于Bootstrap网站模板构建组件界面
N..
|
9月前
|
开发框架 前端开发 UED
Bootstrap的CSS组件
Bootstrap的CSS组件
N..
86 0
|
9月前
|
前端开发
bootstrap组件的案例代码
bootstrap组件的案例代码