弹窗 Toast
使用弹窗需要先载入JS文件:
<script src="/static/auicss/script/aui-toast.js"></script>
使用弹窗之前需要先实例化对象 var toast = new auiToast();
,支持方法如下:
-
success(params, callback)
:显示带成功图标的弹窗 -
fail(params, callback)
:显示带错误图标的弹窗 -
custom(params, callback)
:显示自定义的弹窗 -
loading(params, callback)
:显示带loading动画的弹窗 -
hide()
:隐藏/销毁弹窗
params
参数如下:
params: {
type: '', //(可选)弹窗类型,支持success、fail、custom、loading
title: '', //(可选)弹窗内容,支持HTML代码
duration: 2000, // 关闭倒计时(单位毫秒,默认2000),type=loading或者loading方法下次参数无效
html: '', // 自定义HTML代码,仅type=custom或者custom方法下生效
}
提示
callback
方法仅 type=loading
或者 loading
方法下生效,参数如下:
function callback(res) {
res.status // 固定值success
}
示例源码
<p class="aui-text-center">TOAST</p>
<div class="aui-content-padded">
<div class="aui-btn aui-btn-block aui-btn-info" tapmode onclick="showDefault('success')">默认样式(toast)</div>
<div class="aui-btn aui-btn-block aui-btn-success" tapmode onclick="showDefault('fail')">失败(toast)</div>
<div class="aui-btn aui-btn-block aui-btn-success" tapmode onclick="showDefault('custom')">自定义</div>
<div class="aui-btn aui-btn-block aui-btn-warning" tapmode onclick="showDefault('loading')">弹出loading样式(toast)</div>
</div>
<script type="text/javascript" src="/static/auicss/script/aui-toast.js"></script>
<script>
var toast = new auiToast();
function showDefault(type){
switch (type) {
case "success":
toast.success({
title:"提交成功",
duration:2000
});
break;
case "fail":
toast.fail({
title:"提交失败",
duration:2000
});
break;
case "custom":
toast.custom({
title:"提交成功",
html:'<i class="aui-iconfont aui-icon-laud"></i>',
duration:2000
});
break;
case "loading":
toast.loading({
title:"加载中",
duration:2000
},function(ret){
console.log(ret);
setTimeout(function(){
toast.hide();
}, 3000)
});
break;
default:
// statements_def
break;
}
}
</script>