使用jQuery开发dialog对话框插件

1、插件使用

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

<script type="text/javascript" src="js/jquery/jquery-1.7.2.min.js"></script>

<script type="text/javascript" src="js/dialog.js"></script>
<link rel="stylesheet" href="css/blue/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
         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配置的对话框内容',
         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=" 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=" 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);

5、演示和代码

dialog.js　　http://5ijy01.duapp.com/jq-ui/js/dialog.js

dialog.css　　http://5ijy01.duapp.com/jq-ui/css/blue/dialog.css

Github　　https://github.com/xuguofeng/jq-ui
演示项目　　http://5ijy01.duapp.com/jq-ui/index.html