10 extraits JQuery que tout concepteur doit connaître
jQuery est utilisé sur des milliers de pages Web. C'est l'une des bibliothèques les plus courantes à insérer dans les pages, et elle facilite la manipulation de DOM.
Bien sûr, une partie de la popularité de jQuery est sa simplicité. Il semble que nous pouvons faire presque tout ce que nous voulons avec cette bibliothèque puissante.
Pour toutes les options qui s'offrent à nous, il y a des extraits auxquels nous avons tendance à revenir encore et encore. Aujourd'hui, je voudrais vous donner 10 extraits que tout le monde, les débutants aux gourous, utilisera encore et encore.
1) Bouton retour en haut
// Back To Top
$('a.top').click(function(){
$(document.body).animate({scrollTop : 0},800);
return false;
});
//Create an anchor tagBack to top
Comme vous pouvez le voir en utilisant les fonctions animate et scrollTop de jQuery, nous n'avons pas besoin d'un plugin pour créer un simple défilement vers le haut de l'animation.
En changeant la valeur de scrollTop , nous pouvons changer l’endroit où la barre de défilement doit atterrir. Dans mon cas, j’ai utilisé la valeur 0 car je veux qu’elle atteigne le sommet de notre page, mais si je voulais un décalage de 100px tapez 100px dans la fonction.
Donc, tout ce que nous faisons en réalité, c'est animer le corps de notre document tout au long des 800 ms jusqu'à ce qu'il défile jusqu'au haut du document.
2) Vérifier si les images sont chargées
$(‘img’).load(function() {
console.log(‘image load successful’);
});
Parfois, vous devez vérifier si vos images sont entièrement chargées pour continuer à utiliser vos scripts. Cet extrait de code jQuery à trois lignes peut vous aider.
Vous pouvez également vérifier si une image particulière a été chargée en remplaçant la balise img par un ID ou une classe.
3) réparer automatiquement les images brisées
$('img').error(function(){
$(this).attr('src', ‘img/broken.png’);
});
De temps en temps, nous avons des moments où nous avons cassé des liens d'image sur notre site Web et les remplacer un par un n'est pas facile, alors ajouter ce simple code peut vous faire économiser beaucoup de maux de tête.
Même si vous n'avez pas de liens cassés, l'ajout de ceci ne fait aucun mal.
4) Basculer la classe en vol stationnaire
$(‘.btn').hover(function(){
$(this).addClass(‘hover’);
}, function(){
$(this).removeClass(‘hover’);
}
);
Nous voulons généralement changer le visuel d'un élément cliquable sur notre page lorsque l'utilisateur survole et cet extrait de code jQuery ne fait que le faire, il ajoute une classe à votre élément lorsque l'utilisateur survole et lorsque l'utilisateur arrête, il supprime la classe. tout ce que vous devez faire est d'ajouter les styles nécessaires dans votre fichier CSS.
5) Désactiver les champs de saisie
$('input[type="submit"]').attr("disabled", true);
À l'occasion, vous pouvez vouloir désactiver le bouton d'envoi d'un formulaire ou même l'une de ses entrées de texte jusqu'à ce que l'utilisateur ait effectué une certaine action (en cochant la case «J'ai lu les termes» par exemple) et cette ligne de code accomplit cette; Il ajoute l'attribut désactivé à votre entrée afin que vous puissiez l'activer quand vous le souhaitez.
Pour ce faire, il vous suffit d'exécuter la fonction removeAttr sur l'entrée avec le paramètre désactivé:
$('input[type="submit"]').removeAttr("disabled”);
6) Arrêtez le chargement des liens
$(‘a.no-link').click(function(e){
e.preventDefault();
});
Parfois, nous ne voulons pas que les liens accèdent à une page donnée ou même la rechargent, nous voulons qu’ils fassent autre chose comme déclencher un autre script et dans ce cas, cette partie du code empêchera l’action par défaut.
7) Activer / désactiver le fondu / glisser
// Fade
$( “.btn" ).click(function() {
$( “.element" ).fadeToggle("slow");
});
// Toggle
$( “.btn" ).click(function() {
$( “.element" ).slideToggle("slow");
});
Les diapositives et les fondus sont quelque chose que nous utilisons beaucoup dans nos animations en utilisant jQuery, parfois nous voulons juste montrer un élément quand nous cliquons sur quelque chose et pour cela les méthodes fadeIn et slideDown sont parfaites, mais si nous voulons que cet élément apparaisse au premier clic puis disparaissent à la seconde ce morceau de code va bien fonctionner.
8) accordéon simple
// Close all Panels
$('#accordion').find(‘.content').hide();
// Accordion
$('#accordion').find(‘.accordion-header').click(function(){
var next = $(this).next();
next.slideToggle('fast’);
$(‘.content’).not(next).slideUp('fast’);
return false;
});
En ajoutant ce script, tout ce dont vous avez besoin sur votre page, c'est le HTML nécessaire pour que cela fonctionne.
Comme vous pouvez le voir dans cet extrait, j'ai d'abord fermé tous les panneaux de notre accordéon, puis sur l'événement de clic, j'ai fait basculer le contenu lié à cet en-tête, et tous les autres ont glissé. C'est une méthode simple pour un accordéon rapide.
9) Faites deux divs de la même hauteur
$(‘.div').css('min-height', $(‘.main-div').height());
Parfois, vous voulez que deux div aient la même hauteur, quel que soit le contenu qu'ils contiennent, ce petit extrait ne permet que cela; dans ce cas, il définit la hauteur minimale, ce qui signifie qu'il peut être plus grand que le div principal, mais jamais plus petit. Ceci est idéal pour la maçonnerie comme les sites Web.
10) Zebra dépouillé de la liste non ordonnée
$('li:odd').css('background', '#E8E8E8’);
Avec ce petit extrait de code, vous pouvez facilement créer des listes non ordonnées zébrées, ce qui place l'arrière-plan que vous définissez sur chaque élément de liste impair afin de pouvoir en placer un par défaut pour les fichiers pairs dans votre fichier CSS. Vous pouvez ajouter cet extrait à n'importe quel type de balisage, des tables aux divs simples, tout ce que vous voulez être dépouillé de zébrures.
Conclusion
Ce sont les morceaux de code jQuery que je me retrouve à utiliser dans mes projets. J'espère que vous mettrez cette page en signet et que vous reviendrez chaque fois que vous aurez besoin d'un de ces extraits.
Sur quels snacks jQuery comptez-vous? Avez-vous un meilleur code pour ces scénarios? Faites le nous savoir dans les commentaires.
Image / vignette en vedette, image utile via Shutterstock.