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

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、调用

普通按钮(宽度自适应)

具体使用示例请参照对照右侧代码。

<div class="m-button">
<input type="button" class="btn-block btn-primary" id="J_Confirm" value="Confirm"/>
<input type="button" class="btn-block btn-primary" id="J_ConfirmCustom" value="Confirm->Custom"/>
<input type="button" class="btn-block btn-hollow" id="J_Alert" value="Alert"/>
<input type="button" class="btn-block btn-danger" id="J_ToastS" value="Toast->Success"/>
<input type="button" class="btn-block btn-danger" id="J_ToastE" value="Toast->Error"/>
<input type="button" class="btn-block btn-danger" id="J_ToastN" value="Toast->None"/>
<input type="button" class="btn-block btn-hollow" id="J_Loading" value="Loading"/>
<input type="button" class="btn-block btn-hollow" id="J_Notify" value="Notify"/>
</div>
<script>
!function (win, $) {
var dialog = win.YDUI.dialog;

/* 普通确认框 */
$('#J_Confirm').on('click', function () {
dialog.confirm('选填标题', '我有一个小毛驴我从来也不骑!', function () {
dialog.toast('你点了确定', 'none', 1000);
});
});

/* 自定义按钮确认框 */
$('#J_ConfirmCustom').on('click', function () {
dialog.confirm('自定义按钮', '我有一个小毛驴我从来也不骑!', [
{
txt: '取消',
color: false, /* false:黑色 true:绿色 或 使用颜色值 */
callback: function () {
dialog.toast('你点了取消', 'none', 1000);
}
},
{
txt: '犹豫一下',
stay: true, /* 是否保留提示框 */
color: '#CCC', /* 使用颜色值 */
callback: function () {
dialog.toast('别犹豫了', 'none', 1000);
}
},
{
txt: '确定',
color: true,
callback: function () {
dialog.toast('你点了确定', 'none', 1000);
}
}
]);
});

/* 普通提示框*/
$('#J_Alert').on('click', function () {
dialog.alert('消息一出,休想滚动屏幕【移动终端】!');
});

/* 正确提示框 */
$('#J_ToastS').on('click', function () {
dialog.toast('鼠标不错哟!', 'success', 1000);
});

/* 错误提示框 */
$('#J_ToastE').on('click', function () {
dialog.toast('别乱点啊!', 'error', 1000, function () {
dialog.alert('给你一次重来的机会!');
});
});

/* 不带图标提示框 */
$('#J_ToastN').on('click', function () {
dialog.toast('一个没有任何图标的提示!', 'none', 1000);
});

/* 加载中提示框 */
$('#J_Loading').on('click', function () {
dialog.loading.open('很快加载好了');
setTimeout(function () {
dialog.loading.close();/* 移除loading */
}, 2000);
});

/* 顶部提示框 */
$('#J_Notify').on('click', function () {
dialog.notify('5秒后自动消失,点我也可以消失!', 5000, function(){
console.log('我走咯!');
});
});
}(window, jQuery);
</script>

3、confim【确认提示框】

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

3.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 () { /* 按钮回调 */ }
}
]);

4、alert【普通提示框】

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

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

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

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

5、toast【结果提示框】

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

5.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(){
/* 关闭后调用 */
});

6、loading【加载中提示框】

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

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

6.2、使用

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

使用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();
}
});
});

7、notify【顶部提示条】

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

7.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('我走咯!');
});