jQuery EasyUI Plugin de Diseño -Panel

jQuery EasyUI 插件Plugin jQuery EasyUI

Reescriba los defaults predeterminados mediante $.fn.panel.defaults.

El panel se utiliza como contenedor para otro contenido. Es el componente base para crear otros componentes (como Layout, Tabs, Accordion, etc.). También proporciona comportamientos integrados de colapsable, cerrable, maximizable, minimizable y otros comportamientos personalizados. El panel puede incrustarse fácilmente en cualquier lugar de una página web.

Uso

Crear un panel

1. Crear un panel mediante marcado

Crear un panel desde el marcado es más fácil. Agregue la clase 'easyui-panel' a la etiqueta <div>.

<div id="p" class="easyui-panel" title="My Panel"
    style="width:500px;height:150px;padding:10px;background:#FAFAFA;"
    data-options="iconCls:'icon-save',closable:true,
    collapsible:true,minimizable:true,maximizable:true">
    <p>panel content.</p>
    <p>panel content.</p>
</div>

2. Crear un panel mediante programación

Vamos a crear un panel con una barra de herramientas en la esquina superior derecha.

<div id="p" style="padding:10px;">
    <p>panel content.</p>
    <p>panel content.</p>
</div>
$('#p').panel({
    width:500,
    height:150,
    title:'My Panel',
    tools:[{
    iconCls:'icon-add',
    handler:function(){alert('new')}
    },{
    iconCls:'icon-save',
    handler:function(){alert('save')}
    }]
});

Mover el panel

Llame al método 'move' para mover el panel a una nueva posición.

$('#p').panel('move',{
    left:100,
    top:100
});

Cargar contenido

Carguemos el contenido del panel mediante ajax y mostremos alguna información cuando la carga se realice correctamente.

$('#p').panel({
    href:'content_url.php',
    onLoad:function(){
        alert('loaded successfully');
    }
});

Propiedades

Nombre Tipo Descripción Valor predeterminado
id string El atributo id del panel. null
title string El texto del título que se muestra en la cabecera del panel. null
iconCls string Una clase CSS que muestra un icono de 16x16 en el panel. null
width number Establece el ancho del panel. auto
height number Establece la altura del panel. auto
left number Establece la posición izquierda del panel. null
top number Establece la posición superior del panel. null
cls string Agrega una clase CSS al panel. null
headerCls string Agrega una clase CSS a la cabecera del panel. null
bodyCls string Agrega una clase CSS al cuerpo del panel. null
style object Agrega estilos personalizados al panel.
Ejemplo de código para cambiar el ancho del borde del panel:
<div class="easyui-panel" style="width:200px;height:100px"
        data-options="style:{borderWidth:2}">
</div>
{}
fit boolean Cuando se establece en true, el tamaño del panel se ajusta a su contenedor padre. El siguiente ejemplo muestra un panel que se ajusta automáticamente al tamaño interior máximo de su contenedor padre.
<div style="width:200px;height:100px;padding:5px">
    <div class="easyui-panel" style="width:200px;height:100px"
            data-options="fit:true,border:false">
        Embedded Panel
    </div>
</div>
false
border boolean Define si se muestra el borde del panel. true
doSize boolean Si se establece en true, el panel se ajusta y se diseña en el momento de la creación. true
noheader boolean Si se establece en true, la cabecera del panel no se creará. false
content string El contenido del cuerpo del panel. null
collapsible boolean Define si se muestra el botón de colapsar. 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
closable boolean Define si se muestra el botón de cerrar. false
tools array,selector Grupo de herramientas personalizado, valores posibles:
1. Un array, cada elemento contiene las propiedades iconCls y handler.
2. Un selector que indica el grupo de herramientas.

El grupo de herramientas del panel puede declararse mediante una etiqueta <div> existente:
<div class="easyui-panel" style="width:300px;height:200px"
        title="My Panel" data-options="iconCls:'icon-ok',tools:'#tt'">
</div>
<div id="tt">
    <a href="../index.html" class="icon-add" onclick="javascript:alert('add')"></a>
    <a href="../index.html" class="icon-edit" onclick="javascript:alert('edit')"></a>
</div>
El grupo de herramientas del panel puede definirse mediante un array:
<div class="easyui-panel" style="width:300px;height:200px"
        title="My Panel" data-options="iconCls:'icon-ok',tools:[
                {
                    iconCls:'icon-add',
                    handler:function(){alert('add')}
                },{
                    iconCls:'icon-edit',
                    handler:function(){alert('edit')}
                }]">
</div>
[]
collapsed boolean Define si el panel se inicializa colapsado. false
minimized boolean Define si el panel se inicializa minimizado. false
maximized boolean Define si el panel se inicializa maximizado. false
closed boolean Define si el panel se inicializa cerrado. false
href string Una URL para cargar datos remotos y mostrarlos en el panel. Tenga en cuenta que el contenido no se cargará a menos que el panel esté abierto. Esto es útil para crear un panel con carga diferida (lazy loading):
<div id="pp" class="easyui-panel" style="width:300px;height:200px"
        data-options="href='get_content.php.html',closed:true">
</div>
<a href="../index.html" onclick="javascript:$('#pp').panel('open')">Open</a>
null
cache boolean Si se establece en true, se almacena en caché el contenido del panel cargado desde href. true
loadingMessage string Muestra un mensaje en el panel al cargar datos remotos. Loading…
extractor function Define cómo extraer el contenido de la respuesta ajax y devuelve los datos extraídos.
extractor: function(data){
    var pattern = /<body[^>]*>((.|[\n\r])*)<\/body>/im;
    var matches = pattern.exec(data);
    if (matches){
        return matches[1];    // only extract body content
    } else {
        return data;
    }
}

Eventos

Nombre Parámetros Descripción
onLoad none Se dispara cuando se cargan los datos remotos.
onBeforeOpen none Se dispara antes de abrir el panel; si devuelve false, se detiene la apertura.
onOpen none Se dispara después de abrir el panel.
onBeforeClose none Se dispara antes de cerrar el panel; si devuelve false, se cancela el cierre. El panel declarado a continuación no se cerrará.
<div class="easyui-panel" style="width:300px;height:200px;"
        title="My Panel" data-options="onBeforeClose:function(){return false}">
    The panel cannot be closed.
</div>
onClose none Se dispara después de cerrar el panel.
onBeforeDestroy none Se dispara antes de destruir el panel; si devuelve false, se cancela la destrucción.
onDestroy none Se dispara después de destruir el panel.
onBeforeCollapse none Se dispara antes de colapsar el panel; si devuelve false, se detiene el colapso.
onCollapse none Se dispara después de colapsar el panel.
onBeforeExpand none Se dispara antes de expandir el panel; si devuelve false, se detiene la expansión.
onExpand none Se dispara después de expandir el panel.
onResize width, height Se dispara después de ajustar el tamaño del panel.
width: el nuevo ancho exterior
height: la nueva altura exterior
onMove left,top Se dispara después de mover el panel.
left: la nueva posición izquierda
top: la nueva posición superior
onMaximize none Se dispara después de maximizar la ventana.
onRestore none Se dispara después de restaurar la ventana a su tamaño original.
onMinimize none Se dispara después de minimizar la ventana.

Métodos

Nombre Parámetros Descripción
options none Devuelve la propiedad de opciones (options).
panel none Devuelve el objeto externo del panel.
header none Devuelve el objeto de la cabecera del panel.
body none Devuelve el objeto del cuerpo del panel.
setTitle title Establece el texto del título de la cabecera.
open forceOpen Cuando el parámetro forceOpen se establece en true, abre el panel omitiendo la función de devolución de llamada onBeforeOpen.
close forceClose Cuando el parámetro forceClose se establece en true, cierra el panel omitiendo la función de devolución de llamada onBeforeClose.
destroy forceDestroy Cuando el parámetro forceDestroy se establece en true, destruye el panel omitiendo la función de devolución de llamada onBeforeDestroy.
refresh href Actualiza el panel cargando datos remotos. Si se asigna el parámetro 'href', se sobrescribe la antigua propiedad 'href'.
Ejemplo de código:
// open a panel and then refresh its contents.
$('#pp').panel('open').panel('refresh');
// refresh contents with a new URL.
$('#pp').panel('open').panel('refresh','new_content.php');
resize options Establece el tamaño del panel y aplica el diseño. El objeto Options contiene las siguientes propiedades:
width: el nuevo ancho del panel
height: la nueva altura del panel
left: la nueva posición izquierda del panel
top: la nueva posición superior del panel

Ejemplo de código:
$('#pp').panel('resize',{
    width: 600,
    height: 400
});
move options Mueve el panel a una nueva posición. El objeto Options contiene las siguientes propiedades:
left: la nueva posición izquierda del panel
top: la nueva posición superior del panel
maximize none El panel se ajusta al tamaño de su contenedor.
minimize none Minimiza el panel.
restore none Restaura el panel maximizado a su tamaño y posición originales.
collapse animate Colapsa el cuerpo del panel.
expand animate Expande el cuerpo del panel.
jQuery EasyUI 插件Plugin jQuery EasyUI Otras extensiones