jQuery EasyUI Ventana -Crear diálogo

El diálogo (Dialog) es una ventana (window) especial que puede contener una barra de herramientas en la parte superior y botones en la parte inferior. Por defecto, el diálogo (Dialog) no puede cambiar de tamaño, pero los usuarios pueden establecer la propiedad resizable a true para permitir que cambie de tamaño.

Crear diálogo (Dialog)

El diálogo (Dialog) es muy simple, se puede crear a partir de una etiqueta DIV, como se muestra a continuación:

    <div id="dd" class="easyui-dialog" style="padding:5px;width:400px;height:200px;"
            title="My Dialog" iconCls="icon-ok"
            toolbar="#dlg-toolbar" buttons="#dlg-buttons">
        Dialog Content.
    </div>

Preparar la barra de herramientas (Toolbar) y los botones (Button)

    <div id="dlg-toolbar">
        <a href="../index.html" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:alert('Add')">Add</a>
        <a href="../index.html" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:alert('Save')">Save</a>
    </div>
    <div id="dlg-buttons">
        <a href="../index.html" class="easyui-linkbutton" iconCls="icon-ok" onclick="javascript:alert('Ok')">Ok</a>
        <a href="../index.html" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dd').dialog('close')">Cancel</a>
    </div>

En el código anterior creamos un diálogo (dialog) con una barra de herramientas (toolbar) y botones (button). Esta es la configuración estándar de diálogo (dialog), barra de herramientas (toolbar), contenido (content) y botones (buttons).

Descargar ejemplos de jQuery EasyUI

jeasyui-win-dlg1.zip