Complemento de ventana jQuery EasyUI -Dialog Diálogo

jQuery EasyUI 插件Complementos jQuery EasyUI

Extendido desde $.fn.window.defaults. Sobrescribe los defaults predeterminados mediante $.fn.dialog.defaults.

El diálogo (dialog) es un tipo especial de ventana que tiene una barra de herramientas en la parte superior y una barra de botones en la parte inferior. De forma predeterminada, el diálogo solo tiene una herramienta de cierre mostrada en el lado derecho del encabezado. Los usuarios pueden configurar el comportamiento del diálogo para mostrar otras herramientas (por ejemplo: collapsible, minimizable, maximizable, etc.).

Dependencias

  • window
  • linkbutton

Uso

Cree un diálogo (dialog) a partir de un nodo DOM existente mediante el marcado. El siguiente ejemplo demuestra un diálogo modal con la característica de tamaño ajustable.

<div id="dd" class="easyui-dialog" title="My Dialog" style="width:400px;height:200px;"
    data-options="iconCls:'icon-save',resizable:true,modal:true">
    Dialog Content.
</div>

Cree un diálogo (dialog) usando javascript. Ahora vamos a crear un diálogo modal y luego llamar al método 'refresh' para cargar su contenido mediante ajax.

<div id="dd">Dialog Content.</div>

$('#dd').dialog({
    title: 'My Dialog',
    width: 400,
    height: 200,
    closed: false,
    cache: false,
    href: 'get_content.php',
    modal: true
});
$('#dd').dialog('refresh', 'new_content.php');

Propiedades

Estas propiedades se extienden desde window (ventana). A continuación se muestran las propiedades reescritas para dialog (diálogo).

Nombre Tipo Descripción Valor predeterminado
title string El texto del título del diálogo. New Dialog
collapsible boolean Define si se muestra el botón de colapso. false
minimizable boolean Define si se muestra el botón de minimizar. false
maximizable boolean Define si se muestra el botón de maximizar. false
resizable boolean Define si el diálogo es redimensionable. false
toolbar array,selector La barra de herramientas superior del diálogo. Los valores posibles son:
1. Un array, las opciones de cada herramienta son las mismas que las de linkbutton.
2. Un selector, que indica la barra de herramientas.

La barra de herramientas del diálogo se puede declarar en la etiqueta <div>:
<div class="easyui-dialog" style="width:600px;height:300px"
        data-options="title:'My Dialog',toolbar:'#tb',modal:true">
    Dialog Content.
</div>
<div id="tb">
<a href="../index.html" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"/a>
<a href="../index.html" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true"/a>
</div>
La barra de herramientas del diálogo también se puede definir mediante un array:
<div class="easyui-dialog" style="width:600px;height:300px"
        data-options="title:'My Dialog',modal:true,
            toolbar:[{
                text:'Edit',
                iconCls:'icon-edit',
                handler:function(){alert('edit')}
            },{
                text:'Help',
                iconCls:'icon-help',
                handler:function(){alert('help')}
            }]">
    Dialog Content.
</div>
null
buttons array,selector Los botones de la parte inferior del diálogo. Los valores posibles son:
1. Un array, las opciones de cada botón son las mismas que las de linkbutton.
2. Un selector, que indica la barra de botones.

Los botones se pueden declarar en la etiqueta <div>:
<div class="easyui-dialog" style="width:600px;height:300px"
        data-options="title:'My Dialog',buttons:'#bb',modal:true">
    Dialog Content.
</div>
<div id="bb">
    <a href="../index.html" class="easyui-linkbutton">Save</a>
    <a href="../index.html" class="easyui-linkbutton">Close</a>
</div>
Los botones también se pueden definir mediante un array:
<div class="easyui-dialog" style="width:600px;height:300px"
        data-options="title:'My Dialog',modal:true,
            buttons:[{
                text:'Save',
                handler:function(){...}
            },{
                text:'Close',
                handler:function(){...}
            }]">
    Dialog Content.
</div>
null

Eventos

Este evento se extiende desde panel.

Métodos

Estos métodos se extienden desde window (ventana). A continuación se muestran los métodos añadidos para dialog (diálogo).

Nombre Parámetros Descripción
dialog none Devuelve el objeto externo del diálogo (dialog).
jQuery EasyUI 插件Complementos jQuery EasyUI Otras extensiones