Comment utiliser les filtres de visibilité avec le Framework jQuery

fermer la fenetre

Des Applications Performantes Sans Vous Prendre La Tête !

Recevez la formation "Développement Facilte" GRATUITEMENT
Avec tous les Codes Sources Commentés
 
(Les événements, la programmation orientée objets, les modèles de conception, Les éditeurs, les outils, 
l'efficacité, CSS3, HTML5, JavaScript, jQuery, Dojo...)

Renseignez votre prénom et votre adresse email ci-dessous :

En route pour la suite de votre formation sur le Framework jQuery.

Apprenez à masquer et afficher des éléments HTML à la demande !

Tout est dans la formation vidéo ci-dessous.

[ppmaccordion][ppmtoggle title=”Afficher le texte de la vidéo”]

Comment utiliser les filtres de visibilité avec le Framework jQuery

Bonjour à tous et bienvenu sur Développement Facile.

Voici un nouveau cours dédié au Framework JavaScript jQuery, un Framework génial, je ne le répéterai jamais assez, utilisez-le, découvrez-le, vous allez en être extrêmement satisfait. Dans ce cours vous allez apprendre à utiliser les filtres jQuery de visibility.

Les filtres de visibilité

Visibilité, pardon, je vais parler français, donc $p :visible, ça va sélectionner tous les paragraphes qui sont visibles, sur l’exemple de code source qui s’affiche à votre écran, on va sélectionner $div :visible, dans toutes les balises div qui sont visibles et donc regardez dans le CSS, dans l’exemple que je vous donne, j’ai rajouté une classe hidden avec visible désactivé, il seront invisibles, donc enfaite, ça va rajouter une couleur de fond uniquement sur développement facile et formation avec suivi individuel, prenez en compte que dans le code source qui s’affiche sur votre écran, en téléchargement il sera correct, là il faut juste rajouter la classe.hidden avec la balise CSS visibilité, et la mettre à no, not visible.

$p :hidden, ça sélectionne à la fois tous les paragraphes cachés, c’est l’inverse de tout à l’heure, dans l’exemple $div : hidden, ça sélectionne toutes les balises divs cachées, même chose que pour le code source précédent, vous rajoutez dans la balise CSS, une classe hidden avec la propriété visible, et donc la ça va rajouter une couleur de fond sur les éléments cachés, cachés et tout est facile

Exemple d’application

Je vous montre un exemple de code source, ce sera beaucoup plus parlant pour vous, voilà, j’enlève le paramètre de hauteur ici, et je vais mettre une couleur un peu plus sympa, voilà, je recharge, donc vous avez une fonction pour sélectionner tous les blocs div visibles en rajoutant une couleur de fond, ensuite, des boutons, comment ça marche les boutons ?
C’est la première fois comme vous le voyez avec jQuery, en tout cas sur Développement Facile, vous prenez la balise button, vous lui donnez un id, montrer les blocs, masquer les blocs, et ici, vous … ça c’est … à l’Id button avec des champs .clique, donc sur le clic une fonction, ça va ajouter une couleur de background sur les balises divs cachées et .show ça va les, justement les balises cachées, ça va les cacher, ça va masquer les blocs divs avec la classe hidden tout simplement.
Là, display none, je vous ai dit visible, en fait, j’ai confondu, excusez-moi, en CSS il y a dispaly et visible, là vous utilisez display et none, pour hidden, qu’est-ce que ça donne ?
Montrer les blocs cachés, ils sont affichés ici, masquer les blocs cachés, voilà ils sont masqués, comment on fait pour les masqués ?
Voyez directement l’utilisation de ces deux fonctionnalités, quand ça les montrent évidemment, ça va ajouter une couleur de fond, c’est beaucoup plus sympa, et quand ça les masques, ça les masques et ici, on va changer la couleur, comme ça vous verrez, voilà, le changement de la couleur de fond uniquement sur celles qui sont visibles, et celles qui sont visibles, c’est la div visible, et tout dessus.

Votre plan d’actions !

Voilà à vous de jouer maintenant, vous pouvez télécharger le code source directement sous ce cours vidéo, si vous avez des questions, posez-les sous ce cours vidéo, et moi je vous dis à très bientôt sur Développement Facile.

 

[/ppmtoggle][/ppmaccordion]

Téléchargez l’exemple jQuery

Retrouvez le code source jQuery pour masquer vos éléments HTML.

Downloads

Choisissez vos prochains cours jQuery

Utilisez la zone commentaires pour choisir vos prochains cours sur le Framework jQuery.

Créez Rapidement des Sites Hyper-Interactifs avec vos utilisateurs grâce à la Formation Gratuite jQuery Facile !

Recevez les Stratégies pour utiliser le Potentiel des Frameworks jQuery et Dojo
+
Logo jQuery
+
Des Tutoriels Gratuits Supplémentaires pour utiliser toute la "Richesse" du Framework de Google : AngularJS