jQuery EasyUI Complemento de diseño -Tabs (pestañas)
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 |
Complemento jQuery EasyUI Otras extensiones