Fondation - JavaScript

Dans ce chapitre, nous étudierons JavaScript . Il est facile de configurer JavaScript dans Foundation; la seule chose dont vous avez besoin est jQuery.

Installation de JavaScript

Vous pouvez utiliser le téléchargement ZIP, le gestionnaire de packages ou le CDN pour obtenir le fichier JavaScript Foundation. Dans votre code, vous pouvez fournir des liens vers jQuery et Foundation sous forme de balises <script>, placées avant le <body> de fermeture et vérifier que Foundation est chargé après jQuery. Pour plus d'informations, cliquez ici .

Structure des fichiers

Lorsque vous installez Foundation via la ligne de commande, les plug-ins Foundation sont téléchargés sous forme de fichiers individuels tels que foundation.tabs.js , foundation.dropdownMenu.js , foundation.slider.js , etc. Tous ces fichiers sont combinés dans foundation.js , qui fournit tous les plugins en même temps. Si vous souhaitez utiliser un plugin, vous devez d'abord charger foundation.core.js .

Par exemple -

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

Certains plugins peuvent nécessiter des bibliothèques d'utilitaires particulières, fournies avec l'installation de Foundation. Vous pouvez étudier en détail les exigences spécifiques des plugins dans le chapitre suivant Utilitaires JavaScript .

Le chargement de fichiers individuels crée une surcharge du réseau, en particulier pour les utilisateurs mobiles. Pour un chargement plus rapide des pages, il est recommandé d'utiliser grunt ou gulp .

Initialisation

La fonction foundation () est utilisée pour initialiser tous les plugins Foundation en même temps.

Par exemple -

(document).foundation();

Utilisation de plugins

À l'aide d'attributs de données, les plugins sont connectés aux éléments HTML car ils correspondent au nom des plugins. Un seul élément HTML ne peut avoir qu'un seul plugin à la fois, bien que la majorité des plugins puissent être imbriqués dans d'autres. Par exemple, le lien d'info-bulle est créé en ajoutant une info-bulle de données . Pour plus d'informations, cliquez ici .

Configurer les plugins

Les plugins peuvent être personnalisés en utilisant ses paramètres de configuration. Par exemple, vous pouvez régler la vitesse des diapositives d' accordéon de haut en bas. Les paramètres du plugin peuvent être modifiés globalement à l'aide du pluginDEFAULTSpropriété. Pour plus d'informations, cliquez ici .

Ajouter des plugins après le chargement de la page

Lorsqu'un nouveau code HTML est ajouté au DOM, aucun des plugins sur ces éléments ne sera initialisé par défaut. Vous pouvez rechercher de nouveaux plugins en appelant à nouveau la fonction .foundation () .

Par exemple -

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

Utilisation programmatique

En JavaScript, les plugins peuvent être créés par programme et chaque plugin est la classe globale de l' objet Foundation , avec un constructeur qui prend deux paramètres tels qu'un élément et un objet.

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

La majorité des plugins sont fournis avec une API publique, qui vous permet de la manipuler via JavaScript. Vous pouvez parcourir les documentations du plugin pour étudier les fonctions disponibles et les méthodes peuvent être invoquées facilement.

Par exemple -

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

  • Vous êtes autorisé à choisir n'importe quel sélecteur jQuery et si le sélecteur contient plusieurs plugins, ils auront tous la même méthode choisie appelée.

  • Les arguments peuvent être passés comme des arguments à JavaScript.

  • Les méthodes précédées d'un trait de soulignement (_) sont considérées comme une partie de l'API interne, ce qui signifie que sans avertissement, elles peuvent casser, changer ou même disparaître.

Événements

Chaque fois qu'une fonction spécifique se termine, DOM déclenche un événement. Par exemple, chaque fois que les onglets sont modifiés, il peut être écouté et créer une réponse de retour. Chaque plugin peut déclencher une liste d'événements, qui seront documentés dans la documentation du plugin. Dans Foundation 6, les plugins de rappel sont supprimés et doivent être considérés comme des écouteurs d'événements.

Par exemple -

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