Fundación - JavaScript
En este capítulo, estudiaremos sobre JavaScript . Es fácil configurar JavaScript en Foundation; lo único que necesita es jQuery.
Instalación de JavaScript
Puede usar la descarga ZIP, el administrador de paquetes o CDN para obtener el archivo Foundation JavaScript. En su código, puede proporcionar enlaces a jQuery y Foundation como etiquetas <script>, colocadas antes del <body> de cierre y verificar que Foundation se cargue después de jQuery. Para más información haga clic aquí .
Estructura de archivo
Cuando instala Foundation a través de la línea de comandos, los complementos de Foundation se descargan como archivos individuales, como foundation.tabs.js , foundation.dropdownMenu.js , foundation.slider.js , etc. Todos estos archivos se combinan en foundation.js , que proporciona todos los complementos a la vez. Si desea utilizar algún complemento, primero debe cargar foundation.core.js .
Por ejemplo
<script src = "js/jquery.min.js"></script>
<script src = "js/foundation.core.js"></script>
<script src = "js/foundation.tabs.js"></script>Algunos complementos pueden requerir bibliotecas de utilidades particulares, que vienen con la instalación de Foundation. Puede estudiar en detalle los requisitos específicos de los complementos en el próximo capítulo Utilidades de JavaScript .
La carga de archivos individuales crea una sobrecarga de red, específicamente para usuarios móviles. Para una carga de página más rápida, se recomienda el uso de gruñido o trago .
Inicializando
La función foundation () se utiliza para inicializar todos los complementos Foundation a la vez.
Por ejemplo
(document).foundation();Usar complementos
Usando atributos de datos, los complementos se conectan a elementos HTML ya que coinciden con el nombre de los complementos. Un solo elemento HTML puede tener solo un complemento a la vez, aunque la mayoría de los complementos se pueden anidar dentro de otros. Por ejemplo, el enlace de información sobre herramientas se crea agregando información sobre herramientas de datos . Para más información haga clic aquí .
Configurar complementos
Los complementos se pueden personalizar mediante sus ajustes de configuración. Por ejemplo, puede configurar la velocidad de los deslizamientos del acordeón hacia arriba y hacia abajo. La configuración del complemento se puede cambiar globalmente utilizando el complementoDEFAULTSpropiedad. Para más información haga clic aquí .
Agregar complementos después de cargar la página
Cuando se agrega HTML nuevo al DOM, ninguno de los complementos de esos elementos no se inicializará de forma predeterminada. Puede buscar nuevos complementos volviendo a llamar a la función .foundation () .
Por ejemplo
$.ajax('assets/partials/kitten-carousel.html', function(data) {
$('#kitten-carousel'</span>).html(data).foundation();
});Uso programático
En JavaScript, los complementos se pueden crear mediante programación y cada complemento es la clase del objeto Foundation global , con un constructor que toma dos parámetros, como un elemento y un objeto.
var $accordion = new Foundation.Accordion($('#accordion'), {
slideSpeed: 600, multiExpand: true
});La mayoría de los complementos se proporcionan con API pública, lo que le permite manipularlo a través de JavaScript. Puede consultar la documentación del complemento para estudiar las funciones disponibles y los métodos se pueden invocar fácilmente.
Por ejemplo
$('.tooltip').foundation('destroy');
// this will destroy all Tooltips on the page.
$('#reveal').foundation('open');
// this will open a Reveal modal with id `reveal`.
$('[data-tabs]').eq(0).foundation('selectTab', $('#example'));
// this will change the first Tabs on the page to whatever panel you choose.Se le permite elegir cualquier selector de jQuery y si el selector contiene varios complementos, todos tendrán el método elegido idéntico llamado.
Los argumentos se pueden pasar como si se pasaran argumentos a JavaScript.
Los métodos que tienen el prefijo de subrayado (_) se consideran una parte de la API interna, lo que significa que sin previo aviso pueden romperse, cambiar o incluso desaparecer.
Eventos
Siempre que finaliza una función específica, DOM desencadena un evento. Por ejemplo, cada vez que se cambian las pestañas, se puede escuchar y crear una respuesta de retorno. Cada complemento puede activar una lista de eventos, que se documentará en la documentación del complemento. En Foundation 6, los complementos de devolución de llamada se eliminan y deben tomarse como detectores de eventos.
Por ejemplo
$('[data-tabs]').on('change.zf.tabs', function() {
console.log('Tabs are changed!');
});