Foundation - Utilitários JavaScript

O Foundation inclui utilitários JavaScript que são usados ​​para adicionar funcionalidades comuns. É muito útil e fácil de usar. Esta biblioteca de utilitários JavaScript pode ser encontrada na pasta Your_folder_name / node_modules / foundation-sites / js

Caixa

  • A biblioteca Foundation.Box consiste em alguns métodos.

  • o js/foundation.util.box.js é o nome do arquivo do script, que pode ser incluído durante a gravação do código.

  • Objetos jQuery ou elementos JavaScript simples podem ser passados ​​para ambos os métodos.

var dims = Foundation.Box.GetDimensions(element);

O objeto retornado especifica a dimensão do elemento como -

{
   height: 54,
   width: 521,
   offset: {
      left: 198,
      top: 1047
   },
   
   parentDims: {
      height: ...    //The same format is share for parentDims and windowDims as the element dimensions.
   },
   
   windowDims: {
      height: ...
   }
}

  • A função ImNotTouchingYou está incluída.

  • Com base no elemento passado, um valor booleano é retornado, que é um conflito com a borda da janela ou opcional ou um elemento pai.

  • As duas opções especificadas na linha fornecida abaixo, isto é, leftAndRightOnly, topAndBottomOnly é usado para identificar a colisão em apenas um eixo.

var clear = Foundation.Box.ImNotTouchingYou (
   element [, parent, leftAndRightOnly, topAndBottomOnly]);

Teclado

  • Existem muitos métodos em Foundation.Keyboard , que ajudam a tornar a interação de eventos do teclado mais fácil.

  • o js/foundation.util.keyboard.js é o nome do arquivo do script, que pode ser incluído durante a gravação do código.

  • O objeto Foundation.Keyboard.keys consiste em pares de chave / valor, quais chaves são usadas na estrutura com mais freqüência.

  • Sempre que a tecla é pressionada, Foundation.Keyboard.parseKey é chamada para obter uma string. Isso ajuda a gerenciar suas próprias entradas de teclado.

O código a seguir é usado para localizar todos os elementos focalizáveis ​​dentro de um determinado $ elemento . Portanto, não há necessidade de escrever nenhuma função e seletor por você.

var focusable = Foundation.Keyboard.findFocusable($('#content'));

  • A função handleKey é uma função principal desta biblioteca.

  • Este método é usado para manipular o evento do teclado; ele pode ser chamado sempre que qualquer plugin for registrado com o utilitário.

Foundation.Keyboard.register('pluginName', {
   'TAB': 'next'
});

...//in event callback
Foundation.Keyboard.handleKey(event, 'pluginName', {
   next: function(){
      //do stuff
   }
});

A função Foundation.Keyboard.register pode ser chamada quando você deseja usar suas próprias combinações de teclas.

MediaQuery

  • A biblioteca MediaQuery é a espinha dorsal de todas as técnicas de CSS responsivas.

  • o js/foundation.util.mediaQuery.js é o nome do arquivo do script, que pode ser incluído durante a gravação do código.

  • O Foundation.MediaQuery.atLeast ('large') é usado para verificar se a tela é pelo menos tão larga quanto um ponto de interrupção.

  • O Foundation.MediaQuery.get ('medium') obtém a consulta de mídia de um ponto de interrupção.

  • O Foundation.MediaQuery.queries é uma matriz de consultas de mídia que o Foundation usa para pontos de interrupção.

  • O Foundation.MediaQuery.current é uma string do tamanho do ponto de interrupção atual.

Foundation.MediaQuery.get('medium');
Foundation.MediaQuery.atLeast('large');
Foundation.MediaQuery.queries;
Foundation.MediaQuery.current;

O código a seguir transmite a alteração da consulta de mídia na janela.

$(window).on('changed.zf.mediaquery', function(event, newSize, oldSize){});

Movimento e movimento

  • Foundation.Motion javascript é semelhante à biblioteca Motion UI, que está incluída no Foundation 6. É usada para criar transições e animações CSS personalizadas.

  • o js/foundation.util.motion.js é o nome do arquivo do script, que pode ser incluído durante a gravação do código.

  • Foundation.Move é usado para tornar a animação baseada em CSS3 simples e elegante.

  • requestAnimationFrame();método diz ao navegador para executar uma animação; ele solicita que sua função de animação seja chamada antes que o navegador execute a próxima repintura.

Foundation.Move(durationInMS, $element, function() {
   //animation logic
});

Quando a animação é concluída, finish.zf.animate é disparado.

Temporizador e imagens carregadas

O Orbit usa ambos, o temporizador de função e a imagem carregada. ojs/foundation.util.timerAndImageLoader.js é o nome do arquivo do script, que pode ser incluído durante a gravação do código.

var timer = new Foundation.Timer($element, {duration: ms, infinite: bool}, callback);

O método carregado por imagem executa uma função de retorno de chamada em sua coleção jQuery quando as imagens são completamente carregadas.

Foundation.onImagesLoaded($images, callback);

Toque

  • Os métodos são usados ​​para adicionar eventos de pseudo-arrastar e deslizar para elementos.

  • o js/foundation.util.touch.js é o nome do arquivo do script, que pode ser incluído durante a gravação do código.

  • O método addTouch é usado para vincular elementos a eventos de toque no plug-in Slider para dispositivos móveis.

  • O método spotSwipe vincula os elementos a eventos de deslizamento no plug-in Orbit para dispositivos móveis.

$('selector').addTouch().on('mousemove', handleDrag);

$('selector').spotSwipe().on('swipeleft', handleLeftSwipe);

Gatilhos

  • Ele aciona o evento especificado para os elementos selecionados.

  • o js/foundation.util.triggers.js é o nome do arquivo do script, que pode ser incluído durante a gravação do código.

  • Os gatilhos são utilizados em muitos plugins do Foundation.

$('selector').on('open.zf.trigger', handleOpen);
$('selector').on('close.zf.trigger', handleClose);
$('selector').on('toggle.zf.trigger', handleToggle);

Os dois métodos a seguir são usados ​​nesta biblioteca, ou seja, redimensionar e rolar.

  • O método resize () dispara o evento resize quando ocorre um evento resize.

  • O método scroll () aciona o evento scroll quando ocorre um evento scroll.

$('#someId').on('scrollme.zf.trigger', handleScroll);
$('#someId').on('resizeme.zf.trigger', handleResize);

Diversos

  • O Foundation contém poucos recursos na biblioteca principal, que são usados ​​em muitos lugares.

  • o js/foundation.core.js é o nome do arquivo do script, que pode ser incluído durante a gravação do código.

  • Foundation.GetYoDigits ([número, namespace]) retorna um uid de base 36 aleatório com namespacing. Ele retorna o comprimento da string de 6 caracteres por padrão.

  • Foundation.getFnName (fn) retorna um nome de função JavaScript.

  • Foundation.transitionend ocorre quando a transição CSS é concluída.