嗞嗞嗞~ 你的浏览器仿佛在对我微笑!

YDUI Touch Docs 返回首页

Dialog

1、说明

1.1、示例:http://m.ydui.org/html/dialog.html

1.2、常见移动端弹窗提示框集合类;dialog包含五个方法:confimalerttoastloadingnotify,均位于window.YDUI.dialog下;

console.log(YDUI.dialog);
// --------
{
alert: function () { },
configm: function () { },
loading: {
close: function () { },
open: function () { }
},
toast: function () { },
notify: function () { }
}

2、confim【确认提示框】

2.1、说明:用于警示用户是否继续操作或选择操作方式;

2.2、使用:YDUI.dialog.confirm([title, ]mes, opts)

参数:【[title, ]mes, opts】
title:标题【String】可选
mes:提示信息【String】必填
opts:确定按钮回调函数【Function】或按钮们【Array】必填
按钮们【Array】:
[{
     txt: String,  //按钮文字
     color: Boolean or String, //按钮颜色
     stay: Boolean,  //是否保留提示框
     callback: Function  //按钮回调函数
}]
/* 调用1: */
YDUI.dialog.confirm('标题来的', '我有一个小毛驴我从来也不骑!', function () {
/* 确定后调用 */
});

/* 调用2: */
YDUI.dialog.confirm('自定义按钮', '我有一个小毛驴我从来也不骑!', [
{
txt: '取消',
color: false, /* false:黑色 true:绿色 或 使用颜色值 */
callback: function () { /* 按钮回调 */ }
},
{
txt: '犹豫一下',
stay: true, /* 是否保留提示框 */
color: '#CCC', /* 使用颜色值 */
callback: function () { /* 按钮回调 */ }
},
{
txt: '确定',
color: true,
callback: function () { /* 按钮回调 */ }
}
]);

3、alert【普通提示框】

3.1、说明:用于反馈简短信息,不会自动消失,需要用户手动点击确认;

3.2、使用:YDUI.dialog.alert(mes[, callback])

参数:【mes[, callback]】
mes:提示信息【String】必填
callback:回调函数【Function】可选
/* 调用1: */
YDUI.dialog.alert('我有一个小毛驴我从来也不骑!');

/* 调用2: */
YDUI.dialog.alert('我有一个小毛驴我从来也不骑!', function(){
/* 关闭后调用 */
});

4、toast【结果提示框】

4.1、说明:用于反馈处理结果提示框,N毫秒后自动消失;

4.2、使用:YDUI.dialog.toast(mes, type, timeout[, callback])

参数:【mes, type, timeout[, callback]】
mes:提示信息【String】必填
type:图标类型【String】【success或error或none】必填
timeout:显示时长【Number 毫秒】【默认2000】可选
callback:回调函数【Function】可选
/* 调用1(带时间): */
YDUI.dialog.toast('鼠标不错哟', 'success', 5000, function () {
/* 关闭后调用 */
});

/* 调用2(不带时间): */
YDUI.dialog.toast('答错咯', 'error', function(){
/* 关闭后调用 */
});

/* 调用3(不带图标): */
YDUI.dialog.toast('一个没有任何图标的提示!', 'none', function(){
/* 关闭后调用 */
});

5、loading【加载中提示框】

5.1、说明:用于向服务端发送请求而等耗时操作的提示框,不会自动消失,需手动触发消失;

5.1.1、通常在ajax发送前显示,ajax结束后隐藏;

5.2、使用

5.2.1、使用1:显示loading提示框:YDUI.dialog.loading.open([text])

5.2.2、使用2:关闭loading提示框:YDUI.dialog.loading.close()

参数:【[text]】
text:显示文字【String】【默认:数据加载中】可选
/* 调用:通常在ajax发送前显示,ajax结束后隐藏;*/

$('#DOM').on('click', function() {

/* ajax发送前显示加载中提示 */
YDUI.dialog.loading.open('很快加载好了');

$.ajax({
complete: function() {

/* 结束后隐藏加载中提示 */
YDUI.dialog.loading.close();
}
});
});

6、notify【顶部提示条】

6.1、说明:用于提示用户相关信息,默认2000毫秒后自动消失,亦可点击使其消失;

6.2、使用:YDUI.dialog.notify(mes[, timeout, callback])

参数:【mes[, timeout, callback]】
mes:提示信息【String】必填
timeout:显示时长【Number 毫秒】【默认2000】可选
callback:回调函数【Function】可选
YDUI.dialog.notify('5秒后自动消失,点我也可以消失!', 5000, function(){
console.log('我走咯!');
});

7、参与讨论

7.1、有任何使用问题,请在评论中留言,也欢迎大家发表意见、建议。感谢您对YDUI的支持。