JQuery
Seu SlideShare está sendo baixado.
×
Confira estes a seguir
Mais Conteúdo rRelacionado
Semelhante a les plugins en jquery.docx (20)
Mais recentes (20)
les plugins en jquery.docx
- 1. Année Universitaire : 2022-2023 Framework coté client jQuery/Ajax Enseignante : Zayneb Waari Atelier n°3 : Les plugins en jQuery Objectifs : • Définition et utilisation de plugins JQuery • Plugin de validation (validation des formulaires avant submit) • Plugin de navigation • Plugin d’animation • plugin de gestion de popup (fancybox) Définition Un plugin jQuery est simplement une nouvelle méthode que nous utilisons pour étendre l’objet prototype de jQuery. En étendant l’objet prototype, vous permettez à tous les objets jQuery d’hériter des méthodes que vous ajoutez. Comme établi, chaque fois que vous appelez, vous créez un nouvel objet jQuery, avec toutes les méthodes de jQuery héritées Activité : Plugin d’animation du texte-textillate 1 -soit le code html suivant : <body> <header> <h1> CHANEL </h1> <nav class="navbar fixed-top navbar-toggleable-sm navbar-inverse bg- inverse"> <div class="container">
- 2. <a class="nav-link scroll" href="#Haute Couture">HAUTE COUTURE</a> <a class="nav-link scroll" href="#Mode">MODE</a> <a class="nav-link scroll" href="#Haute joaillerie">HAUTE JOAILLERIE</a> <a class="nav-link scroll" href="#joaillerie">JOAILLERIE</a> <a class="nav-link scroll" href="#LUNETTES">LUNETTES</a> <a class="nav-link scroll" href="#PARFUMS">PARFUMS</a> <a class="nav-link scroll" href="#MAQUILLAGE">MAQUILLAGE</a> <a class="nav-link scroll" href="#SOIN">SOIN</a> <a class="nav-link scroll" href="#ABOUT CHANEL">ABOUT CHANEL</a> </div> </nav> </header> <div class="text-animation"> <div class="overlay"> <div class="text-center"> <h4>PARFUMS</h><br> <h1 class="tlt">GIVE WONDER,GIVE CHANEL</h1> <button id="parfums">VOIR PLUS</button> </div> </div> </div> </body> Code css : .text-animation{ width: 100%; min-height: 100vh; background: url("../chanel/Pub-Chanel-N5-Marion-Cotillard.jpg"); position: relative; } h1{ text-align: center; color: black;
- 3. } .nav-link { color: black; margin-right: auto; } .overlay{ position: absolute; width: 100%; height: 100%; } .text-center{ position: absolute; top: 60%; left: 50%; transform: translate(-50%,-50%); text-align: center; } .text-center h1{ color: white; } .text-center h4{ color: white; } .text-center button{ color: black; background-color: white; border: white; } .container{ display: flex; flex-wrap: wrap; padding: 10px; justify-content: space-between; align-content: space-between; } 2- télécharger le plugin textillate du GitHub 3-ajouter les liens des fichiers scripts nécessaires
- 4. 4-tester le code jQuery appliqué sur les textes Plugin popup Plugin fancybox & lightbox 1-Télécharger les plugins du site : GitHub - fancyapps/fancybox: jQuery lightbox script for displaying images, videos and more. Touch enabled, responsive and fully customizable. Inclure le plugin jQuery mousewheel pour la prise en charge de la molette de la souris GitHub - jquery/jquery-mousewheel: Un plugin jQuery qui ajoute la prise en charge de la molette de souris multi-navigateurs. 2-Ajouter les scripts nécessaires à votre code html 3-Dans le body Ajouter un div qui contient des images de votre choix (ajuster la taille des images à 300 px de largeur et 190 px de hauteur ) 4-Ecrire un code css qui permet de centrer le titre et bien positionner les images en fonction de leur div 5-Dans js : Utiliser la méthode fancybox () 6- Groupement Les galeries sont créées en ajoutant la même valeur d’attribut à plusieurs éléments. Par exemple, l’ajout d’un attribut à plusieurs éléments créera une galerie à partir de tous ces éléments. data-fancybox="gallery" 7-ajouter autoPlay :true à la fonction fancybox(). 8-tester l’utilité du :
- 5. $(".fancybox").fancybox({ autoPlay:true }); 9-ajouter une image pour le background de la page en utilisant ce lien : https://images.pexels.com/photos/131683/pexels-photo- 131683.jpeg?cs=srgb&dl=green-pattern-surface-131683.jpg&fm=jpg 10-ajouter ces boutons aux images : $("[data-fancybox]").fancybox({ loop: true, buttons: [ "zoom", "share", "slideShow", "fullScreen", "download", "thumbs", "close" ] }); 11- ajouter une légende à chaque image en utilisant l’attribut : data-caption 12-soit le code css suivant : .gallery{ width: 2000px; padding-top: 71px; } .gallery a{ width: 300px; height: 190px; display: inline-block; position: relative; text-decoration: none; } .gallery a img{ border: none; width: 300px; height: 190px; }
- 6. .gallery a span{ position: absolute; top: 25px; left: 25px; display: none; } .gallery span.title{ top: 60px; font-weight: bold; font-size: 1.2em; z-index: 2; color: white; } h1{ text-align: center; font-size: 40px; font-family: "anton",sans-serif; letter-spacing: 10px; text-transform:uppercase; } body { margin: 0; background-image: url(https://images.pexels.com/photos/131683/pexels- photo-131683.jpeg?cs=srgb&dl=green-pattern-surface-131683.jpg&fm=jpg); background-size: cover; } Ajouter un code qui permet de donner l’effet hover aux images : .gallery a:hover span{ display: block; } .gallery span.bg{ top: 0; left: 0; height: 190px; width: 300px; background: rgba(0, 0, 0, 0.7);
- 7. z-index: 1; } 13-Ecrire un code jQuery qui permet d’afficher l’effet du hover lors de l’entrée de la sourie, avec une transparence de 0.7 pendants 500ms , et de le cacher de nouveau lors de la sortie du sourie.
