Share
Ajoutons à notre ensemble de compétences Foundation en apprenant à utiliser les barres de progression, les alertes, les info-bulles et le méga-drop utilisé par Zurb sur leur site, mais qui n’est pas réellement dans Foundation. Nous examinerons l'ajout de tous ces composants dans le formulaire de contact du didacticiel précédent, en utilisant une touche de jQuery personnalisé afin que vous puissiez avoir une idée de la façon dont ces éléments pourraient fonctionner dans vos propres projets. Commençons.
Tout d'abord, nous allons ajouter une info-bulle à la case à cocher "Envoyez-moi un spam" pour en dire un peu plus aux utilisateurs sur le spam que nous leur enverrons s'ils cochent la case correspondante..
Comme dans tous les extraits de code précédents, l'ajout de fonctionnalités telles qu'une info-bulle à un élément repose sur une classe pour lancer des actions. Dans ce cas, il s'agit d'un 'astuce'..
Vous avez peut-être aussi remarqué que nous avons encapsulé le texte dans l'étiquette dans une balise span. Cette balise span nécessite l'un des attributs d'élément personnalisé de Foundation, "data-tooltip". Cela vous donnera une info-bulle utile, mais vous voudrez du texte dans l’infos et peut-être définir la largeur. Ces deux objectifs peuvent être atteints avec encore plus d'attributs, "title" et "data-width". Sans data-width, la pointe remplira simplement l'espace du conteneur parent de l'élément..
L'ajout de la classe 'has-tip' et l'enveloppement de l'élément de votre choix dans l'étendue avec ces attributs vous permettent de coller facilement une info-bulle sur n'importe quel élément..
Dans le didacticiel précédent, nous avons créé un formulaire de contact réactif simple, qui expliquait comment utiliser les éléments de formulaire de Foundation. Implémentons maintenant quelques éléments supplémentaires pour ajouter un nouveau calque au formulaire. Nous y arriverons en ajoutant des étapes au bouton de soumission. nous allons prendre le clic standard du bouton envoyer un message, ajouter un indicateur de progression, un message de réussite et effacer les entrées une fois que le courrier électronique est envoyé.
Comme je ne présente que les fonctionnalités de Foundation, il ne s’agit pas d’un formulaire fonctionnel, mais vous pouvez ajouter un script d’envoi basé sur php et utiliser ajax pour créer un formulaire sans quitter la page. Jetez un coup d’œil à Soumettre un formulaire sans mise à jour en utilisant jQuery pour obtenir des instructions..
Directement sous notre élément d'entrée submit, nous pouvons ajouter notre barre de progression. Cela utilisera les mêmes classes que les boutons, en utilisant la classe arrondie cette fois.
Utiliser un div avec la classe "progress" établit les choses et agit comme conteneur, tandis que la plage à l'intérieur (utilisant la classe "meter") agit comme la couleur qui remplit progressivement le conteneur..
Remarque: La plage utilise une balise de style avec la largeur de départ de la barre de progression. Nous utiliserons jQuery pour animer cela plus tard.
Ajoutons un message de réussite pour que les utilisateurs sachent que le message a été envoyé. Dans cet exemple, nous allons simplement nous concentrer sur une alerte de réussite, mais dans un scénario réel, vous aurez peut-être également besoin d'une alerte d'erreur. Vous pouvez implémenter cela en utilisant le gestionnaire d'envoi et le plugin jQuery validate.
Succès! Votre message a été envoyé. ×
Prenez un div et ajoutez l'attribut "data-alert" avec quelques classes, à savoir "alert-box" et "success". Si nous ajoutons également un bouton de fermeture, les utilisateurs peuvent fermer le message de succès après l'avoir lu. Si vous regardez ce que nous avons mis en place jusqu'à présent, cela aura l'air un peu brouillon, mais ce n'est pas grave car nous allons maintenant ajouter un peu de jQuery pour créer les couches d'interaction dont nous avons besoin..
Accentsconagua
var submitButton = $ ('# submitme'); // Variable pour mettre en cache un élément de bouton var progressBar = $ ('# progrès'); // Variable pour mettre en cache un élément de barre de progression var progressBarMeter = $ ('# progress .meter'); // Variable pour mettre en cache un élément de compteur var alertBox = $ ('. Alert-box'); // Variable pour mettre en cache un élément de compteur var closeButton = $ ('. Close'); // Variable pour mettre en cache un élément du bouton de fermeture $ (submitButton) .click (function () // lance l’interaction d’envoi $ (this) .fadeOut (500); // disparaît progressivement le bouton d’envoi lorsque l’utilisateur clique sur setTimeout (function () // Retarde l'effet suivant $ (progressBar) .fadeIn (500); // Fondu dans la barre de progression $ (progressBarMeter) .animate (width: '100%', 2000); // Animation de la barre de progression setTimeout ( function () // Retarde l'effet suivant $ (progressBar) .fadeOut (500); // Efface la barre de progression à la fin de l'animation setTimeout (function () // Retarde l'effet suivant $ (alertBox) .fadeIn (500) ; // passe en alerte de succès, 500);, 2500);, 500);); Pour mieux expliquer ce code, j'ai commenté chaque ligne. C'est une simple file d'effets qui crée l'interaction souhaitée. Bien que ce soit purement visuel, mais pourrait facilement être ajusté pour ajouter un retour réel et la validation. Il serait également utile pour nous d'ajouter une fonction d'alerte rapprochée qui réinitialise le formulaire pour une utilisation ultérieure..
Remarque: Nous avons mis en cache tous les éléments utilisés dans la fonction en les stockant dans des variables. Vous pouvez en savoir plus sur les raisons pour lesquelles nous faisons cela en lisant Quick Tip - jQuery Newbs: arrêtez de sauter dans la piscine
$ (closeButton) .click (function () // Lance la fonction de réinitialisation $ (alertBox) .fadeOut (500); // Supprime le message de succès $ (progressBarMeter) .css (width: '0%'); // Réinitialise la barre de progression setTimeout (function () // Retarde le prochain effet $ ('input, textarea'). Not ('input [type = submit]'). Val ("); // réinitialise les champs de saisie $ (submitButton) .fadeIn (500); // retourne en arrière dans le bouton d'envoi, 500); return false; // empêche l'alerte de réussite d'être supprimée car nous voulons simplement la masquer); Encore une fois, j'ai commenté chaque ligne pour expliquer ce que chaque ligne fait. Cela couvre à peu près notre mise à niveau vers le formulaire de contact. Ces fonctionnalités sont très flexibles et peuvent être utilisées n’importe où dans vos projets. La personnalisation est un jeu d'enfant avec CSS..
J'ai passé beaucoup de temps sur le groupe Google de la Fondation et beaucoup de personnes ont posé des questions sur la fonctionnalité Mega Drop sur les sites Web de Zurb. Je pensais couvrir cela ici, car il semble que personne ne couvre vraiment ce qui est un morceau de jQuery strict-forward.
Prenez une balise de section et remplissez-la avec le contenu souhaité dans la liste, ajoutez un attribut de style en utilisant "display: none" puis le code jQuery suivant:
var megaDrop = $ ('# megaDrop'); // Variable pour mettre en cache l'élément megaDrop var megaContainer = $ ('# megaContainer'); // Variable pour mettre en cache l'élément megaContainer $ (megaDrop) .click (function () $ (megaContainer) .slideToggle (300, function () if ($ (this) .is (": hidden")) $ (megaDrop) .html ("+"); else $ (megaDrop) .html ("×"););); Tout ce que Mega Drop est vraiment, c’est un effet slideToggle qui montre et cache un conteneur avec une animation glissante. Il y a beaucoup d'utilisations pratiques pour le Mega Drop, que ce soit une navigation étendue, une galerie cachée, ou même une vidéo promotionnelle..
De nombreux projets, en particulier les interfaces de tableau de bord, nécessitent des graphiques et chartjs.org est un excellent moyen de les ajouter à vos projets Foundation. Pourquoi ne pas l'essayer, visualiser vos données de différentes manières, animer et personnaliser? Ces graphiques ont fière allure dans la structure Foundation, même sur les écrans de rétine.
Chartjs utilise l'élément de canevas HTML5, pris en charge par tous les navigateurs modernes, et Polyfills prend en charge IE7 / 8. Le plugin est sans dépendance, léger et offre de nombreuses options de personnalisation.
Dans le prochain tutoriel, nous aborderons le plug-in Joyride (qui donne aux utilisateurs une visite de votre site), des panneaux, des tableaux de prix, des tableaux normaux et des échanges. qui vous donne la possibilité de définir différentes images pour différentes tailles d'écran. Beaucoup reste à couvrir!
