Foundation - Utilitaires JavaScript

Foundation inclut des utilitaires JavaScript utilisés pour ajouter des fonctionnalités communes. C'est très utile et facile à utiliser. Cette bibliothèque d'utilitaires JavaScript se trouve dans le dossier Your_folder_name / node_modules / foundation-sites / js

Boîte

  • La bibliothèque Foundation.Box se compose de deux méthodes.

  • le js/foundation.util.box.js est le nom de fichier du script, qui peut être inclus lors de l'écriture du code.

  • Les objets jQuery ou les éléments JavaScript simples peuvent être passés aux deux méthodes.

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

L'objet retourné spécifie la dimension de l' élément comme -

{
   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: ...
   }
}
  • La fonction ImNotTouchingYou est incluse.

  • En fonction de l'élément passé, une valeur booléenne est renvoyée, qui est soit un conflit avec le bord de la fenêtre, soit facultatif ou un élément parent.

  • Les deux options spécifiées dans la ligne ci-dessous à savoir leftAndRightOnly, topAndBottomOnly sont utilisées pour identifier la collision sur un seul axe.

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

Clavier

  • Il existe de nombreuses méthodes dans Foundation.Keyboard , qui facilitent l'interaction entre les événements du clavier.

  • le js/foundation.util.keyboard.js est le nom de fichier du script, qui peut être inclus lors de l'écriture du code.

  • L'objet Foundation.Keyboard.keys se compose de paires clé / valeur, qui sont utilisées plus fréquemment dans le framework.

  • Chaque fois que la touche est enfoncée, Foundation.Keyboard.parseKey est appelée pour obtenir une chaîne. Cela permet de gérer vos propres entrées clavier.

Le code suivant est utilisé pour trouver tous les éléments focalisables dans l' élément $ donné . Par conséquent, il n'est pas nécessaire d'écrire une fonction et un sélecteur de votre part.

var focusable = Foundation.Keyboard.findFocusable($('#content'));
  • La fonction handleKey est une fonction principale de cette bibliothèque.

  • Cette méthode est utilisée pour gérer l'événement de clavier; il peut être appelé chaque fois qu'un plugin est enregistré auprès de l'utilitaire.

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

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

La fonction Foundation.Keyboard.register peut être appelée lorsque vous souhaitez utiliser vos propres raccourcis clavier.

MediaQuery

  • La bibliothèque MediaQuery est l'épine dorsale de toute technique CSS réactive.

  • le js/foundation.util.mediaQuery.js est le nom de fichier du script, qui peut être inclus lors de l'écriture du code.

  • Le Foundation.MediaQuery.atLeast ('large') est utilisé pour vérifier si l'écran est au moins aussi large qu'un point d'arrêt.

  • Le Foundation.MediaQuery.get ('medium') obtient la requête multimédia d'un point d'arrêt.

  • Les Foundation.MediaQuery.queries sont un ensemble de requêtes de médias, Fondation utilise pour les points d' arrêt.

  • Le Foundation.MediaQuery.current est une chaîne de la taille du point d' arrêt en cours.

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

Le code suivant diffuse la modification de la requête multimédia dans la fenêtre.

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

Mouvement et déplacement

  • Le javascript Foundation.Motion est similaire à la bibliothèque Motion UI, qui est incluse dans Foundation 6. Il est utilisé pour créer des transitions et des animations CSS personnalisées.

  • le js/foundation.util.motion.js est le nom de fichier du script, qui peut être inclus lors de l'écriture du code.

  • Foundation.Move est utilisé pour rendre les animations basées sur CSS3 simples et élégantes.

  • requestAnimationFrame();la méthode indique au navigateur d'effectuer une animation; il demande que votre fonction d'animation soit appelée avant que le navigateur n'effectue la prochaine peinture.

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

Lorsque l'animation est terminée, finish.zf.animate est déclenché.

Minuterie et images chargées

Orbit utilise à la fois la fonction minuterie et l'image chargée. lejs/foundation.util.timerAndImageLoader.js est le nom de fichier du script, qui peut être inclus lors de l'écriture du code.

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

La méthode chargée en image exécute une fonction de rappel dans votre collection jQuery lorsque les images sont complètement chargées.

Foundation.onImagesLoaded($images, callback);

Toucher

  • Les méthodes sont utilisées pour ajouter des pseudo événements de glissement et glisser vers des éléments.

  • le js/foundation.util.touch.js est le nom de fichier du script, qui peut être inclus lors de l'écriture du code.

  • La méthode addTouch est utilisée pour lier des éléments aux événements tactiles dans le plugin Slider pour les appareils mobiles.

  • La méthode spotSwipe lie les éléments pour faire glisser les événements dans le plug-in Orbit pour les appareils mobiles.

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

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

Déclencheurs

  • Il déclenche l'événement spécifié pour les éléments sélectionnés.

  • le js/foundation.util.triggers.js est le nom de fichier du script, qui peut être inclus lors de l'écriture du code.

  • Les déclencheurs sont utilisés dans de nombreux plugins Foundation.

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

Les deux méthodes suivantes sont utilisées dans cette bibliothèque à savoir redimensionner et faire défiler.

  • La méthode resize () déclenche l'événement resize lorsqu'un événement resize se produit.

  • La méthode scroll () déclenche l'événement scroll lorsqu'un événement scroll se produit.

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

Divers

  • Foundation contient peu de fonctionnalités dans la bibliothèque principale, qui sont utilisées dans de nombreux endroits.

  • le js/foundation.core.js est le nom de fichier du script, qui peut être inclus lors de l'écriture du code.

  • Foundation.GetYoDigits ([number, namespace]) renvoie un uid aléatoire de base 36 avec espace de noms. Il renvoie la longueur de chaîne de 6 caractères par défaut.

  • Foundation.getFnName (fn) renvoie un nom de fonction JavaScript.

  • Foundation.transitionend se produit lorsque la transition CSS est terminée.