jQuery EasyUI window - with a dialog box to customize toolbars and buttons
You can create a toolbar with (toolbar) and buttons (button) dialog (dialog), you can create the HTML tags. This tutorial describes how to add a toolbar (toolbar) and buttons (button) to the dialog box (dialog), without any javascript code.
Create dialog (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>
Create a toolbar (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>
Create button (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>
Please note that the dialog box (dialog) toolbar (toolbar) and buttons (buttons) properties can also be specified by the string value, as it will act as a selector to select an appropriate DIV element and appends it to the toolbar (toolbar) or buttons (buttons) position.