Podstawa - narzędzia JavaScript

Foundation zawiera narzędzia JavaScript używane do dodawania typowych funkcji. Jest bardzo pomocny i łatwy w użyciu. Tę bibliotekę narzędzi JavaScript można znaleźć w folderze Your_folder_name / node_modules / Foundation-sites / js

Pudełko

Biblioteka Foundation.Box składa się z kilku metod.
Plik js/foundation.util.box.js to nazwa pliku skryptu, którą można dołączyć podczas pisania kodu.
Obie metody mogą być przekazywane zarówno obiektom jQuery, jak i zwykłym elementom JavaScript.

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

Zwrócony obiekt określa wymiar elementu jako -

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

Funkcja ImNotTouchingYou jest dołączona.
Na podstawie przekazanego elementu zwracana jest wartość logiczna, która jest albo konfliktem z krawędzią okna, albo elementem opcjonalnym lub nadrzędnym.
Dwie opcje określone w linii podanej poniżej, tj. LeftAndRightOnly, topAndBottomOnly są używane do identyfikacji kolizji tylko na jednej osi.

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

Klawiatura

W Foundation.Keyboard istnieje wiele metod , które ułatwiają interakcję z klawiaturą.
Plik js/foundation.util.keyboard.js to nazwa pliku skryptu, którą można dołączyć podczas pisania kodu.
Obiekt Foundation.Keyboard.keys zawiera pary klucz / wartość, które klucze są częściej używane we frameworku.
Za każdym naciśnięciem klawisza wywoływana jest funkcja Foundation.Keyboard.parseKey w celu pobrania łańcucha. Pomaga to zarządzać własnymi wejściami klawiatury.

Poniższy kod służy do znajdowania wszystkich elementów, które można ustawić w danym elemencie $ . Dlatego nie musisz samodzielnie pisać żadnej funkcji i selektora.

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

Funkcja handleKey jest główną funkcją tej biblioteki.
Ta metoda jest używana do obsługi zdarzenia klawiatury; można go wywołać za każdym razem, gdy jakakolwiek wtyczka zostanie zarejestrowana w narzędziu.

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

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

Funkcję Foundation.Keyboard.register można wywołać, gdy chcesz użyć własnych powiązań klawiszy.

MediaQuery

Biblioteka MediaQuery jest podstawą wszystkich responsywnych technik CSS.
Plik js/foundation.util.mediaQuery.js to nazwa pliku skryptu, którą można dołączyć podczas pisania kodu.
Foundation.MediaQuery.atLeast ( „duże”) służy do sprawdzenia, czy ekran jest co najmniej tak szeroka jak przerwania.
Foundation.MediaQuery.get ( „Medium”) dostaje zapytania medialnego punktu przerwania.
W Foundation.MediaQuery.queries są tablicą z zapytaniami mediów, Fundacja używa do pułapki.
Foundation.MediaQuery.current jest ciągiem bieżącego rozmiaru punktu przerwania.

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

Poniższy kod rozgłasza zmianę zapytania o media w oknie.

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

Ruch i ruch

JavaScript Foundation.Motion jest podobna do biblioteki Motion UI, która jest zawarta w Foundation 6. Służy do tworzenia niestandardowych przejść i animacji CSS.
Plik js/foundation.util.motion.js to nazwa pliku skryptu, którą można dołączyć podczas pisania kodu.
Foundation.Move służy do tworzenia prostych i eleganckich animacji wspieranych przez CSS3.
requestAnimationFrame();nakazuje przeglądarce wykonanie animacji; żąda wywołania funkcji animacji przed wykonaniem przez przeglądarkę kolejnego malowania.

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

Gdy animacja jest zakończona, finished.zf.animate jest zwolniony.

Timer i załadowano obrazy

Orbit używa zarówno licznika funkcji, jak i załadowanego obrazu. Plikjs/foundation.util.timerAndImageLoader.js to nazwa pliku skryptu, którą można dołączyć podczas pisania kodu.

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

Metoda z załadowanym obrazem uruchamia funkcję zwrotną w kolekcji jQuery, gdy obrazy są całkowicie załadowane.

Foundation.onImagesLoaded($images, callback);

Dotknąć

Metody służą do dodawania zdarzeń pseudoprzeciągania i przesuwania do elementów.
Plik js/foundation.util.touch.js to nazwa pliku skryptu, którą można dołączyć podczas pisania kodu.
Metoda addTouch służy do wiązania elementów ze zdarzeniami dotykowymi we wtyczce Slider dla urządzeń mobilnych.
Metoda spotSwipe wiąże elementy, aby przesuwać zdarzenia we wtyczce Orbit dla urządzeń mobilnych.

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

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

Wyzwalacze

Wywołuje określone zdarzenie dla wybranych elementów.
Plik js/foundation.util.triggers.js to nazwa pliku skryptu, którą można dołączyć podczas pisania kodu.
Wyzwalacze są używane w wielu wtyczkach Foundation.

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

W tej bibliotece używane są dwie metody, tj. Zmiana rozmiaru i przewijanie.

Metoda resize () wyzwala zdarzenie resize, gdy wystąpi zdarzenie resize.
Metoda scroll () wyzwala zdarzenie scroll, gdy wystąpi zdarzenie scroll.

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

Różne

Foundation zawiera kilka funkcji z podstawowej biblioteki, które są używane w wielu miejscach.
Plik js/foundation.core.js to nazwa pliku skryptu, którą można dołączyć podczas pisania kodu.
Foundation.GetYoDigits ([liczba, przestrzeń nazw]) zwraca losowy identyfikator UID o podstawie 36 z przestrzenią nazw. Domyślnie zwraca ciąg o długości 6 znaków.
Foundation.getFnName (fn) zwraca nazwę funkcji JavaScript.
Foundation.transitionend występuje po zakończeniu przejścia CSS.