jQuery EasyUI Ventana -Personalizar un diálogo con barra de herramientas y botones
Puede crear un diálogo (dialog) con una barra de herramientas (toolbar) y botones (button), que puede crearse a partir de marcado HTML. Este tutorial describe cómo agregar una barra de herramientas (toolbar) y botones (button) a un diálogo (dialog), sin ningún código JavaScript.
Crear un diálogo (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>
Crear una barra de herramientas (Toolbar)
<div id="dlg-toolbar"> <table cellpadding="0" cellspacing="0" style="width:100%"> <tr> <td> <a href="../index.html" class="easyui-linkbutton" iconCls="icon-edit" plain="true">Edit</a> <a href="../index.html" class="easyui-linkbutton" iconCls="icon-help" plain="true">Help</a> </td> <td style="text-align:right"> <input></input><a href="../index.html" class="easyui-linkbutton" iconCls="icon-search" plain="true"></a> </td> </tr> </table> </div>
Crear botones (Buttons)
<div id="dlg-buttons">
<table cellpadding="0" cellspacing="0" style="width:100%">
<tr>
<td>
<img src="email.gif.html"/>
</td>
<td style="text-align:right">
<a href="../index.html" class="easyui-linkbutton" iconCls="icon-save" onclick="javascript:alert('save')">Save</a>
<a href="../index.html" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dd').dialog('close')">Close</a>
</td>
</tr>
</table>
</div>
Tenga en cuenta que las propiedades toolbar y buttons del diálogo (dialog) también pueden especificarse mediante un valor de cadena (string), que actuará como un selector para elegir un elemento DIV apropiado y se agregará a la posición de la barra de herramientas (toolbar) o de los botones (buttons).
Descargar ejemplos de jQuery EasyUI
jeasyui-win-dlg2.zip
Otras extensiones