Fundação - JavaScript

Neste capítulo, estudaremos sobre JavaScript . É fácil configurar o JavaScript no Foundation; a única coisa que você precisa é jQuery.

Instalação de JavaScript

Você pode usar o download de ZIP, gerenciador de pacotes ou CDN para obter o arquivo Foundation JavaScript. Em seu código, você pode fornecer links para jQuery e Foundation como tags <script>, colocadas antes do <body> de fechamento e verificar se o Foundation é carregado após jQuery. Para mais informações clique aqui .

Estrutura do Arquivo

Quando você instala o Foundation por meio da linha de comando, os plug-ins do Foundation são baixados como arquivos individuais, como Foundation.tabs.js , Foundation.dropdownMenu.js , Foundation.slider.js e assim por diante. Todos esses arquivos são combinados em Foundation.js , que fornece todos os plug-ins de uma vez. Se você deseja usar algum plugin, primeiro o Foundation.core.js deve ser carregado.

Por exemplo -

<script src = "js/jquery.min.js"></script>
<script src = "js/foundation.core.js"></script>
<script src = "js/foundation.tabs.js"></script>

Certos plug-ins podem exigir bibliotecas de utilitários específicos, que vêm com a instalação do Foundation. Você pode estudar em detalhes sobre os requisitos de plug-ins específicos no próximo capítulo Utilitários de JavaScript .

Carregar arquivos individuais cria sobrecarga de rede, especificamente para usuários móveis. Para carregamento mais rápido da página, o uso de grunhido ou gole é recomendado.

Inicializando

A função Foundation () é usada para inicializar todo o plugin Foundation de uma vez.

Por exemplo -

(document).foundation();

Usando Plugins

Usando atributos de dados, os plug-ins são conectados a elementos HTML conforme eles correspondem ao nome dos plug-ins. Um único elemento HTML pode ter apenas um plug-in por vez, embora a maioria dos plug-ins possa ser aninhada em outros. Por exemplo, o link de dica de ferramenta é criado adicionando dados-dica de ferramenta . Para mais informações clique aqui .

Configurando Plugins

Os plug-ins podem ser personalizados usando suas configurações. Por exemplo, você pode definir a velocidade dos slides do acordeão para cima e para baixo. As configurações do plugin podem ser alteradas globalmente usando oDEFAULTSpropriedade. Para mais informações clique aqui .

Adicionando Plugins após o Carregamento da Página

Quando um novo HTML é adicionado ao DOM, qualquer um dos plug-ins nesses elementos não será inicializado por padrão. Você pode verificar se há novos plug-ins chamando novamente a função .foundation () .

Por exemplo -

$.ajax('assets/partials/kitten-carousel.html', function(data) {
   $('#kitten-carousel'</span>).html(data).foundation();
});

Uso Programático

Em JavaScript, os plug-ins podem ser criados programaticamente e cada plug-in é uma classe do objeto Foundation global , com um construtor que leva dois parâmetros, como um elemento e um objeto.

var $accordion = new Foundation.Accordion($('#accordion'), {
   slideSpeed: 600, multiExpand: true
});

A maioria dos plug-ins são fornecidos com API pública, que permite manipulá-los via JavaScript. Você pode olhar através da documentação do plugin para estudar as funções disponíveis e os métodos podem ser chamados facilmente.

Por exemplo -

$('.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.

  • Você tem permissão para escolher qualquer seletor jQuery e se o seletor contiver vários plug-ins, todos eles terão um método idêntico escolhido chamado.

  • Os argumentos podem ser transmitidos da mesma forma que os argumentos do JavaScript.

  • Os métodos prefixados com sublinhado (_) são considerados parte da API interna, o que significa que, sem aviso, eles podem quebrar, mudar ou até mesmo desaparecer.

Eventos

Sempre que uma função específica termina, o DOM dispara um evento. Por exemplo, sempre que as guias são alteradas, pode-se ouvir e criar uma resposta de retorno. Cada plugin pode disparar uma lista de eventos, que será documentada na documentação do plugin. No Foundation 6, os plug-ins de retorno de chamada são removidos e devem ser considerados ouvintes de eventos.

Por exemplo -

$('[data-tabs]').on('change.zf.tabs', function() {
   console.log('Tabs are changed!');
});