Foundation - JavaScript-Dienstprogramme

Foundation enthält JavaScript-Dienstprogramme, mit denen allgemeine Funktionen hinzugefügt werden. Es ist sehr hilfreich und einfach zu bedienen. Diese JavaScript-Dienstprogrammbibliothek befindet sich im Ordner Ihr_Ordnername / Knotenmodule / Foundation-Sites / js

Box

Die Foundation.Box- Bibliothek besteht aus mehreren Methoden.
Das js/foundation.util.box.js ist der Skriptdateiname, der beim Schreiben des Codes angegeben werden kann.
An beide Methoden können entweder jQuery-Objekte oder einfache JavaScript-Elemente übergeben werden.

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

Das zurückgegebene Objekt gibt die Dimension des Elements als - an

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

Funktion ImNotTouchingYou ist enthalten.
Basierend auf dem übergebenen Element wird ein boolescher Wert zurückgegeben, der entweder einen Konflikt mit dem Rand des Fensters oder ein optionales oder ein übergeordnetes Element darstellt.
Die beiden in der unten angegebenen Zeile angegebenen Optionen, dh leftAndRightOnly, topAndBottomOnly, werden verwendet, um die Kollision nur auf einer Achse zu identifizieren.

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

Tastatur

In Foundation.Keyboard gibt es viele Methoden , die die Interaktion mit Tastaturereignissen vereinfachen.
Das js/foundation.util.keyboard.js ist der Skriptdateiname, der beim Schreiben des Codes angegeben werden kann.
Das Objekt Foundation.Keyboard.keys besteht aus Schlüssel / Wert-Paaren, die im Framework häufiger verwendet werden.
Immer wenn die Taste gedrückt wird, wird Foundation.Keyboard.parseKey aufgerufen, um eine Zeichenfolge abzurufen. Dies hilft bei der Verwaltung Ihrer eigenen Tastatureingaben.

Der folgende Code wird verwendet, um alle fokussierbaren Elemente innerhalb des angegebenen $ -Elements zu finden . Daher müssen Sie keine Funktion und keinen Selektor von Ihnen schreiben.

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

Die handleKey- Funktion ist eine Hauptfunktion dieser Bibliothek.
Diese Methode wird verwendet, um das Tastaturereignis zu behandeln. Es kann immer dann aufgerufen werden, wenn ein Plugin beim Dienstprogramm registriert ist.

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

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

Die Foundation.Keyboard.register- Funktion kann aufgerufen werden, wenn Sie Ihre eigenen Tastenkombinationen verwenden möchten.

MediaQuery

Die MediaQuery- Bibliothek ist das Rückgrat aller responsiven CSS-Techniken.
Das js/foundation.util.mediaQuery.js ist der Skriptdateiname, der beim Schreiben des Codes angegeben werden kann.
Mit Foundation.MediaQuery.atLeast ('groß') wird überprüft, ob der Bildschirm mindestens so breit wie ein Haltepunkt ist.
Das Foundation.MediaQuery.get ('Medium') ruft die Medienabfrage eines Haltepunkts ab.
Die Foundation.MediaQuery.queries sind eine Reihe von Medienabfragen, die Foundation für Haltepunkte verwendet.
Die Foundation.MediaQuery.current ist eine Zeichenfolge mit der aktuellen Haltepunktgröße.

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

Der folgende Code überträgt die Änderung der Medienabfrage im Fenster.

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

Motion & Move

Foundation.Motion- Javascript ähnelt der Motion UI-Bibliothek, die in Foundation 6 enthalten ist. Es wird zum Erstellen benutzerdefinierter CSS-Übergänge und -Animationen verwendet.
Das js/foundation.util.motion.js ist der Skriptdateiname, der beim Schreiben des Codes angegeben werden kann.
Foundation.Move wird verwendet, um CSS3-gestützte Animationen einfach und elegant zu gestalten.
requestAnimationFrame();Methode weist den Browser an, eine Animation durchzuführen; Es fordert Sie auf, Ihre Animationsfunktion aufzurufen, bevor der Browser das nächste Repaint ausführt.

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

Wenn die Animation abgeschlossen ist, finished.zf.animate gebrannt.

Timer & Bilder geladen

Orbit verwendet sowohl den Funktionstimer als auch das geladene Bild. Dasjs/foundation.util.timerAndImageLoader.js ist der Skriptdateiname, der beim Schreiben des Codes angegeben werden kann.

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

Die bildgeladene Methode führt eine Rückruffunktion in Ihrer jQuery-Sammlung aus, wenn Bilder vollständig geladen sind.

Foundation.onImagesLoaded($images, callback);

Berühren

Die Methoden werden zum Hinzufügen von Pseudo-Drag-Ereignissen und zum Wischen zu Elementen verwendet.
Das js/foundation.util.touch.js ist der Skriptdateiname, der beim Schreiben des Codes angegeben werden kann.
Die addTouch- Methode wird verwendet, um Elemente an Berührungsereignisse im Slider-Plugin für mobile Geräte zu binden.
Die spotSwipe- Methode bindet die Elemente an Swipe-Ereignisse im Orbit-Plugin für mobile Geräte.

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

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

Löst aus

Es löst das angegebene Ereignis für die ausgewählten Elemente aus.
Das js/foundation.util.triggers.js ist der Skriptdateiname, der beim Schreiben des Codes angegeben werden kann.
Die Trigger werden in vielen Foundation-Plugins verwendet.

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

Die folgenden zwei Methoden werden in dieser Bibliothek verwendet, z. B. Größe ändern und scrollen.

Die Methode resize () löst das Größenänderungsereignis aus, wenn ein Größenänderungsereignis auftritt.
Die scroll () -Methode löst das Bildlaufereignis aus, wenn ein Bildlaufereignis auftritt.

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

Verschiedenes

Foundation enthält nur wenige Funktionen in der Kernbibliothek, die an vielen Stellen verwendet werden.
Das js/foundation.core.js ist der Skriptdateiname, der beim Schreiben des Codes angegeben werden kann.
Foundation.GetYoDigits ([Nummer, Namespace]) gibt eine zufällige Base-36-UID mit Namespace zurück. Standardmäßig wird die Zeichenfolgenlänge von 6 Zeichen zurückgegeben.
Foundation.getFnName (fn) gibt einen JavaScript-Funktionsnamen zurück.
Foundation.transitionend tritt auf, wenn der CSS-Übergang abgeschlossen ist.