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.