一、弹框效果演示和对应代码示意
new Dialog().alert('操作成功！', { type: 'success' });
$('#xxx').click(function() {
var elBtn = $(this);
new Dialog().confirm('\
<h6>您确定要停用所选的成员吗？</h6>\
<p>成员停用后，可以在停用成员列表中重新启用。</p>'
, {
buttons: [{
events: function(event) {
elBtn.disabled();
event.data.dialog.remove();;
}
}, {}]
});
});
new Dialog({
title: '普通文本框',
content: '我是一段HTML，啦啦啦啦啦',
buttons: [{
value: '知道啦！'
}]
});
var dialog = new Dialog({
title: '中间高度自适应的容器',
content: '<div class="bg-white p20">'+ (function() {
var html = '';
for (var i=0; i<100; i++) {
html = html + '<img src="http://mat1.gtimg.com/www/mb/images/face/'+ i +'.gif" class="db">';
}
return html;
})() +'</div>',
buttons: [{}]
});
// 拉伸相关CSS见如下
dialog.el.dialog.addClass('ui-dialog-auto');
.ui-dialog-auto {
width: 600px; max-height: 1000px; /*min-height: 400px;*/
position: absolute; top: 20px; bottom: 30px; left: 50%;
margin: auto 0 auto -300px;
}
.ui-dialog-auto .ui-dialog-footer {
position: absolute;
left: 0; bottom: 0; right: 0;
}
.ui-dialog-auto .ui-dialog-body {
position: absolute; left: 0; right: 0;
top: 50px; bottom: 90px;
padding: 0 0 0 25px;
overflow: auto;
}
new Dialog().ajax({ url: 'common/cgi/example.html', dataType: 'html' }, { title: '请求html代码', buttons: [{}] });
var dialog = new Dialog({
width: 700
}).ajax({
url: 'common/cgi/get_text.json'
}, {
title: '请求JSON代码',
content: function(json) {
if (json.ret == 0 && json.data) {
return (function() {
var html = '<div class="bg-white">';
$.each(json.data.item, function(index, obj) {
html = html + '<div class="mt15 mb15"><p>'+ obj.text +'</p><p class="f14 gray">'+ obj.create_time +'</p></div>';
});
html += '</div>';
return html;
})();
} else {
dialog.alert('后台出错了，联系管理员！').unloading(0);
}
},
buttons: [{}]
});
new Dialog().ajax({ url: 'common/cgi/xxx.json' });
new Dialog().ajax({
url: 'common/cgi/parse_error.json'
});
var dialog = new Dialog().ajax({ url: 'common/cgi/get_detail.json' }, { title: '后台出错演示', content: function(json) { if (json.ret == 1 && json.msg) { var msg = '<h6>友情提示</h6><p>' + json.msg + '</p>'; // 可以new构造一个新的alert弹框 /*new Dialog({ onRemove: function() { dialog.remove(); } }).alert(msg);*/ // 也可以直接使用alert弹框, unloading()值为0，错误提示不需要动画 dialog.alert(msg).unloading(0); } }, buttons: [{}] });
new Dialog().loading();
下拉：
var domDialog;
$('#domDialog').click(function() {
if (domDialog) {
domDialog.show();
} else {
domDialog = new Dialog({
title: 'jQuery包装器对象载入事件测试',
content: $('#domDialogTarget').show(),
buttons: [{},{}]
});
}
});
iframe内弹框测试
// 母页面代码-全局暴露 window.globalDialog = Dialog; // iframe页面代码 var text = ''; // 是否在iframe内 if (window.location != window.parent.location && window.parent.globalDialog) { Dialog = window.parent.globalDialog; text = 'iframe外'; } $('#alertDialog').click(function() { new Dialog({ onShow: function() { console.log(this.el.body.text()); } }).alert(text + '操作成功！', { type: 'success' }); });
二、语法和API详细说明
- 概述
弹框扩展(
alert,confirm,ajax,loading, ...)也集合在了Dialog组件中。弹框和后面半透明的遮罩层属于同一个容器，更方便控制。弹框的水平居中、以及上下约2:3的定位均是CSS完成，兼容IE7+浏览器。支持弹框的上下拉伸实现，需要特异处理。 - 基本使用
基本的弹框使用方法为：
new Dialog(options);
也支持jquery风格用法：
$.dialog(options);
两种用法返回值都是弹框实例，一模一样，API也是一样的。
其中
options是可选参数，支持的参数包括：参数名称 支持类型 默认值 释义 title String ''表示弹框的标题。 content String|Object|Function ''表示弹框显示的主体内容。可以是字符串，或者是jQuery包装器对象，也可以是返回特定字符串或对象的函数。不同的类别，默认弹框关闭触发的方法不一样，包装器对象 hide(), HTML内容remove().width* String|Number 'auto'标题弹框的主体宽度。本组件宽度自动自适应。因此建议还是设置弹框内容的宽度实现需要的效果。 buttons Array []弹框的按钮元素。默认是空数组，表示没有按钮。每个按钮为一个 {}对象，含一些可选参数，这里空间狭小，具体释义见表格下面内容。onShow* Function $.noop 弹框显示时候的回调。this为当前弹框实例对象. onHide* Function $.noop 弹框隐藏时候的回调。this为当前弹框实例对象. onRemove* Function $.noop 弹框移除时候的回调。this为当前弹框实例对象. 备注：后面跟随*的参数，为
Dialog()方法独有的可选参数。其他扩展方法，无法重置。按钮对象的参数如下：{ type: '', value: '', events: {} }其中：
参数名称 支持类型 默认值 释义 type String 'primary'或''表示按钮的类型。和Button.css中按钮类名对应。默认值与按钮对象在 buttons参数数组中的位置有关。第一个按钮对象，默认值是'primary'，也就是蓝色按钮，也就是如果你的弹框只有一个按钮，默认是蓝色。之后的按钮，默认则是白色按钮，如白色的“取消”按钮。value String '确定'或'取消'表示按钮的文字内容。默认值与按钮对象在 buttons参数数组中的位置有关。第一个按钮对象，默认值是'确定'， 后面的按钮默认值是'取消'。events Object|Function {
click: function() {
dialog.remove();
}
}表示按钮绑定的事件。默认自带点击弹框关闭事件。这里的事件对象就是jQuery对包装器绑定事件的jQuery对象，你可以可以添加 hover等事件。如果只有click事件，可以直接使用Function类型参数，例如：
events: function(event) {
event.data.dialog.remove();
}因此：
1. 如果你的弹框默认就是一个文字为“确定”的确认按钮，则
buttons参数内容就是：{ buttons: [{}] }2. 如果你的弹框默认就是一个蓝色确认按钮，但是文字内容是“我知道了”，则
buttons参数内容就是：{ buttons: [{ value: '我知道了' }] }3. 如果你的弹框默认就是一个文字为“确定”的确认按钮，但是是红色的警示按钮，则
buttons参数内容就是：{ buttons: [{ type: 'warning' }] }4. 如果你的弹框默认就有一个蓝色“确定”按钮，和一个白色“取消”按钮，则
buttons参数内容就是：{ buttons: [{}, {}] }我们只需要空对象占位就好了。你也可以使用
null占位。 -
弹框扩展之alert弹框
模拟浏览器
window.alert()弹框。用法如下：new Dialog(options).alert(message, alertOptions);
其中，参数
options就是「基本使用」展示的参数。不过，还是有些不一样的，这里，能够生效的参数，只有后面跟着红色星号*的width,onShow,onHide,onRemove这4个参数。剩余的其他参数，会被message和alertOptions参数重置。其中，
message表示提示的文字，是必须参数；alertOptions支持参数如下：参数名称 支持类型 默认值 释义 title String ''alert弹框默认无标题文字，本项目，此参数不需要关心。type String 'remind'alert弹框的类型, 参数包括 'remind','success','warning', 或者任意自定义'custom'。对应效果图缩略图如下（此截图有问题，按钮颜色实际与图标颜色是一一对应的）：
buttons Array [{}]表示按钮。默认为1个蓝色“确定”按钮。 一般而言，我们用不到可选参数，实际使用类似这样：
new Dialog().alert('弹弹弹，弹走鱼尾纹……'); -
弹框扩展之confirm弹框
模拟浏览器
window.confirm()弹框。用法如下：new Dialog(options).confirm(message, confirmOptions);
其中，参数
options就是「基本使用」展示的参数。不过，还是有些不一样的，这里，能够生效的参数，只有后面跟着红色星号*的width,onShow,onHide,onRemove这4个参数。剩余的其他参数，会被message和confirmOptions参数重置。其中，
message表示提示的文字，是必须参数；confirmOptions支持参数如下：参数名称 支持类型 默认值 释义 title String ''alert弹框默认无标题文字，本项目，此参数不需要关心。type String 'warning'confirm弹框的类型, 参数包括 'remind','success','warning', 或者任意自定义'custom'。等同alert弹框，差别在于图标。buttons Array [{ type: 'warning' }]表示按钮。默认为1个红色警示“确定”按钮。 一般而言，我们需要对第一个警示按钮写事件，也就是确认删除之后干嘛干嘛，如：
new Dialog().confirm('确定弹弹弹，弹走鱼尾纹？', { buttons: [{ events: { click: function() { /* * 这里回调，巴拉巴拉小魔仙…… * ...... */ dialog.remove(); // dialog为弹框实例对象 } } }, {}] }); -
弹框扩展之ajax弹框
含有异步动态请求的弹框。有些弹框，我们需要点击一个按钮，先去拉取数据，然后再模板解析再呈现，这个时候就需要使用ajax弹框。
语法如下：
new Dialog(options).ajax(ajaxData, ajaxOptions);
其中，
options跟上面alert,confirm方法的options参数一样，不赘述。ajaxData为Ajax请求的一些参数，和jQuery的$.ajax()方法的参数几乎一模一样，不同的是：一是本弹框ajax方法的默认返回类型dataType为'json'，二是内置了error错误回调方法，功能是弹框提示‘网络错误’, 见上面的404示例。其中url是必须参数。其他根据自己的实际需要自定义。ajaxOptions为ajax弹框相关的参数，具体如下表：参数名称 支持类型 默认值 释义 title String ''alert弹框的标题文字。content Function function() {
/* 根据Ajax返回内容处理成弹框需要的HTML代码 */
}默认Ajax请求类型是 'json', 显然，JSON数据我们不能直接在弹框中呈现，或使用模板技术返回我们需要的HTML代码，或直接使用JS拼接；总而言之，此方法必须返回字符串。如果ajax类型是'html', 此参数可以忽略，会自动返回。buttons Array []表示按钮。默认没有任何按钮。 -
弹框扩展之open方法
作用是替换当前弹框实例为新的弹框内容，包括，标题、主体内容以及按钮。我们每次使用
new Dialog()构造的时候，都是一个全新的弹框。有时候，我们希望直接当前弹框内容替换，例如，从loading弹框到普通弹框(可以有更好的动画呈现体验)，就可以使用此方法。语法如下：
new Dialog(options).open(html, openOptions);
options参数同上。需要注意的是，如果这里的API使用的是有红色星号标注的，则弹框替换的时候，这些API是公用的。html为必须参数，你可以理解为options中的content参数。openOptions为新弹框的一些参数，包括：参数名称 支持类型 默认值 释义 title String ''alert弹框的标题文字。buttons Array []表示按钮。默认没有任何按钮。 - 弹框扩展之loading弹框
语法如下：
new Dialog(options).loading();
我们可以设定弹框的宽度以及各个回调。loading模式下，标题、关闭按钮、底部按钮都不可见，只有菊花转转转。此方法使用了Loading组件。
-
弹框其他方法
①. unloading()方法
语法如下：
dialog.unloading(time); // dialog为弹框实例对象此方法用在loading完毕，HTML更新之后，主要作用是使标题、关闭按钮、底部按钮呈现。
其中有一个可选参数
time, 默认会触发内容高度和透明度的动画呈现效果。当time值设为0的时候，弹框单纯呈现，没有动态效果。此方法使用了Loading组件。本组件ajax弹框内部使用了此方法。机制如下：如果Ajax请求的时间小于100毫秒(用户无感知)，则直接呈现；如果Ajax请求时间较长，则弹框已舒缓的动画效果呈现。
②. show()方法
语法如下：
dialog.show(); // dialog为弹框实例对象弹框显示，会触发
onShow回调方法。③. hide()方法
语法如下：
dialog.hide(); // dialog为弹框实例对象弹框显示，会触发
onHide回调方法。④. remove()方法
语法如下：
dialog.remove(); // dialog为弹框实例对象弹框显示，会触发
onRemove回调方法。本组件弹框的关闭都是调用的这里的remove()方法。 - 弹框实例对象
我们每次
new一下Dialog都会返回一个弹框实例对象，例如：var dialog = new Dialog()
也可以使用$.dialog jQuery风格语法：
var dialog = $.dialog();
此实例对象，包含上面出现的各个方法(
alert,confirm,ajax,...)我们可以很开心地调用：
dialog.alert('xxx');同时，该实例对象好暴露了其他一些参数，方便我们的使用，完整如下：
{ el: { container: $(), // 含半透明遮罩的容器 dialog: $(), // 弹框主体元素 title: $(), // 弹框标题元素 close: $(), // 弹框关闭按钮 body: $(), // 弹框主内容元素 footer: $(), // 弹框底部元素 button0: $(), // 弹框按钮1(如果有) button1: $() // 弹框按钮2(如果有) }, width: 'auto', // 弹框的宽度，默认是'auto', 也可能是数值，看设置 callback: { // 3个回调方法 show: $.noop, hide: $.noop, remove: $.noop } }
三、作为弹框插件单独使用
如果是基本弹框功能，直接引用下面CSS和JS即可：
<link rel="stylesheet" href="//qidian.gtimg.com/lulu/theme/peak/css/common/ui/Button.css"> <link rel="stylesheet" href="//qidian.gtimg.com/lulu/theme/peak/css/common/ui/Dialog.css">
<script src="//qidian.gtimg.com/lulu/theme/peak/js/common/ui/Dialog.js"></script>
如果需要用到ajax加载弹框，则还需要引入loading组件相关资源。完整示意如下：
<link rel="stylesheet" href="//qidian.gtimg.com/lulu/theme/peak/css/common/ui/Button.css"> <link rel="stylesheet" href="//qidian.gtimg.com/lulu/theme/peak/css/common/ui/Loading.css"> <link rel="stylesheet" href="//qidian.gtimg.com/lulu/theme/peak/css/common/ui/Dialog.css">
<script src="//qidian.gtimg.com/lulu/theme/peak/js/common/ui/Loading.js"></script> <script src="//qidian.gtimg.com/lulu/theme/peak/js/common/ui/Dialog.js"></script>