- 什么是dialog
对话框是一种特殊的窗口，它在顶部有一个工具栏，在底部有一个按钮栏。默认情况下，对话框（dialog）只有一个显示在头部右侧的关闭工具。
用户可以配置对话框行为来显示其他工具（比如：可折叠 collapsible、可最小化 minimizable、可最大化 maximizable，等等）。
dialog依赖 window和linkbutton，当需要dialog提供某个功能，而API上又没有找到的时候，可以试着去window和linkbutton上找找看
- 使用html标签创建dialog
<div class="easyui-dialog" title="对话框" style=" 500px;height: 500px">对话框</div>
对于一个普通的<div>，一旦添加上了easyui-dialog作为class样式后，就会变成一个“漂亮”的对话框了
推断一下，其他EasyUI组件也是这么个使用方法，就是在div或其他标签上，添加指定的EasyUI样式即可
- 使用js创建dialog
<div id="dialog">对话框</div>
<script type="text/javascript">
$(function () {
$("#dialog").dialog({
title: "对话框"
500,
height: 200
});
})
</script>
html标签提供了容器，js操作这个容器，加工成一个EasyUI的组件。
- 如何设置属性？
如果使用标签创建，就添加 data-options 属性，如：data-options="iconCls:'icon-save',resizable:true,modal:true"
如果使用JS创建，就传递一个JSON对象给dialog方法即可。
个人以为，只要需要将一个页面元素渲染成EasyUI组件，那么尽量还是使用JS去创建于设置这个元素
HTML只负责网页的骨架，由EasyUI去控制页面的样式与组件的行为。
扩展：现在也有一部分意见认为前端开发中需要分离CSS框架与JS框架，其实也有其合理性，但是对于页面的美观性没有太大需求的项目而言，特别是对于后端系统而言，没有必要拆分。况且美观是一门玄学，假如到了那个必要的时候，团队中肯定需要专门的美工团队，这里就不展开了。
- 属性
属性都可以在官网上找到，其基本的使用也都有。这里就不在赘述了，只对部分属性做一个使用说明
toolbar:顶部工具栏
buttons：底部按钮
这两个属性的值，都是JSON数组或选择器，举例：
选择器：
<script type="text/javascript">
$(function () {
$("#dialog").dialog({
title: "对话框",
iconCls: "icon-save",
500,
height: 200,
resizable: true,
toolbar: "#tb",
buttons: "#bts"
});
})
</script>
</head>
<body>
<div id="dialog">对话框</div>
<div id="tb">
<a href="#" class="easyui-linkbutton">按钮1</a>
<a href="#" class="easyui-linkbutton">按钮2</a>
</div>
<div id="bts">
<a href="#" class="easyui-linkbutton">按钮3</a>
<a href="#" class="easyui-linkbutton">按钮3</a>
</div>
</body>
JSON数组
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<%
String homePage = request.getContextPath();
%>
<!DOCTYPE HTML>
<html>
<head>
<title>JS创建dialog</title>
......
<script type="text/javascript">
$(function () {
$("#dialog").dialog({
title: "对话框",
iconCls: "icon-save",
500,
height: 200,
resizable: true,
modal: true,
toolbar: [
{
text: '编辑',
iconCls: 'icon-edit',
handler: function () {
alert('编辑')
}
}, {
text: '帮助',
iconCls: 'icon-help',
handler: function () {
alert('帮助');
}
}
],
buttons: [{
text: '保存',
handler: function () {
alert("保存");
}
}, {
text: '关闭',
handler: function () {
alert("关闭");
}
}]
});
})
</script>
</head>
<body>
<div id="dialog">对话框</div>
</body>
</html>
modal:是否模态，true - 对话框显示的时候，背景是无法操作的，这个属性继承自window，当页面操作需要阻塞的时候会用到这个