自定义模态对话框工具栏和按钮

使用教程 » 自定义模态对话框工具栏和按钮

您可以创建带有工具栏和按钮的对话框，这些对话框可以从HTML标记创建。本教程描述如何附加工具栏 以及没有javascript代码的对话框的按钮.

创建对话框

<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>

创建工具栏

<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>

创建按钮

<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>

注意，对话框的工具栏和按钮属性也可以用字符串值赋值， 它将作为选择器来选择适当的DIV元素，并附加到工具栏或按钮位置。

下载 EasyUI 实例: