使用jQuery开发dialog对话框插件

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

1、插件使用

首先引入 jquery 库，然后引入 dialog.js、dialog.css，如下：

dialog 插件是 $.dialog 上面的静态函数，可以使用 $.dialog.open({}) 方式打开一个 dialog

如下函数打开一个宽 600 高 400 的模态对话框，它的 id 是 dialog1，使用 ajax 方式获取对话框显示内容，显示关闭动画分别为 slideDown 和 slideUp

function openUrlDialog() {
$.dialog.open({
id: 'dialog1', // 对话框div的id
url: 'ajax/admin_dialog.html', // 用来获取远程数据的url
width: 600, // 对话框的宽
height: 400, // 对话框的高
title: '使用url加载数据', // 标题
modal: true, // 模态窗口配置， true|false，默认false
showType: 'slide' // 对话框打开、关闭时的动画效果，slide|fade，默认没有动画效果
});
}

如下函数打开一个宽 900 高 500 的对话框，它的 id 是 dialog2，显示内容使用 content 选项配置，显示关闭动画分别为 fadeIn 和 fadeOut

function openContentDialog() {
$.dialog.open({
id: 'dialog2',
content: '我是使用content配置的对话框内容',
width: 900,
height: 500,
title: '使用content加载数据',
showType: 'fade'
});
}

2、核心函数

函数名	参数	作用	返回值	示例
open	Object	打开一个dialog	创建的dialog对象
close	id, 回调函数	根据id关闭指定dialog	无	$.dialog.close("dialog1");
reload	id	根据id刷新指定dialog	无	$.dialog.reload("dialog1");

3、open 函数的参数配置选项

参数	类型	作用
id	string	dialog插件div的id属性值，默认："jquery_dialog_" + new Date().getTime();
title	string	dialog插件的标题，默认：和id一样
width	int	dialog插件div的宽，默认500
height	int	dialog插件div的高，默认300
top	int	用于调整与body顶部的距离，值越大，距离越小，默认3
modal	boolean	模态对话框配置，默认false
url	string	获取远程内容使用的url地址，默认空字符串
content	string	内容字符串，在填充对话框内容时优先级最高，默认空字符串
html	[]	内容文档的jQuery对象数组，在填充对话框内容时优先级次于content选项，默认undefined
showType	string	显示、关闭对话框时的动画效果，有slide和fade两种，默认无动画效果
onClose	function	关闭对话框（全部动画效果）之后执行的函数，默认null

4、DOM结构

openContentDialog() 函数生成的对话框DOM结构如下：

<div id="dialog2" class="dialog-container" style="width: 900px; height: 500px; top: 149.333px; left: 510px; z-index: 1104;">
<div class="dialog-header" style="cursor: default;">
<div class="dialog-title">使用content加载数据</div>
<div class="dialog-close"></div>
</div>
<div class="dialog-content" style="width: 868px; height: 443px;">我是使用content配置的对话框内容</div>
</div>

在 dialog.js 中，234 至 239 行是生成 DOM 结构、绑定事件、加载内容的主体部分

// 创建对话框
var dialog = initDialog(dialogId, title);
initSize(dialog, options);
bindEvent(dialog);
bindDrag(dialog);
load(dialog, options);