警告 dialog
dialog插件是一个屏幕居中聚焦的对话框插件,拥有
alert
和
confirm
两种形式。
代码演示
// 输出记录
function mark(text) {
$('.J-memo').append($('<p>'+text+'</p>'));
}
$('.J-dialog-0').click(function(){
$.dialog({
title:'提示:',
content:'<div style="padding:10px 0 20px;">内容区域支持HTML,方便调整你需要的样式</div>',
type:'alert',
closeBtn:true,
before:function(deferred){
mark('[before]函数触发');
},
confirm:function(deferred){
mark('[confirm]函数触发');
mark('确认按钮点击,窗口关闭');
deferred.hideDialog();
},
cancel:function(deferred){
mark('[cancel]函数触发');
mark('取消按钮点击,窗口关闭');
}
});
});
$('.J-dialog-1').click(function(){
$.dialog({
title:'提示:',
content:'<div style="padding:10px 0 20px;">内容区域支持HTML,方便调整你需要的样式</div>',
type:'confirm',
closeBtn:true,
before:function(deferred){
mark('[before]函数触发');
},
confirm:function(deferred){
mark('[confirm]函数触发');
mark('确认按钮点击,窗口关闭');
deferred.hideDialog();
},
cancel:function(deferred){
mark('[cancel]函数触发');
mark('取消按钮点击,窗口关闭');
}
});
});
$('.J-dialog-2').click(function(){
$.dialog({
title:'提示:',
content:'<div class="form-group">' +
'<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">' +
'</div>',
type:'alert',
closeBtn:true,
before:function(deferred){
mark('[before]函数触发');
},
confirm:function(deferred){
mark('[confirm]函数触发');
mark('确认按钮点击,窗口关闭');
deferred.hideDialog();
},
cancel:function(deferred){
mark('[cancel]函数触发');
mark('取消按钮点击,窗口关闭');
}
});
});
API
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
title | 设置标题 | string | - |
content | 设置内容 | string | - |
confirmText | 设置确定按钮文本 | string | ‘确定’ |
cancelText | 设置取消按钮文本 | string | ‘取消’ |
closeBtn | 是否开启关闭按钮 | boolean | true |
shadow | 是否开启阴影 | boolean | true |
type | 设置类型,可选设置为alert confirm 区别在于有无’取消按钮’ |
string | alert |
status | 设置类型,可选设置为success error warning info 或者不设 |
string | - |
before | 弹出前触发 | function | - |
confirm | 点击确认按钮后触发 | function | - |
cancel | 点击取消按钮后触发 | function | - |
注意
需要引入./src/{pc|mobile}/dialog.scss样式
如果您发现本页有什么问题,欢迎来提单 Issue : https://github.com/Janking/infinite-ui/issues