easyui-dialog 工具栏定义

你可以创建一个dialog 和toolbar和button,创建可以从HTML 标记,这个教程描述如何添加toolbar 和 button到dialog,没有任何的javascript代码.

创建 Dialog

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

创建Toolbar

1. <div id="dlg-toolbar">
2. <table cellpadding="0" cellspacing="0" style="width:100%">
3. <tr>
4. <td>
5. <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true">Edit </a>
6. <a href="#" class="easyui-linkbutton" iconCls="icon-help" plain="true">Help </a>
7. </td>
8. <td style="text-align:right">
9. <input> </input> <a href="#" class="easyui-linkbutton" iconCls="icon-search" plain="true"> </a>
10. </td>
11. </tr>
12. </table>
13. </div>

创建 Button

1. <div id="dlg-buttons">
2. <table cellpadding="0" cellspacing="0" style="width:100%">
3. <tr>
4. <td>
5. <img src="email.gif"/>
6. </td>
7. <td style="text-align:right">
8. <a href="#" class="easyui-linkbutton" iconCls="icon-save" onclick="javascript:alert('save')">Save </a>
9. <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dd').dialog('close')">Close </a>
10. </td>
11. </tr>
12. </table>
13. </div>

注意:  dialog的toolbar 和 buttons也可以通过string值指定,它将充当作为一个选择器去选择一个适当的DIV元素和添加 toolbar 或者 buttons的位置.