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。

这里写图片描述

然后你点击确定或者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
    });
};

笑对现实的无奈,不能后退的时候,不再傍徨的时候,永远向前 路一直都在──陈奕迅《路一直都在》
本文出自:【沉默王二的博客

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

沉默王二

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值