Foundation - Referencia de JavaScript detallada
Foundation proporciona componentes JavaScript para un menú detallado como se indica a continuación.
Inicializando
Puede inicializar el menú detallado en JavaScript mediante los complementos foundation.drilldown.js y foundation.core.js . El complemento requiere las siguientes bibliotecas:
foundation.util.keyboard.js
foundation.util.motion.js
foundation.util.nest.js
Fundación.
Especifica la instancia de un menú detallado como se define a continuación:
var elem = new Foundation.Drilldown(element);| No Señor. | Nombre y descripción | Tipo |
|---|---|---|
| 1 | element Crea un objeto jQuery en un menú detallado. |
jQuery |
| 2 | options La configuración predeterminada del complemento se anula. |
Objeto |
Opciones de complementos
Puede utilizar el siguiente complemento para personalizar la instancia del menú detallado. Puede configurar la opción de complemento como atributos de datos individuales.
| No Señor. | Nombre y descripción | Ejemplo |
|---|---|---|
| 1 | backButton Se requiere la clase js-drilldown-back . Para el botón de retroceso generado por JS, se utiliza el marcado. |
|
| 2 | wrapper Se requiere la clase is-drilldown para un estilo independiente. |
|
| 3 | closeOnClick Al hacer clic en el cuerpo, ayuda al menú a volver a la lista raíz. |
falso |
Eventos
El complemento de menús detallados adjunto a cualquier elemento puede desencadenar el siguiente evento.
| No Señor. | Nombre y descripción |
|---|---|
| 1 | closed.zf.drilldown menu Activa un evento cuando el menú está completamente cerrado. |
| 2 | hide.zf.drilldown menus Activa un evento cuando se cierran los submenús abiertos. |
Funciones
Las siguientes son las funciones utilizadas en el menú detallado.
._ocultar todo
Cierra todos los elementos que están abiertos y regresa al menú raíz.
._espalda
En cada botón de retroceso se incluye el oyente de eventos.
| No Señor. | Nombre y descripción | Tipo |
|---|---|---|
| 1 | $elem El evento posterior se incluye en el submenú actual. |
jQuery |
._show
Se abren los submenús.
| No Señor. | Nombre y descripción | Tipo |
|---|---|---|
| 1 | $elem Abre los submenús actuales. |
jQuery |
._esconder
El submenú está oculto.
| No Señor. | Nombre y descripción | Tipo |
|---|---|---|
| 1 | $elem Oculta el submenú actual |
jQuery |
.destruir
El menú detallado se destruye.