第十四章：Dialog（消息窗口）组件
学习要点：
- 加载方式
- 属性列表
- 事件列表
- 方法列表
一、加载方式：
1.class加载方式：
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
</head>
<body>
<div class="easyui-dialog" style="width:400px;height:250px;">
</div>
</body>
</html>
2.JS调用：
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
</head>
<body>
<div id="box">
</div>
</body>
</html>
$(function(){
$('#box').dialog({
width:400,
height:250,
title:'对话框',
});
});二、属性列表：
窗口属性扩展自Window（面板），窗口新增或重新定义的属性如下：
| Dialog属性列表 | ||
|---|---|---|
| 属性名 | 值 | 说明 |
| title | string | 对话框窗口标题文本。默认值New Dialog。 |
| collapsible | boolean | 定义是否显示可折叠按钮。默认值false。 |
| minimizable | boolean | 定义是否显示最小化按钮。默认值false。 |
| maximiable | boolean | 定义是否显示最大话按钮。默认值false。 |
| resizable | boolean | 定义是否可以改变对话框窗口大小。默认值false。 |
| toolbar | array,selevtor | 设置对话框窗口顶部工具栏，可用值有：1.一个数组，每一个工具栏中的工具属性都和linkbutton相同。2.一个选择器工具栏，默认值null。 |
| buttons | array,selevtor | 对话框窗口底部按钮，可用值有：1.一个数组，每一个按钮的属性都和linkbutton相同。2.一个选择器指定按钮栏。默认值null。 |
三、事件列表：
窗口的事件完整继承自Panel（面板）。所以，直接参考Panel面板的事件即可。
四、方法列表：
窗口的方法扩展自Dialog（对话框），窗口新增方法如下：
| Widdow方法 | ||
|---|---|---|
| 方法名 | 参数 | 说明 |
| dialog | none | 返回外部对话框对象 |
使用$.fn.window.defaults重写默认值对象。
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
</head>
<body>
<div id="box">
</div>
<div id="tt">
<a href="###" class="easyui-linkbutton" data-options="iconCls:'icon-add'">编辑</a>
<a href="###" class="easyui-linkbutton" data-options="iconCls:'icon-help'">帮助</a>
</div>
</body>
</html>
$(function(){
$('#box').dialog({
width:400,
height:250,
title:'对话框',
modal:true,
/*
collapsable:true,
minimizable:true,
maximizable:true,
resizable:true,
*/
//toolbar:'tt',
toolbar:[{
text:'编辑',
iconCls:'icon-edit',
handler:function(){
alert('edit');
}
},{}],
button:[{
text:'确定',
plain:true,
iconCls:'icon-ok',
},{
text:'取消',
plain:true,
iconCls:'icon-cancel',
}],
onClose:function(){
alert("关闭之后触发！");
}
});
console.log($('box').dialog('dialog'));
});作者：Roger_CoderLife
链接：https://blog.csdn.net/Roger_CoderLife/article/details/102929703
本文根据网易云课堂JQuery EasyUI视频教程翻译成文档，转载请注明原文出处，欢迎转载
