jQuery EasyUI Complemento de diseño -Tabs (pestañas)


jQuery EasyUI 插件Complementos de jQuery EasyUI

Sobrescriba los defaults predeterminados mediante $.fn.tabs.defaults.

The tabs display a collection of panel. It shows only one tab panel at a time. Each tab panel has the header title and some mini button tools, including close button and other customized buttons.

Dependencias

  • panel
  • linkbutton

Uso

Crear pestañas (Tabs)

1. Crear pestañas (Tabs) mediante marcado

Crear pestañas (Tabs) desde el marcado es más fácil: no necesitamos escribir ningún código JavaScript. Recuerde agregar la clase 'easyui-tabs' a la etiqueta <div>. Cada panel de pestañas (tab panel) se crea mediante una etiqueta <div> secundaria, y su uso es igual que el del panel (panel).

<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">
    <div title="Tab1" style="padding:20px;display:none;">
        tab1
    </div>
    <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">
        tab2
    </div>
    <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">
        tab3
    </div>
</div>

2. Crear pestañas (Tabs) mediante programación

Ahora creamos las pestañas (Tabs) mediante programación y también capturamos el evento 'onSelect'.

$('#tt').tabs({
    border:false,
    onSelect:function(title){
        alert(title+' is selected');
    }
});

Añadir un nuevo panel de pestañas (tab panel)

Añada un nuevo panel de pestañas (tab panel) mediante la mini barra de herramientas. El icono de la mini barra de herramientas (8x8) se coloca delante del botón de cierre.

// 添加一个新的标签页面板(tab panel)
$('#tt').tabs('add',{
    title:'New Tab',
    content:'Tab Body',
    closable:true,
    tools:[{
        iconCls:'icon-mini-refresh',
        handler:function(){
            alert('refresh');
        }
    }]
});

Obtener la pestaña (Tab) seleccionada

// 获取选中的标签页面板(tab panel)和它的标签页(tab)对象
var pp = $('#tt').tabs('getSelected');
var tab = pp.panel('options').tab; // 相应的标签页(tab)对象 

Propiedades

Nombre Tipo Descripción Valor predeterminado
width number El ancho del contenedor de pestañas (Tabs). auto
height number La altura del contenedor de pestañas (Tabs). auto
plain boolean Cuando se establece como true, no se utiliza la imagen de fondo del contenedor para mostrar la barra de pestañas. false
fit boolean Cuando se establece como true, se ajusta el tamaño del contenedor de pestañas (Tabs) para adaptarse a su contenedor principal. false
border boolean Cuando se establece como true, se muestra el borde del contenedor de pestañas (Tabs). true
scrollIncrement number El número de píxeles que se desplaza al presionar cada vez el botón de desplazamiento de pestañas. 100
scrollDuration number La duración en milisegundos que debe durar cada animación de desplazamiento. 400
tools array,selector La barra de herramientas colocada a la izquierda o a la derecha de la cabecera. Los valores posibles son:
1. Un array que indica un grupo de herramientas; cada opción de herramienta es igual que la del botón de enlace (Linkbutton).
2. Un selector que indica el <div> que contiene las herramientas.

Ejemplo de código:
Definir las herramientas mediante un array.
$('#tt').tabs({
    tools:[{
        iconCls:'icon-add',
        handler:function(){
            alert('add')
        }
    },{
        iconCls:'icon-save',
        handler:function(){
            alert('save')
        }
    }]
});
Definir las herramientas mediante un contenedor DOM existente.
$('#tt').tabs({
    tools:'#tab-tools'
});
<div id="tab-tools">
    <a href="../index.html" class="easyui-linkbutton" plain="true" iconCls="icon-add"></a>
    <a href="../index.html" class="easyui-linkbutton" plain="true" iconCls="icon-save"></a>
</div>
null
toolPosition string La posición de la barra de herramientas. Los valores posibles: 'left', 'right'. Esta propiedad está disponible desde la versión 1.3.2. right
tabPosition string La posición de las pestañas (tab). Los valores posibles: 'top', 'bottom', 'left', 'right'. Esta propiedad está disponible desde la versión 1.3.2. top
headerWidth number El ancho de la cabecera de las pestañas (tab); solo tiene efecto cuando tabPosition se establece como 'left' o 'right'. Esta propiedad está disponible desde la versión 1.3.2. 150
tabWidth number El ancho de la barra de pestañas. Esta propiedad está disponible desde la versión 1.3.4. auto
tabHeight number La altura de la barra de pestañas. Esta propiedad está disponible desde la versión 1.3.4. 27
selected number El índice de la pestaña seleccionada para la inicialización. Esta propiedad está disponible desde la versión 1.3.5. 0
showHeader boolean Cuando se establece como true, se muestra la cabecera de las pestañas (tab). Esta propiedad está disponible desde la versión 1.3.5. true

Eventos

Nombre Parámetros Descripción
onLoad panel Se dispara cuando un panel de pestañas (tab panel) ajax termina de cargar los datos remotos.
onSelect title,index Se dispara cuando el usuario selecciona un panel de pestañas (tab panel).
onUnselect title,index Se dispara cuando el usuario deselecciona un panel de pestañas (tab panel). Este evento está disponible desde la versión 1.3.5.
onBeforeClose title,index Se dispara antes de que un panel de pestañas (tab panel) sea cerrado; devolver false cancela la acción de cierre. El siguiente ejemplo demuestra cómo mostrar un cuadro de diálogo de confirmación antes de cerrar el panel de pestañas (tab panel).
$('#tt').tabs({
  onBeforeClose: function(title){
    return confirm('Are you sure you want to close ' + title);
  }
});
// using the async confirm dialog
$('#tt').tabs({
  onBeforeClose: function(title,index){
    var target = this;
    $.messager.confirm('Confirm','Are you sure you want to close '+title,function(r){
        if (r){
            var opts = $(target).tabs('options');
            var bc = opts.onBeforeClose;
            opts.onBeforeClose = function(){};  // allowed to close now
            $(target).tabs('close',index);
            opts.onBeforeClose = bc;  // restore the event function
        }
    });
    return false;    // prevent from closing
  }
});
onClose title,index Se dispara cuando el usuario cierra un panel de pestañas (tab panel).
onAdd title,index Se dispara cuando se añade un nuevo panel de pestañas (tab panel).
onUpdate title,index Se dispara cuando se actualiza un panel de pestañas (tab panel).
onContextMenu e, title,index Se dispara cuando se hace clic derecho en un panel de pestañas (tab panel).

Métodos

Nombre Parámetros Descripción
options none Devuelve las opciones (options) de las pestañas (tabs).
tabs none Devuelve todos los paneles de pestañas (tab panel).
resize none Ajusta el tamaño del contenedor de pestañas (tabs) y realiza el diseño.
add options Añade un nuevo panel de pestañas (tab panel); el parámetro options es un objeto de configuración. Para obtener más detalles, consulte las propiedades del panel de pestañas (tab panel).
Cuando se añade un nuevo panel de pestañas (tab panel), este será seleccionado.
Si necesita añadir un panel de pestañas (tab panel) no seleccionado, recuerde establecer la propiedad 'selected' como false.
// add a unselected tab panel
$('#tt').tabs('add',{
    title: 'new tab',
    selected: false
    //...
});
close which Cierra un panel de pestañas (tab panel). El parámetro 'which' puede ser el título (title) o el índice (index) del panel de pestañas (tab panel) que se va a cerrar.
getTab which Obtiene el panel de pestañas (tab panel) especificado. El parámetro 'which' puede ser el título (title) o el índice (index) del panel de pestañas (tab panel).
getTabIndex tab Obtiene el índice del panel de pestañas (tab panel) especificado.
getSelected none Obtiene el panel de pestañas (tab panel) seleccionado. El siguiente ejemplo demuestra cómo obtener el índice del panel de pestañas (tab panel) seleccionado.
var tab = $('#tt').tabs('getSelected');
var index = $('#tt').tabs('getTabIndex',tab);
alert(index);
select which Selecciona un panel de pestañas (tab panel). El parámetro 'which' puede ser el título (title) o el índice (index) del panel de pestañas (tab panel).
unselect which Selecciona un panel de pestañas (tab panel). El parámetro 'which' puede ser el título (title) o el índice (index) del panel de pestañas (tab panel). Este método está disponible desde la versión 1.3.5.
showHeader none Muestra la cabecera de las pestañas (tabs). Este método está disponible desde la versión 1.3.5.
hideHeader none Oculta la cabecera de las pestañas (tabs). Este método está disponible desde la versión 1.3.5.
exists which Indica si el panel especificado ya existe. El parámetro 'which' puede ser el título (title) o el índice (index) del panel de pestañas (tab panel).
update param Actualiza el panel de pestañas (tab panel) especificado. El parámetro param contiene dos propiedades:
tab: el panel de pestañas (tab panel) que se actualiza.
options: las opciones (options) del panel (panel).

Ejemplo de código:
// update the selected panel with new title and content
var tab = $('#tt').tabs('getSelected');  // get selected panel
$('#tt').tabs('update', {
    tab: tab,
    options: {
        title: 'New Title',
        href: 'get_content.php'  // the new content URL
    }
});

// call 'refresh' method for tab panel to update its content
var tab = $('#tt').tabs('getSelected');  // get selected panel
tab.panel('refresh', 'get_content.php');
enableTab which Habilita el panel de pestañas (tab panel) especificado. El parámetro 'which' puede ser el título (title) o el índice (index) del panel de pestañas (tab panel). Este método está disponible desde la versión 1.3.

Ejemplo de código:
$('#tt').tabs('enableTab', 1);    // enable the second tab panel
$('#tt').tabs('enableTab', 'Tab2');    enable the tab panel that has 'Tab2' title
disableTab which Deshabilita el panel de pestañas (tab panel) especificado. El parámetro 'which' puede ser el título (title) o el índice (index) del panel de pestañas (tab panel). Este método está disponible desde la versión 1.3.

Ejemplo de código:
$('#tt').tabs('disableTab', 1);    // disable the second tab panel.
scrollBy deltaX Desplaza la cabecera de las pestañas (tab) en el número de píxeles especificado; un valor negativo indica desplazamiento hacia la derecha, un valor positivo indica desplazamiento hacia la izquierda. Este método está disponible desde la versión 1.3.2.

Ejemplo de código:
// scroll the tab header to left
$('#tt').tabs('scroll', 10);

Panel de pestañas (Tab Panel)

Las propiedades del panel de pestañas (tab panel) se definen en el componente panel (panel). A continuación se muestran algunas propiedades de uso común.

Nombre Tipo Descripción Valor predeterminado
id string El atributo id del panel de pestañas (tab panel). null
title string El texto del título del panel de pestañas (tab panel).
content string El contenido del panel de pestañas (tab panel).
href string La URL para cargar contenido remoto y rellenar el panel de pestañas (tab panel). null
cache boolean Cuando se establece como true, se almacena en caché este panel de pestañas (tab panel) cuando se ha establecido un atributo href válido. true
iconCls string Clase CSS del icono que se muestra en el título del panel de pestañas (tab panel). null
width number Ancho del panel de pestañas (tab panel). auto
height number Alto del panel de pestañas (tab panel). auto
collapsible boolean Cuando se establece en true, permite que el panel de pestañas (tab panel) sea plegable. false

Algunas propiedades adicionales.

Nombre Tipo Descripción Valor por defecto
closable boolean Cuando se establece en true, el panel de pestañas (tab panel) mostrará un botón de cierre; al hacer clic en él, se cerrará este panel de pestañas (tab panel). false
selected boolean Cuando se establece en true, el panel de pestañas (tab panel) será seleccionado. false

jQuery EasyUI 插件Complemento jQuery EasyUI Otras extensiones