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.