EasyUi常用组件（四）Dialog对话框、创建按钮（Buttons）、创建工具栏（Toolbar）

对话框（Dialog）非常简单，可以从 DIV 标记创建，如下所示：

<div id="dd" class="easyui-dialog" style="padding:5px;width:400px;height:200px;"title="My Dialog" iconCls="icon-ok"toolbar="#dlg-toolbar" buttons="#dlg-buttons">Dialog Content.</div>

使用JavaScript创建对话框也是允许的。现在，让我们创建一个模态对话框，然后调用“refresh”方法通过Ajax加载的内容。

1.<div id="dd">Dialog Content.</div>  

您可以创建一个带有工具栏（toolbar）和按钮（button）的对话框（dialog），可以从 HTML 标记创建。这个教程描述如何添加工具栏（toolbar）和按钮（button）到对话框（dialog），没有任何的 javascript 代码。

创建对话框（Dialog）

<div id="dd" class="easyui-dialog" title="My Dialog" style="width:400px;height:200px;padding:10px"toolbar="#dlg-toolbar" buttons="#dlg-buttons">Dialog Content.</div>

创建工具栏（Toolbar）

<div id="dlg-toolbar"><table cellpadding="0" cellspacing="0" style="width:100%"><tr><td><a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true">Edit</a><a href="#" class="easyui-linkbutton" iconCls="icon-help" plain="true">Help</a></td><td style="text-align:right"><input></input><a href="#" class="easyui-linkbutton" iconCls="icon-search" plain="true"></a></td></tr></table></div>

创建按钮（Buttons）

<div id="dlg-buttons"><table cellpadding="0" cellspacing="0" style="width:100%"><tr><td><img src="email.gif"/></td><td style="text-align:right"><a href="#" class="easyui-linkbutton" iconCls="icon-save" onclick="javascript:alert('save')">Save</a><a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dd').dialog('close')">Close</a></td></tr></table></div>

使用流程：

1、js初始化组件设定

2、Js请求服务器，返回特定格式的json数据

3.系统多为页签模式，在每个id和方法后，加一个随机数