TP JAVASCRIPT OMI4 jquery et ses Plungins

Dimension: px

Commencer à balayer dès la page:

Download "TP JAVASCRIPT OMI4 jquery et ses Plungins"

Sylvain Brunet
il y a 8 ans
Total affichages :

1 TP JAVASCRIPT OMI4 jquery et ses Plungins Objectifs de ce TP : découvrir quelques exemples d utilisation de la bibliothèque jquery et également quelques plugins. Exercice 1 : gestion d un bouton rollover Méthode traditionnelle : on modifie la propriété src de l image en fonction des événements suivants : Survol de l image onmouseover image de survol Fin de survol de l image onmouseout image normale Bouton de la souris enfoncé onmousedomn image bouton enfoncé Bouton de la souris relâché onmouseup image de survol + action du bouton Exemple de code à mettre en œuvre : <img id="i1" src="stops.png" ondragstart="return false;" onmousemove="this.src='stops.png'" onmouseout="this.src='stopn.png';" onmousedown="this.src='stope.png';" onmouseup="compte()"/> Travail demandé : 1) Construisez une page html avec une image et un champ texte dans lequel on affiche le nombre de clics sur le bouton. Utilisez les images téléchargeables sur le blog : StopN.png - StopS.png - StopE.png et le code donné ci-dessus. 2) Pourquoi le code ondragstart = return false est-il nécessaire? Suggestion : testez la page sans ce code, que constatez-vous? Exercice 2 : gestion de plusieurs boutons rollover avec jquery Vous trouverez ci-dessous le code d une version de rollover géré à l aide de jquery. Utilisez ce code pour créer un nouveau fichier HTML et testez le. Ajoutez un troisième bouton pour remettre à zéro le compteur.

survol de l image onmouseout image normale Bouton de la souris enfoncé onmousedomn image bouton enfoncé Bouton de la souris relâché onmouseup image de survol + action du bouton Exemple de code à

2 Code source <html> <head> <! Chargement de la bibliothéque jquery > <script type="text/javascript" src="jquery1.7.1.js"></script> <script type="text/javascript"> // mise en place du code $(document).ready(function(){ // mise en place du gestionnaire d'événements sur tous les objets de la classe Mesboutons $(".Mesboutons").mouseover(function(){$(this).attr("src",'StopS.png');); $(".Mesboutons").mouseout(function(){$(this).attr("src",'StopN.png');); $(".Mesboutons").mousedown(function(){$(this).attr("src",'StopE.png');); $(".Mesboutons").mouseup(function(){ $(this).attr("src",'stops.png'); var action = $(this).attr("rel"); window[action](); ); ); var compteur=0; // déclaration en global d'une variable de comptage des clics sur les boutons // Création d'une fonction qui incrémente le compteur et affiche le résultat dans le champ texte function compte(){ compteur++; $("#T1").attr("value",compteur); // Création d'une fonction qui décrémente le compteur et affiche le résultat dans le champ texte function decompte(){ compteur--; $("#T1").attr("value",compteur); </script> </head> <body> Gestion d'un bouton rollover avec effet de l'enfoncement du bouton avec jquery <br> <br> <img id="i1" class="mesboutons" src="stopn.png" ondragstart="return false;" rel="compte" alt="plus"/> <img id="i2" class="mesboutons" src="stopn.png" ondragstart="return false;" rel="decompte" alt="moins"/> <br> Nombre de pressions sur le bouton : <input type="text" id="t1" value="0" size="3"/> </body> </html> 2

attr("src",'StopN.png');); $(".Mesboutons").mousedown(function(){$(this).attr("src",'StopE.png');); $(".Mesboutons").mouseup(function(){ $(this).attr("src",'stops.png'); var action = $(this).

3 Exercice 3 : Utilisation du plugin Camera slideshow Objectif de cet exercice : exploiter le plugin Camera slideshow. Ce plugin est disponible sur le site suivant : Vous trouverez sur ce site les informations nécessaire à sa mise en œuvre et également les liens de téléchargement. Comment utiliser ce plugin? 1) Télécharger le fichier Exo3.zip contenant une structure de fichiers minimale pour la mise en œuvre de ce plugin. Vous trouverez sur le blog le fichier zip du plugin complet : pixedelic-camera-2bfc254.zip. 2) Décompressez le fichier Exo3.zip dans le répertoire de votre choix. 3) Construisez un fichier HTML permettant le test de ce plugin. Eléments à implanter dans le fichier HTML : Feuille de style css et style spécifique au projet <link rel='stylesheet' id='camera-css' href='camera/css/camera.css' type='text/css' media='all'> <style> body { margin: 0; padding: 0; a { color: #09f; a:hover { text-decoration: none; #back_to_camera { clear: both; display: block; height: 300px; line-height: 40px; padding: 0px;.fluid_container { margin: 0 auto; max-width: 600px; width: 90%;.Legende{ margin: 0px; padding : 0px; vertical-align:midle; display: inline; </style> 3

zip contenant une structure de fichiers minimale pour la mise en œuvre de ce plugin. Vous trouverez sur le blog le fichier zip du plugin complet : pixedelic-camera-2bfc254.zip. 2) Décompressez le fichier Exo3.

4 Implantez le code Javascript du plugin <script type='text/javascript' src='camera/scripts/jquery.min.js'></script> <script type='text/javascript' src='camera/scripts/jquery.mobile.customized.min.js'></script> <script type='text/javascript' src='camera/scripts/jquery.easing.1.3.js'></script> <script type='text/javascript' src='camera/scripts/camera.min.js'></script> Implantez le code HTML concernant les images du slideshow. Il suffit de placer les images dans des div avec des attributs conformes au plugin. (data-src= image.jpg ) <div id="back_to_camera"> <div class="fluid_container"> <div class="camera_wrap camera_violet_skin" id="monslider"> <div data-src="i1.jpg"> <div class="camera_caption Legende"> Texte de la légende de l'image <div data-src="i2.jpg"> <div data-src="i3.jpg"> <div data-src="i4.jpg"> <div data-src="i5.jpg"> <div data-src="i6.jpg"> Implantez pour finir le code JavaScript assurant l initialisation du plugin. <script type="text/javascript" > jquery(function(){ jquery("#monslider").camera({ portrait:true, // Conserve les proportions de l'image utile si les images ont des formats différent time:2000, // temps entre chaque diapo transperiode:100, // durée de la transition piediameter:38, // diamètre du sablier circulaire fx:'scrollleft' // force la transition uniquement en scroll à gauche sinon transition aléatoire ); ); </script> 4

Il suffit de placer les images dans des div avec des attributs conformes au plugin. (data-src= image.

5 Nous avons ici un exemple de paramétrage du plugin, d autres paramètres sont disponibles. Vous trouverez la description des autres paramètres sur le site de l auteur. Dans cet exemple le sélecteur des images ne présente pas les vignettes des images. Si vous souhaitez ajouter les vignettes vous devez créez les fichiers des vignettes et ajouter le code HTML suivant : <div data-src="image1.jpg"> // avant modification <div data-src="image1.jpg" data-thumb= "Vignette_image1.jpg"> // après modification Il faut également modifier le code d initialisation du plugin, voir ci-dessous le code en rouge. <script type="text/javascript" > jquery(function(){ jquery("#monslider").camera({ portrait:true, // Conserve les proportions de l'image utile si les images ont des formats différent time:2000, // temps entre chaque diapo transperiode:100, // durée de la transition piediameter:38, // diamètre du sablier circulaire fx:'scrollleft', // force la transition uniquement en scroll à gauche sinon transition aléatoire thumbnails : true // valide l affichage des vignettes ); ); </script> A l aide de la documentation en ligne répondez aux questions suivantes : 1) Modifiez la vitesse du diaporama. 2) Modifiez la vitesse des transitions. 3) Modifiez le mode de transition. 4) Modifier le type de sablier, remplacez le sablier circulaire par le sablier en forme de barre. 5) Ajoutez une légende aux autres images et modifiez le style d affichage des légendes. 6) Ajoutez les vignettes. 5

Si vous souhaitez ajouter les vignettes vous devez créez les fichiers des vignettes et ajouter le code HTML suivant : <div data-src="image1.jpg"> // avant modification <div data-src="image1.

6 Exercice 4 : Utilisation du plugin ClueTip Ce plugin est disponible aux adresses suivantes : ou (doc en ligne) Télécharger sur le blog le fichier Exo4.ZIP d une version simplifiée et décompressez le dans le répertoire de votre choix. Le fichier Exo4.html contient un exemple d utilisation de ce plugin. Ouvrez ce fichier dans un navigateur pour voir le fonctionnement de cette bulle d aide. A l aide de la documentation en ligne répondez aux questions suivantes : 1) Modifiez le titre de la bulle d aide avec le texte de votre choix. 2) Modifiez le texte contenu dans la bulle d aide. 3) Forcez la largeur et la hauteur de la bulle d aide. 4) Modifiez le code pour ajouter à la bulle une commande de fermeture. 5) Modifier le texte de fermeture et testez les différents emplacements disponibles. 6) Remplacez le texte par une image (petite croix cross.png). 7) Testez les trois styles disponibles.

html contient un exemple d utilisation de ce plugin. Ouvrez ce fichier dans un navigateur pour voir le fonctionnement de cette bulle d aide.

Documents pareils

.. CSS. Damien Nouvel. Damien Nouvel (Inalco) CSS 1 / 15

.. CSS. Damien Nouvel. Damien Nouvel (Inalco) CSS 1 / 15 .. CSS Damien Nouvel Damien Nouvel (Inalco) CSS 1 / 15 Feuilles de styles Plan 1. Feuilles de styles 2. Sélecteurs 3. Attributs Damien Nouvel (Inalco) CSS 2 / 15 Feuilles de styles Déportation des styles