Foundation - JavaScript

In diesem Kapitel werden wir uns mit JavaScript befassen . Es ist einfach, JavaScript in Foundation einzurichten. Sie benötigen lediglich jQuery.

JavaScript-Installation

Sie können ZIP-Download, Paketmanager oder CDN verwenden, um die Foundation-JavaScript-Datei abzurufen. In Ihrem Code können Sie Links zu jQuery und Foundation als <script> -Tags vor dem schließenden <body> bereitstellen und überprüfen, ob Foundation nach jQuery geladen wurde. Für weitere Informationen klicken Sie hier .

Dateistruktur

Wenn Sie Foundation über die Befehlszeile installieren, werden Foundation-Plugins als einzelne Dateien wie Foundation.tabs.js , Foundation.dropdownMenu.js , Foundation.slider.js usw. heruntergeladen . Alle diese Dateien werden zu Foundation.js kombiniert , die alle Plugins gleichzeitig bereitstellt. Wenn Sie ein Plugin verwenden möchten, sollte zuerst fundamental.core.js geladen werden.

Zum Beispiel -

<script src = "js/jquery.min.js"></script>
<script src = "js/foundation.core.js"></script>
<script src = "js/foundation.tabs.js"></script>

Für bestimmte Plugins sind möglicherweise bestimmte Dienstprogrammbibliotheken erforderlich, die mit der Foundation-Installation geliefert werden. Weitere Informationen zu bestimmten Plugin-Anforderungen finden Sie im nächsten Kapitel der JavaScript-Dienstprogramme .

Durch das Laden einzelner Dateien entsteht ein Netzwerk-Overhead, insbesondere für mobile Benutzer. Für ein schnelleres Laden der Seite wird die Verwendung von Grunzen oder Schlucken empfohlen.

Initialisieren

Mit der Funktion foundation () werden alle Foundation-Plugins gleichzeitig initialisiert.

Zum Beispiel -

(document).foundation();

Plugins verwenden

Mithilfe von Datenattributen werden Plugins mit HTML-Elementen verbunden, da sie mit dem Namen der Plugins übereinstimmen. Ein einzelnes HTML-Element kann jeweils nur ein Plugin enthalten, obwohl die meisten Plugins in anderen Plugins verschachtelt sein können. Beispielsweise wird ein Tooltip-Link durch Hinzufügen eines Daten-Tooltips erstellt . Für weitere Informationen klicken Sie hier .

Plugins konfigurieren

Plugins können mithilfe der Konfigurationseinstellungen angepasst werden. Sie können beispielsweise die Geschwindigkeit der Akkordeonrutschen nach oben und unten einstellen . Die Plugin-Einstellungen können mithilfe der Plugins global geändert werdenDEFAULTSEigentum. Für weitere Informationen klicken Sie hier .

Hinzufügen von Plugins nach dem Laden der Seite

Wenn dem DOM neues HTML hinzugefügt wird, werden die Plugins für diese Elemente standardmäßig nicht initialisiert. Sie können nach neuen Plugins suchen, indem Sie die Funktion .foundation () erneut aufrufen .

Zum Beispiel -

$.ajax('assets/partials/kitten-carousel.html', function(data) {
   $('#kitten-carousel'</span>).html(data).foundation();
});

Programmatische Verwendung

In JavaScript können Plugins programmgesteuert erstellt werden. Jedes Plugin ist die Klasse eines globalen Foundation- Objekts mit einem Konstruktor, der zwei Parameter wie ein Element und ein Objekt verwendet.

var $accordion = new Foundation.Accordion($('#accordion'), {
   slideSpeed: 600, multiExpand: true
});

Die meisten Plugins sind mit einer öffentlichen API ausgestattet, mit der Sie sie über JavaScript bearbeiten können. Sie können die Dokumentationen des Plugins durchsehen, um die verfügbaren Funktionen zu studieren, und Methoden können einfach aufgerufen werden.

Zum Beispiel -

$('.tooltip').foundation('destroy'); 
// this will destroy all Tooltips on the page.	

$('#reveal').foundation('open'); 
// this will open a Reveal modal with id `reveal`.

$('[data-tabs]').eq(0).foundation('selectTab', $('#example')); 
// this will change the first Tabs on the page to whatever panel you choose.

Sie können einen beliebigen jQuery-Selektor auswählen. Wenn der Selektor mehrere Plugins enthält, wird für alle die gleiche Methode ausgewählt.
Argumente können genauso übergeben werden wie Argumente an JavaScript.
Methoden, denen ein Unterstrich (_) vorangestellt ist, werden als Teil der internen API betrachtet, dh sie können ohne Vorwarnung brechen, sich ändern oder sogar verschwinden.

Veranstaltungen

Immer wenn eine bestimmte Funktion beendet ist, löst DOM ein Ereignis aus. Wenn beispielsweise Registerkarten geändert werden, können diese abgehört und eine Rückantwort darauf erstellt werden. Jedes Plugin kann eine Liste von Ereignissen auslösen, die in der Dokumentation des Plugins dokumentiert werden. In Foundation 6 werden Callback-Plugins entfernt und müssen als Ereignis-Listener verwendet werden.

Zum Beispiel -

$('[data-tabs]').on('change.zf.tabs', function() {
   console.log('Tabs are changed!');
});