Fundacja - JavaScript

W tym rozdziale zajmiemy się JavaScriptem . Konfiguracja JavaScript w Foundation jest łatwa; Jedyne czego potrzebujesz to jQuery.

Instalacja JavaScript

Możesz użyć pobierania ZIP, menedżera pakietów lub CDN, aby pobrać plik JavaScript Foundation. W swoim kodzie możesz podać linki do jQuery i Foundation jako tagi <script>, umieszczone przed zamykającym tagiem <body> i sprawdzić, czy Foundation jest ładowana po jQuery. Aby uzyskać więcej informacji, kliknij tutaj .

Struktura plików

Podczas instalowania Foundation za pomocą wiersza poleceń wtyczki Foundation są pobierane jako osobne pliki, takie jak Foundation.tabs.js , Foundation.dropdownMenu.js , Foundation.slider.js i tak dalej. Wszystkie te pliki są łączone w plik Foundation.js , który udostępnia wszystkie wtyczki jednocześnie. Jeśli chcesz użyć jakiejś wtyczki, najpierw załaduj plik Foundation.core.js .

Na przykład -

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

Niektóre wtyczki mogą wymagać określonych bibliotek narzędziowych, które są dostarczane z instalacją Foundation. Możesz szczegółowo przestudiować określone wymagania dotyczące wtyczek w następnym rozdziale Narzędzia JavaScript .

Ładowanie pojedynczych plików powoduje obciążenie sieci, szczególnie dla użytkowników mobilnych. Aby przyspieszyć ładowanie strony, zaleca się użycie pomruku lub łyka .

Inicjowanie

Funkcja Foundation () służy do jednoczesnej inicjalizacji całej wtyczki Foundation.

Na przykład -

(document).foundation();

Korzystanie z wtyczek

Używając atrybutów danych, wtyczki są łączone z elementami HTML, tak jak pasują do nazwy wtyczki. Pojedynczy element HTML może mieć tylko jedną wtyczkę naraz, chociaż większość wtyczek może być zagnieżdżona w innych. Na przykład łącze do podpowiedzi jest tworzone przez dodanie podpowiedzi danych . Aby uzyskać więcej informacji, kliknij tutaj .

Konfigurowanie wtyczek

Wtyczki można dostosować za pomocą ustawień konfiguracyjnych. Na przykład, możesz ustawić prędkość ślizgów akordeonu w górę iw dół. Ustawienia wtyczki można zmieniać globalnie za pomocą wtyczkiDEFAULTSwłasność. Aby uzyskać więcej informacji, kliknij tutaj .

Dodawanie wtyczek po wczytaniu strony

Kiedy nowy HTML zostanie dodany do DOM, żadna z wtyczek w tych elementach nie zostanie domyślnie zainicjowana. Możesz sprawdzić dostępność nowych wtyczek, ponownie wywołując funkcję .foundation () .

Na przykład -

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

Wykorzystanie programowe

W JavaScript wtyczki można tworzyć programowo, a każda wtyczka jest globalną klasą obiektu Foundation , z konstruktorem, który przyjmuje dwa parametry, takie jak element i obiekt.

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

Większość wtyczek jest wyposażona w publiczny interfejs API, który umożliwia manipulowanie nim za pomocą JavaScript. Możesz przejrzeć dokumentację wtyczki, aby zapoznać się z dostępnymi funkcjami i metodami, które można łatwo wywołać.

Na przykład -

$('.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.

Możesz wybrać dowolny selektor jQuery, a jeśli selektor zawiera wiele wtyczek, wszystkie będą miały identyczną wybraną metodę.
Argumenty można przekazywać tak samo, jak przekazywanie argumentów do JavaScript.
Metody, które są poprzedzone podkreśleniem (_) są traktowane jako część wewnętrznego API, co oznacza, że bez ostrzeżenia mogą się zepsuć, zmienić lub nawet zniknąć.

Wydarzenia

Za każdym razem, gdy kończy się określona funkcja, DOM wyzwala zdarzenie. Na przykład za każdym razem, gdy zmienia się zakładka, można go odsłuchać i utworzyć odpowiedź zwrotną. Każda wtyczka może wywołać listę zdarzeń, które zostaną udokumentowane w dokumentacji wtyczki. W Foundation 6 wtyczki wywołań zwrotnych są usuwane i muszą być traktowane jako nasłuchiwanie zdarzeń.

Na przykład -

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