Foundation - Referencia de JavaScript de pestañas
Foundation proporciona componentes de JavaScript para las pestañas que se enumeran a continuación:
Inicializando
Puede inicializar el panel en JavaScript mediante los complementos foundation.tabs.js y foundation.core.js . El complemento foundation.core.js requiere las siguientes bibliotecas:
foundation.util.keyboard.js
foundation.util.timerAndImageLoader.js
Foundation.Tabs
Especifica la instancia de las pestañas como se define a continuación:
var my_element = new Foundation.Tabs(element);Las pestañas incluyen los siguientes valores:
| No Señor. | Nombre y descripción | Tipo |
|---|---|---|
| 1 |
element Utiliza el objeto jQuery para las pestañas. |
Número |
| 2 |
options Reemplaza la configuración predeterminada del complemento para las pestañas. |
Objeto |
Opciones de complementos
Puede utilizar las siguientes opciones de complemento para personalizar la instancia de pestañas.
| No Señor. | Nombre y descripción | Ejemplo |
|---|---|---|
| 1 |
autoFocus Si configura este complemento en verdadero, la ventana se desplazará hasta el contenido del panel activo al cargar. |
falso |
| 2 |
wrapOnKeys Envuelve el contenido alrededor de enlaces de pestañas usando la entrada del teclado. |
cierto |
| 3 |
matchHeight Coincide con la altura de los paneles de contenido de las pestañas estableciéndolo en verdadero. |
falso |
| 4 |
linkClass Se aplica a la lista de enlaces 'li's in tab. |
'título de pestañas' |
| 5 |
panelClass Se aplica a los contenedores de contenido. |
'panel de pestañas' |
Eventos
Tabs proporciona el siguiente evento que se enumera en la tabla:
| No Señor. | Descripción del evento |
|---|---|
| 1 |
change.zf.tabs Se activa cuando el complemento cambia la pestaña correctamente. |
Funciones
Las pestañas proporcionan las siguientes funciones como se definen a continuación:
._handleTabChange
Maneja la pestaña $ targetContent especificada por la función $ target como se muestra en la siguiente tabla:
| No Señor. | Nombre y descripción | Tipo |
|---|---|---|
| 1 |
$target Abrirá la pestaña. |
jQuery |
.selectTab
Se utiliza para seleccionar el panel de contenido para mostrar el contenido y se puede especificar como se muestra en la siguiente tabla:
| No Señor. | Nombre y descripción | Tipo |
|---|---|---|
| 1 |
elem Utiliza el objeto jQuery o la identificación del panel para mostrar el panel de contenido. |
jQuery |
.destruir
Se utiliza para destruir la instancia de pestaña.