jQuery EasyUI使用教程：自定义对话框工具栏和按钮

---

Kendo UI for jQuery——创建现代Web应用程序的最完整UI库！查看详情>>>

您可以创建一个带有工具栏和按钮的对话框，可以使用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>

请注意，对话框的工具栏和按钮属性也可以通过 string 值指定，它将充当作为一个选择器去选择一个适当的 DIV 元素，并追加到工具栏或者按钮的位置。

下载EasyUI示例：

购买正版授权的朋友可以点击""哦~~~