Complemento de diseño jQuery EasyUI -Diseño (Layout)

jQuery EasyUI 插件Complementos jQuery EasyUI

Mediante $.fn.layout.defaults se sobrescriben los defaults predeterminados.

El diseño (layout) es un contenedor con cinco regiones: norte (north), sur (south), este (east), oeste (west) y centro (center). El panel de la región central es obligatorio; los paneles de las regiones de los bordes son opcionales. Cada panel de región de borde puede ajustarse arrastrando su borde, y también puede contraerse haciendo clic en el disparador de contracción. El diseño (layout) puede anidarse, por lo que los usuarios pueden crear diseños complejos.

Dependencias

  • panel
  • resizable

Uso

Crear un diseño (Layout)

1. Crear un diseño (Layout) mediante marcado.

Agregue la clase 'easyui-layout' a la etiqueta <div>.

<div id="cc" class="easyui-layout" style="width:600px;height:400px;">
    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
    <div data-options="region:'east',title:'East',split:true" style="width:100px;"></div>
    <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>
</div>

2. Crear un diseño (Layout) en toda la página.

<body class="easyui-layout">
    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
    <div data-options="region:'east',title:'East',split:true" style="width:100px;"></div>
    <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>
</body>

3. Crear un diseño anidado.

Tenga en cuenta que el panel de la región oeste del diseño interno está contraído.

<body class="easyui-layout">
    <div data-options="region:'north'" style="height:100px"></div>
    <div data-options="region:'center'">
        <div class="easyui-layout" data-options="fit:true">
            <div data-options="region:'west',collapsed:true" style="width:180px"></div>
            <div data-options="region:'center'"></div>
        </div>
    </div>
</body>

4. Cargar contenido mediante ajax.

El diseño (layout) se crea basado en paneles (panel). Cada panel de región ofrece soporte integrado para cargar contenido dinámicamente desde una URL. Usando técnicas de carga dinámica, los usuarios pueden hacer que sus páginas de diseño se muestren más rápido.

<body class="easyui-layout">
    <div data-options="region:'west',href:'west_content.php'" style="width:180px" ></div>
    <div data-options="region:'center',href:'center_content.php'" ></div>
</body>

Contraer el panel de diseño (Collapse Layout Panel)

$('#cc').layout();
// collapse the west panel
$('#cc').layout('collapse','west');

Agregar un panel de la región oeste mediante el botón de herramientas

$('#cc').layout('add',{
    region: 'west',
    width: 180,
    title: 'West Title',
    split: true,
    tools: [{
        iconCls:'icon-add',
        handler:function(){alert('add')}
    },{
        iconCls:'icon-remove',
        handler:function(){alert('remove')}
    }]
});

Opciones de diseño (Layout Options)

Nombre Tipo Descripción Valor por defecto
fit boolean Cuando se establece en true, ajusta el tamaño del diseño (layout) para adaptarse a su contenedor padre. Cuando se crea el diseño (layout) en la etiqueta 'body', se maximizará automáticamente a todo el tamaño de la página. false

Opciones del panel de región (Region Panel Options)

Las opciones del panel de región (Region Panel Options) se definen en el componente panel (panel). A continuación se presentan algunas propiedades comunes y nuevas:

Nombre Tipo Descripción Valor por defecto
title string El texto del título del panel de diseño (layout panel). null
region string Define la posición del panel de diseño (layout panel), cuyo valor es uno de los siguientes: north, south, east, west, center.
border boolean Cuando se establece en true, muestra el borde del panel de diseño (layout panel). true
split boolean Cuando se establece en true, muestra la barra divisoria, con la que el usuario puede cambiar el tamaño del panel (panel). false
iconCls string Clase CSS para mostrar un icono en el encabezado del panel (panel). null
href string La URL para cargar datos desde un sitio remoto. null
collapsible boolean Define si se muestra el botón de contracción. true
minWidth number Ancho mínimo del panel (panel). 10
minHeight number Altura mínima del panel (panel). 10
maxWidth number Ancho máximo del panel (panel). 10000
maxHeight number Altura máxima del panel (panel). 10000

Métodos

Nombre Parámetros Descripción
resize none Establece el tamaño del diseño (layout).
panel region Devuelve el panel (panel) especificado. Los valores posibles del parámetro 'region' son: 'north', 'south', 'east', 'west', 'center'.
collapse region Contrae el panel (panel) especificado. Los valores posibles del parámetro 'region' son: 'north', 'south', 'east', 'west'.
expand region Expande el panel (panel) especificado. Los valores posibles del parámetro 'region' son: 'north', 'south', 'east', 'west'.
add options Agrega un panel (panel) especificado; el parámetro options es un objeto de configuración. Para más detalles, consulte las propiedades del panel de pestañas (tab panel).
remove region Elimina el panel (panel) especificado. Los valores posibles del parámetro 'region' son: 'north', 'south', 'east', 'west'.
jQuery EasyUI 插件Complementos jQuery EasyUI Otras extensiones