Bootstrap智能消息提示框
2015-10-16 01:32
555 查看
Bootstrap智能消息提示框。
“我觉得操作成功后,需要一个弹出提示框”,客户说。
“需要吗?我觉得没必要,错误的时候提示,成功时自动跳转就行了!”,我弱弱的答。
“你那样不人性化,听我的,加一个”,客户继续说。
“那好吧!”我继续弱弱的答。
这串代码就是把消息传递到前端。
1. 页面回调函数执行时,获取服务端传递的消息,同时将后续操作加入到thenfunc中。
2. 紧接着,通过showInfo函数将消息输出。
3. 你想看到showInfo方法,没问题。
打开一个weebox弹出框,然后弹出框关闭的时候执行后续函数func。
![](https://img-blog.csdn.net/20151015172315661)
然后你点击确定或者X号就会执行回调函数跳转。
“好,明白”,我答。
这依然很简单:
“好,你想它多长时间自动关闭,才能让你’dont make me wait’”,我喃喃道。
“什么?”,客户把头朝向我,若有所思的问。
“哦,没啥,一会就好”,我懒得给他啰嗦。
这也没啥,不就是加一个timeout嘛,weebox本身就有这个参数。
笑对现实的无奈,不能后退的时候,不再傍徨的时候,永远向前 路一直都在──陈奕迅《路一直都在》
本文出自:【沉默王二的博客】
“我觉得操作成功后,需要一个弹出提示框”,客户说。
“需要吗?我觉得没必要,错误的时候提示,成功时自动跳转就行了!”,我弱弱的答。
“你那样不人性化,听我的,加一个”,客户继续说。
“那好吧!”我继续弱弱的答。
第一关
其实客户的要求,一点都难不倒我,看我的: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初试进度条
- Bootstrap 3.3.4 发布,Web 前端 UI 框架
- 基于Bootstrap的网页设计实例
- 精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
- 在ASP.NET使用JavaScript显示信息提示窗口实现原理及代码
- jQuery实现信息提示框(带有圆角框与动画)效果
- BootStrap实现带有增删改查功能的表格(DEMO详解)
- 通过Tabs方法基于easyUI+bootstrap制作工作站
- jquery插件珍藏(图片局部放大/信息提示框)
- BootStrap栅格系统、表单样式与按钮样式源码解析
- javascript实现确定和取消提示框效果
- jfinal与bootstrap的登录跳转实战演习
- 关闭浏览器窗口弹出提示框并且可以控制其失效
- 使用css实现全兼容tooltip提示框
- js实现右下角提示框的方法
- bootstrap data与jquery .data
- Bootstrap的图片轮播示例代码
- 解决bootstrap中modal遇到Esc键无法关闭页面
- 基于Bootstrap+jQuery.validate实现Form表单验证
- PHP 实现类似js中alert() 提示框