jQuery EasyUI Plugin de ventana -Ventana

jQuery EasyUI 插件jQuery EasyUI Plugins

Extiende desde $.fn.panel.defaults. Sobrescribe los defaults por defecto mediante $.fn.window.defaults.

La ventana (window) es un panel flotante y arrastrable que puede usarse como ventana de aplicación. De forma predeterminada, la ventana se puede mover, redimensionar y cerrar. Su contenido puede definirse mediante HTML estático o cargarse dinámicamente mediante ajax.

Dependencias

  • draggable
  • resizable
  • panel

Uso

Crear ventana (window)

1. Crear ventana (window) a partir del marcado.

<div id="win" class="easyui-window" title="My Window" style="width:600px;height:400px"
    data-options="iconCls:'icon-save',modal:true">
    Window Content
</div>

2. Crear ventana (window) usando JavaScript.

<div id="win"></div>

$('#win').window({
    width:600,
    height:400,
    modal:true
});

3. Crear ventana (window) mediante un diseño compuesto.

Como de costumbre, puedes definir el diseño de la ventana. El siguiente ejemplo muestra cómo dividir el área de la ventana en dos partes: la región norte y la región central.

<div id="win" class="easyui-window" title="My Window" style="width:600px;height:400px"
    data-options="iconCls:'icon-save',modal:true">
    <div class="easyui-layout" data-options="fit:true">
        <div data-options="region:'north',split:true" style="height:100px"></div>
        <div data-options="region:'center'">
            The Content.
        </div>
    </div>
</div>

Acciones de la ventana (window)

Abrir y cerrar la ventana (window).

$('#win').window('open'); // open a window
$('#win').window('close'); // close a window

Cargar el contenido de la ventana mediante ajax.

$('#win').window('refresh', 'get_content.php');

Propiedades

Estas propiedades se extienden desde el panel (panel). A continuación se muestran las propiedades sobrescritas y añadidas para la ventana (window).

Nombre Tipo Descripción Valor por defecto
title string El texto del título de la ventana. New Window
collapsible boolean Define si se muestra el botón de contraer. true
minimizable boolean Define si se muestra el botón de minimizar. true
maximizable boolean Define si se muestra el botón de maximizar. true
closable boolean Define si se muestra el botón de cerrar. true
closed boolean Define si la ventana está cerrada. false
zIndex number El z-index desde el que comienza a incrementarse para la ventana. 9000
draggable boolean Define si la ventana se puede arrastrar. true
resizable boolean Define si la ventana se puede redimensionar. true
shadow boolean Si se establece en true, se mostrará una sombra cuando la ventana pueda mostrar sombra. true
inline boolean Define cómo colocar la ventana. Si se establece en true, se coloca dentro de su contenedor padre; si se establece en false, flota sobre todos los elementos. false
modal boolean Define si la ventana es modal. true

Eventos

Estos eventos se extienden desde el panel (panel).

Métodos

Estos métodos se extienden desde el panel (panel). A continuación se muestran los métodos añadidos para la ventana (window).

Nombre Parámetros Descripción
window none Devuelve el objeto de la ventana (window) externa.
hcenter none Centra la ventana horizontalmente. Este método está disponible desde la versión 1.3.1.
vcenter none Centra la ventana verticalmente. Este método está disponible desde la versión 1.3.1.
center none Centra la ventana. Este método está disponible desde la versión 1.3.1.
jQuery EasyUI 插件jQuery EasyUI Plugins Otras extensiones