Plugin de layout jQuery EasyUI -Accordion (panel plegable)

jQuery EasyUI 插件Plugins de jQuery EasyUI

Sobrescriba los valores predeterminados (defaults) mediante $.fn.accordion.defaults.

El panel plegable (accordion) le permite proporcionar múltiples paneles, mostrando uno o más a la vez. Cada panel tiene soporte integrado para expandirse y colapsarse. Al hacer clic en el encabezado de un panel, se expande o colapsa el cuerpo del panel. El contenido del panel se puede cargar mediante ajax especificando el atributo 'href'. El usuario puede definir el panel seleccionado. Si no se especifica, se selecciona por defecto el primer panel.

Dependencias

  • panel

Uso

Crear un panel plegable (Accordion)

Cree el panel plegable (Accordion) mediante marcado; agregue la clase 'easyui-accordion' a la etiqueta <div>.

<div id="aa" class="easyui-accordion" style="width:300px;height:200px;">
    <div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">
        <h3 style="color:#0099FF;">Accordion for jQuery</h3>
        <p>Accordion is a part of easyui framework for jQuery.
        It lets you define your accordion component on web page more easily.</p>
    </div>
    <div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">
        content2
    </div>
    <div title="Title3">
        content3
    </div>
</div>

Podemos modificar ciertas características después de cambiar o reconstruir el panel plegable (Accordion).

$('#aa').accordion({
    animate:false
});

Actualizar el contenido del panel plegable (Accordion Panel)

Llame al método 'getSelected' para obtener el panel actual; luego podemos llamar al método 'refresh' del panel para cargar contenido nuevo.

var pp = $('#aa').accordion('getSelected'); // 获取选中的面板（panel）
if (pp){
    pp.panel('refresh','new_content.php'); // 调用 'refresh' 方法加载新内容
}

Opciones del contenedor

Nombre Tipo Descripción Valor predeterminado
width number El ancho del contenedor del panel plegable (Accordion). auto
height number El alto del contenedor del panel plegable (Accordion). auto
fit boolean Si se establece en true, el tamaño del contenedor del panel plegable (Accordion) se adapta a su contenedor principal. false
border boolean Define si se muestra el borde. true
animate boolean Define si se muestran efectos de animación al expandir o colapsar un panel. true
multiple boolean Si se establece en true, se pueden expandir varios paneles a la vez. Esta propiedad está disponible desde la versión 1.3.5. false
selected number El índice del panel seleccionado inicialmente. Esta propiedad está disponible desde la versión 1.3.5. 0

Opciones del panel

Las opciones del panel plegable (Accordion) se heredan del panel. Las propiedades adicionales son las siguientes:

Nombre Tipo Descripción Valor predeterminado
selected boolean Si se establece en true, expande el panel. false
collapsible boolean Define si se muestra el botón de colapso. Si se establece en false, no se podrá expandir/colapsar el panel haciendo clic. true

Eventos

Nombre Parámetros Descripción
onSelect title,index Se activa cuando se selecciona un panel.
onUnselect title,index Se activa cuando se deselecciona un panel. Este evento está disponible desde la versión 1.3.5.
onAdd title,index Se activa cuando se agrega un nuevo panel.
onBeforeRemove title,index Se activa antes de eliminar un panel; devolver false cancela la acción de eliminación.
onRemove title,index Se activa cuando se elimina un panel.

Métodos

Nombre Parámetros Descripción
options none Devuelve las opciones del panel plegable (accordion).
panels none Obtiene todos los paneles.
resize none Ajusta el tamaño del panel plegable (accordion).
getSelected none Obtiene el primer panel seleccionado.
getSelections none Obtiene todos los paneles seleccionados. Este método está disponible desde la versión 1.3.5.
getPanel which Obtiene el panel especificado. El parámetro 'which' puede ser el título o el índice del panel.
getPanelIndex panel Obtiene el índice del panel especificado. Este método está disponible desde la versión 1.3.
El siguiente ejemplo muestra cómo obtener el índice del panel seleccionado.
var p = $('#aa').accordion('getSelected');
if (p){
    var index = $('#aa').accordion('getPanelIndex', p);
    alert(index);
}
select which Selecciona el panel especificado. El parámetro 'which' puede ser el título o el índice del panel.
unselect which Deselecciona el panel especificado. El parámetro 'which' puede ser el título o el índice del panel. Este método está disponible desde la versión 1.3.5.
add options Agrega un nuevo panel. De forma predeterminada, el panel recién agregado se seleccionará. Para agregar un nuevo panel que no esté seleccionado, pase la propiedad 'selected' y establézcala en false.
Ejemplo de código:
$('#aa').accordion('add', {
    title: 'New Title',
    content: 'New Content',
    selected: false
});
remove which Elimina el panel especificado. El parámetro 'which' puede ser el título o el índice del panel.
jQuery EasyUI 插件Plugins de jQuery EasyUI Otras extensiones