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的位置.