Foundation - Utilità JavaScript

Foundation include utilità JavaScript utilizzate per aggiungere funzionalità comuni. È molto utile e facile da usare. Questa libreria di utilità JavaScript può essere trovata nella cartella Your_folder_name / node_modules / foundation-sites / js

Scatola

La libreria Foundation.Box consiste in un paio di metodi.
Il js/foundation.util.box.js è il nome del file dello script, che può essere incluso durante la scrittura del codice.
Ad entrambi i metodi possono essere passati oggetti jQuery o semplici elementi JavaScript.

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

L'oggetto restituito specifica la dimensione dell'elemento come -

{
   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: ...
   }
}

La funzione ImNotTouchingYou è inclusa.
In base all'elemento passato, viene restituito un valore booleano, che è un conflitto con il bordo della finestra o un elemento facoltativo o genitore.
Le due opzioni specificate nella riga riportata di seguito, ovvero leftAndRightOnly, topAndBottomOnly vengono utilizzate per identificare la collisione su un solo asse.

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

Tastiera

Esistono molti metodi in Foundation.Keyboard , che aiutano a semplificare l'interazione con gli eventi della tastiera.
Il js/foundation.util.keyboard.js è il nome del file dello script, che può essere incluso durante la scrittura del codice.
L'oggetto Foundation.Keyboard.keys è costituito da coppie chiave / valore, le cui chiavi vengono utilizzate più frequentemente nel framework.
Ogni volta che viene premuto il tasto , viene chiamato Foundation.Keyboard.parseKey per ottenere una stringa. Questo aiuta a gestire i propri input da tastiera.

Il codice seguente viene utilizzato per trovare tutti gli elementi attivabili all'interno dell'elemento $ specificato . Pertanto, non è necessario scrivere alcuna funzione e selettore da parte dell'utente.

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

La funzione handleKey è una funzione principale di questa libreria.
Questo metodo viene utilizzato per gestire l'evento della tastiera; può essere chiamato ogni volta che un plugin è registrato con l'utilità.

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

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

La funzione Foundation.Keyboard.register può essere chiamata quando si desidera utilizzare le proprie associazioni di tasti.

MediaQuery

La libreria MediaQuery è una spina dorsale di tutta la tecnica CSS reattiva.
Il js/foundation.util.mediaQuery.js è il nome del file dello script, che può essere incluso durante la scrittura del codice.
Il Foundation.MediaQuery.atLeast ( 'grande') viene utilizzata per verificare se lo schermo è almeno largo quanto un punto di interruzione.
Il Foundation.MediaQuery.get ( 'medium') ottiene la media query di un punto di interruzione.
I Foundation.MediaQuery.queries sono una serie di media query, Fondazione utilizza per i punti di interruzione.
Il Foundation.MediaQuery.current è una stringa della dimensione arresto corrente.

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

Il codice seguente trasmette la modifica della query multimediale nella finestra.

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

Movimento e movimento

Il javascript Foundation.Motion è simile alla libreria Motion UI, inclusa in Foundation 6. Viene utilizzato per creare transizioni CSS e animazioni personalizzate.
Il js/foundation.util.motion.js è il nome del file dello script, che può essere incluso durante la scrittura del codice.
Foundation.Move è utilizzato per rendere l'animazione supportata da CSS3 semplice ed elegante.
requestAnimationFrame();il metodo indica al browser di eseguire un'animazione; richiede che la funzione di animazione venga chiamata prima che il browser esegua il successivo ridisegno.

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

Quando l'animazione è stata completata, finished.zf.animate viene licenziato.

Timer e immagini caricate

Orbit utilizza entrambi, la funzione timer e l'immagine caricata. Iljs/foundation.util.timerAndImageLoader.js è il nome del file dello script, che può essere incluso durante la scrittura del codice.

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

Il metodo caricato con immagini esegue una funzione di callback nella raccolta jQuery quando le immagini sono completamente caricate.

Foundation.onImagesLoaded($images, callback);

Toccare

I metodi vengono utilizzati per aggiungere pseudo eventi di trascinamento e scorrere agli elementi.
Il js/foundation.util.touch.js è il nome del file dello script, che può essere incluso durante la scrittura del codice.
Il metodo addTouch viene utilizzato per associare elementi a eventi di tocco nel plug-in Slider per dispositivi mobili.
Il metodo spotSwipe lega gli elementi agli eventi di scorrimento nel plug-in Orbit per dispositivi mobili.

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

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

Trigger

Attiva l'evento specificato per gli elementi selezionati.
Il js/foundation.util.triggers.js è il nome del file dello script, che può essere incluso durante la scrittura del codice.
I trigger sono utilizzati in molti plugin Foundation.

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

In questa libreria vengono utilizzati i due metodi seguenti, ovvero ridimensionamento e scorrimento.

Il metodo resize () attiva l'evento resize quando si verifica un evento resize.
Il metodo scroll () attiva l'evento scroll quando si verifica un evento scroll.

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

Miscellanea

Foundation contiene poche funzionalità nella libreria principale, che vengono utilizzate in molti luoghi.
Il js/foundation.core.js è il nome del file dello script, che può essere incluso durante la scrittura del codice.
Foundation.GetYoDigits ([numero, spazio dei nomi]) restituisce un uid casuale in base 36 con spaziatura dei nomi. Restituisce la lunghezza della stringa di 6 caratteri per impostazione predefinita.
Foundation.getFnName (fn) restituisce un nome di funzione JavaScript.
Foundation.transitionend si verifica quando la transizione CSS è completata.