Fondazione - JavaScript

In questo capitolo, studieremo JavaScript . È facile configurare JavaScript in Foundation; l'unica cosa che ti serve è jQuery.

Installazione di JavaScript

È possibile utilizzare il download ZIP, il gestore di pacchetti o CDN per ottenere il file JavaScript di Foundation. Nel tuo codice puoi fornire collegamenti a jQuery e Foundation come tag <script>, posizionati prima del <body> di chiusura e controllare che Foundation sia caricato dopo jQuery. Per maggiori informazioni clicca qui .

Struttura dei file

Quando installi Foundation tramite la riga di comando, i plug-in di Foundation vengono scaricati come singoli file come foundation.tabs.js , foundation.dropdownMenu.js , foundation.slider.js e così via. Tutti questi file vengono combinati in foundation.js , che fornisce tutti i plugin contemporaneamente. Se desideri utilizzare qualche plugin, devi caricare il primo foundation.core.js .

Ad esempio:

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

Alcuni plugin potrebbero richiedere particolari librerie di utilità, fornite con l'installazione di Foundation. Puoi studiare in dettaglio i requisiti specifici dei plug-in nel prossimo capitolo Utilità JavaScript .

Il caricamento di singoli file crea un sovraccarico di rete, in particolare per gli utenti mobili. Per un caricamento più veloce della pagina, si consiglia l'uso di grunt o gulp .

Inizializzazione

La funzione foundation () viene utilizzata per inizializzare tutti i plug-in Foundation contemporaneamente.

Ad esempio:

(document).foundation();

Utilizzo di plugin

Utilizzando gli attributi dei dati, i plug-in sono collegati agli elementi HTML in quanto corrispondono al nome dei plug-in. Un singolo elemento HTML può avere un solo plug-in alla volta, sebbene la maggior parte dei plug-in possa essere annidata all'interno di altri. Ad esempio, il collegamento al tooltip viene creato aggiungendo data-tooltip . Per maggiori informazioni clicca qui .

Configurazione dei plugin

I plugin possono essere personalizzati utilizzando le sue impostazioni di configurazione. Ad esempio, puoi impostare la velocità delle diapositive della fisarmonica su e giù. Le impostazioni del plug-in possono essere modificate a livello globale utilizzando il fileDEFAULTSproprietà. Per maggiori informazioni clicca qui .

Aggiunta di plug-in dopo il caricamento della pagina

Quando viene aggiunto un nuovo HTML al DOM, nessuno dei plug-in su quegli elementi non verrà inizializzato per impostazione predefinita. Puoi verificare la presenza di nuovi plugin richiamando la funzione .foundation () .

Ad esempio:

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

Uso programmatico

In JavaScript, i plug-in possono essere creati in modo programmatico e ogni plug-in è la classe dell'oggetto Foundation globale , con un costruttore che accetta due parametri come un elemento e un oggetto.

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

La maggior parte dei plugin viene fornita con un'API pubblica, che ti consente di manipolarla tramite JavaScript. È possibile consultare la documentazione del plugin per studiare le funzioni disponibili e metodi che possono essere richiamati facilmente.

Ad esempio:

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

Puoi scegliere qualsiasi selettore jQuery e se il selettore contiene più plugin, allora tutti avranno lo stesso metodo scelto chiamato.
Gli argomenti possono essere passati proprio come il passaggio di argomenti a JavaScript.
I metodi preceduti da un carattere di sottolineatura (_) sono considerati come una parte dell'API interna, il che significa che senza preavviso possono rompersi, cambiare o addirittura scomparire.

Eventi

Ogni volta che una funzione specifica termina, DOM attiva un evento. Ad esempio, ogni volta che le schede vengono modificate, è possibile ascoltarle e creare una risposta di ritorno. Ogni plugin può attivare un elenco di eventi, che sarà documentato nella documentazione del plugin. In Foundation 6, i plug-in di callback vengono rimossi e devono essere presi come listener di eventi.

Ad esempio:

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