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});
};

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

Bootstrap智能消息提示框相关推荐

HTML微博浮动代码,jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
本文实例讲述了jQuery实现仿新浪微博浮动的消息提示框.分享给大家供大家参考.具体如下: 这是一款jQuery实现的仿新浪微博新消息提示框效果,支持智能浮动定位框,新浪微博用来提示消息时候的智能定位 ...
QGC注释消息提示框
消息提示框:有时显示时覆盖想要看的界面,可注释!
JS的三种消息提示框alert confirm prompt
首先来看看alert的效果: 代码为: $(function(){$("#quit").click(quit); })function quit(){alert("消息提 ...
消息提示框-事件冒泡
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset=" ...
flutter Toast消息提示框
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,即是折腾每一天. 本文章将讲述: 1.在 flutter 跨平台开发中,使用 Dart 实现 Toast 消息提示框效果 2.Overl ...
window.createPopup()用法以及短消息提示框代码
一.在做一个portal项目时,用户要求在门户首页上的待办信息要有明确的提示,且在浏览器最小化的情况下,当有新的待办信息时,也要做提示.用了alert方法.或者用div的方法都很难实现"在浏 ...
html如何设置提示收到消息,从零开始实现一个消息提示框
引言消息提示框在实际应用场景当中比较常见,最常用的就是element ui的消息提示框,我们通常都是直接使用它们,但是我们有没有尝试过去探究其实现原理,并自己动手实现呢?为了提升我们的个人能力和竞争 ...
unity 弹窗提示_【原创】Unity3D 消息提示框
本文永久地址:http://www.omuying.com/article/60.aspx,[文章转载请注明出处!] 消息提示框,大家都并不陌生,他们的主要作用是给予用户提示,用 NGUI 来做消息提 ...
uniapp 消息提示框
uni.showToast(OBJECT) 显示消息提示框. OBJECT参数说明参数类型必填说明平台差异说明 title String 是提示的内容,长度与 icon 取值有关. i ...

Bootstrap智能消息提示框

第一关

第二关

第三关

Bootstrap智能消息提示框相关推荐

最新文章

热门文章