View
216
Download
0
Category
Preview:
Citation preview
30/11/2016
1
JQuery
1
INF2005– Programmation web– A. Obaid
JQuery
• Une librairie JavaScript permettant de faciliter le traitement des documents HTML
• Permet d'écrire du JavaScript avec une syntaxe plus concise.
• Fonctions – Manipulation des arbres DOM incluant les styles – Manipulation d'événements – Effets d'animation – Support pour le langage AJAX
• Supporté par tous les navigateurs.
2
30/11/2016
2
INF2005– Programmation web– A. Obaid
Utilisation de JQuery
• On doit télécharger la libraire JQuery
• On l'enregistre pour s'y référer dans un document HTML: <script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
… notre code JavaScript …
</script>
• Plusieurs sites de téléchargement: – http://docs.jquery.com/Downloading_jQuery#Download_jQuery
– Http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js
3
INF2005– Programmation web– A. Obaid
Appel de la librairie
• Toute commande JQuery doit être appelée après que le document soit chargé.
• On peut y déclarer et utiliser des fonctions.
• Tout doit être appelé dans un script JavaScript au sein de la fonction $(*).ready().
• On peu stocker le résultat d'une commande JQuery:
– var texte=$("#monDiv").html();
jq1.html
$(document).ready(function() { … Commandes JQuery/JavaScript … });
Sélecteur Évènement Fonction de traitement(anonyme)
4
Objet JQuery
30/11/2016
3
INF2005– Programmation web– A. Obaid
Un premier exemple
<html> <head> <title> Premier Exemple</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $("div").click(function() { alert("Je suis la !"); } ); }); </script> </head> <body> <div id=“monDiv"> Si on clique ici, on verra la fenetre d'alarme ! </div> </body> </html>
jq2.html
5
INF2005– Programmation web– A. Obaid
Les identificateurs
• Dans JavaSCript, on peut trouver un élément avec son identificateur grâce à la méthode getElementById()
• Dans JQuery, on peut tout simplement utiliser un sélecteur pour retrouver l'élément
vElelement= ... getElementById("maListe") …..
$(document).ready(function() { $("#maListe").addClass("rouge"); });
6
30/11/2016
4
INF2005– Programmation web– A. Obaid
Les sélecteurs
• Ils permettent d'accéder à des éléments du DOM. – Ensemble très riche
• Utilisent des noms de balises, des identificateurs, des noms de classe, des valeurs d'attributs, des pseudo-classes, etc.
• Utilisés dans une forme $(sélecteur) où sélecteur peut prendre plusieurs formes semblables à celles utilisées dans CSS. – $(balise)
– $(identificateur)
– $(classe)
– $(expression)
– … 7
INF2005– Programmation web– A. Obaid
Les sélecteurs
– $("p") : tous les éléments <p>
– $("p.intro") : tous les éléments <p> de classe "intro".
– $("p#demo") : l'élément <p> d'identité "demo".
– $("[href]") : les éléments ayant un attribut href.
– $("[href='#']") : les éléments avec un attribut href = "#".
– $("[href$='.jpg']") : tous les éléments ayant un attribut href se terminant par jpg".
– $("ul li:first") : le premier <li> de chaque <ul>
– $("ul li:last") : le dernier <li> de chaque <ul>
– $("div#intro.entete"): les éléments de classe "entete" à l'intérieur d'un <div> d'identité="intro"
– $(“td”) : tous les éléments <td> dans le document
– $("p a"): éléments <a> , descendants de tout élément <p>
– $("p > a"): éléments <a>, enfants directs de tout élément <p> 8
30/11/2016
5
INF2005– Programmation web– A. Obaid
Les sélecteurs
• sel:even : séléments en position paire dans une sélection.
• sel:odd: éléments en position dans une sélection.. • sel:eq(n) ou :nth(n) : les éléments qui se trouvent
à la position n. Ca commence à la position 0. • sel:gt(n) : éléments à la position > n. • sel:lt(n) : éléments se à la position < n. • sel:first : équivalent à sel:eq(0). • sel:last : dernier élément de la liste • élements:parent : éléments qui ont des enfants.
9
INF2005– Programmation web– A. Obaid
Les sélecteurs
10
<!—Fichier : selecteur1.html --> <html> <head> <style type="text/css"> .vert { background-color: green;} .gris { background-color: grey; } .gras { font-style: bold;} </style> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $('tr:odd'). addClass('vert'); $('tr:even'). addClass('gris'); $('p:eq(1)'). addClass('gras'); }); </script> </head>
<body> <table border=1> <th> Nom </th> <th> Age </td><th> Salaire</th> <tr > <td> Alain </td> <td> 35</td> <td> 65000</td></tr> <tr> <td> Jean </td> <td> 45</td> <td> 80000</td></tr> <tr> <td> Pierre</td> <td> 50</td> <td> 82000</td></tr> <tr> <td> Paul </td> <td> 38</td> <td> 70000</td></tr> </table> <p> Ceci est un premier paragraphe</p> <p> Ceci est une deuxieme paragraphe </p> </body> </html>
30/11/2016
6
INF2005– Programmation web– A. Obaid
Exemples de sélecteurs
1. <p id="leTexte"> 2. <span class="unTexte"> Bonjour la gang ! </span> 3. <img src="photo1.jpg" class="image1" /> 4. </p> 5. <p> 6. <img src="photo2.gif" alt=" image2 /> 7. <span class="unTexte"> Les photos de vacances ! </span> 8. </p> 9. <img src="photo3.jpg" style="display: none;" class=" image1" />
#leTexte 1 #leTexte .unTexte: 2 p > span: 2 span + img: 3, 7 span > imgaucun .img[src$=.jpg] 3,9 .img[src~=photo] 3,6 p ~ img 9 p:first + img aucun :hidden 9 img:hidden:not(.image1): acun p:contains('Bonjour'):has(span): 1
11
INF2005– Programmation web– A. Obaid
Autres sélecteurs JQuery
• Sélecteurs propres à JQuery permettant de spécifier certains caractéristiques des éléments: – sel:hidden : Éléments invisibles,
– sel:visible : Éléments visibles.
– sel:parent : Éléments qui ont des enfants.
– sel:contains(texte) : Éléments qui contiennent texte
– sel:empty : Éléments dont le contenu est vide
– sel:nth(n) : n-ème élément
– sel:contains('chaine'): éléments qui contiennent chaine
– …
12
30/11/2016
7
INF2005– Programmation web– A. Obaid 13
Autres sélecteurs JQuery
<!-- Fichier : selecteur1_1.html --> <html> <head> <style tye="text/css"> .accentue { font-style: italic; background-color: #0f0; } </style> <script type="text/javascript" src="jquery.js" ></script> <script tyep="text/javascript"> $(document).ready(function() { $('span:contains(assurance)').addClass('accentue'); }); </script> </head> <body >
<p> <span> Ceci est un texte qui contient le mot assurance.</span> <span> Ceci est un texte qui ne contient pas ce mot. </span> </p> <p> Le contrat d'assurance <span> est decrit en termes juridiques</span> </p> <span> Ici, est question par exemple de l'assurance-auto</span> </body> </html>
INF2005– Programmation web– A. Obaid
Événements dans JQuery
• Comme dans JavaScript, un événement est associé à un élément et pourra être programmé pour effectuer une tache définie dans une fonction.
• La fonction peut être anonyme: – $(sel).evenement(function() {
Commandes Jquery ou JavaScript … });
• Exemple d’évènements: click(), mouseover(),…
• Exemple:
– JQuery:
$(document).ready(function() { $("a").click(function() { alert("Bonjour tout le monde ! " ); }); });
– Équivalent JavaScript:
<a href="javaScript:void(0)" onclick="alert('Bonjour tout le monde ! ')">Lien</a>
14
30/11/2016
8
INF2005– Programmation web– A. Obaid
Événements dans JQuery
• $(document).ready(fonction)
• $(sélecteur).click(fonction)
• $(sélecteur).dblclick(fonction)
• $(sélecteur).focus(fonction)
• $(sélecteur).mouseover(fonction)
• …
15
INF2005– Programmation web– A. Obaid
Les callbacks
• Fonctions appelées dans d'autres.
• Un fonction (anonyme) peut avoir une autre fonction en paramètre qui sera exécutée à la fin de l’exécution de celle-ci. – Utilisé (entre autres) pour faire des animations
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $(".test").fadeOut("slow",function(){ $(this).fadeIn("slow"); }); }); </script>
Jq8.html
16
30/11/2016
9
INF2005– Programmation web– A. Obaid
Chainage des fonctions
• On peut mettre des fonctions en chaine appliquées à un objet.
• Au lieu d'écrire: – $(".toto").append(" un texte");
$(".toto").css("border","1px solid red"); $(".toto").addClass("titi"); $(".toto").removeClass("toto");
On écrirait: – $(".toto").append(" un texte").css("border","1px solid red") .addClass("titi").removeClass("toto");
17
INF2005– Programmation web– A. Obaid
La méthode html()
• Elle permet d'accéder ou de modifier le contenu d'un élément – sel.html() : pour l'accès.
– sel.html('Code HTML'): pour la modification.
• Exemples: – alert($('#titre').html());
• Affiche le contenuHTML de #titre.
– $('#titre').html("<h2>Voici mon nouveau contenu</h2>'):
• Change le contenu HTML de #titre.
$(document).ready(function() { $(".monPar1").html("<h2> Au revoir ancien paragraphe </h2>"); $(".monPar3").html($(".monPar2").html()); });
jq9.html
18
30/11/2016
10
INF2005– Programmation web– A. Obaid
La méthode text()
• Permet de manipuler le contenu d'un élément en tant que texte.
• Le contenu est considéré comme du texte et non comme du HTML.
<p id="premier">
<span class="texte"> Bonjour la gang ! </span> <img src="photo1.jpg" /> </p>
$(".premier").text() ramène: Bonjour la gang ! $(".premier").html() ramène: <span class="texte"> Bonjour la gang ! </span> <img src="photo1.jpg" /></p>
jq3.html
19
INF2005– Programmation web– A. Obaid
La méthode replaceWith()
• html() et text() permettent de changer le contenu d'une balise.
• replaceWith() permet de remplacer la balise et son contenu.
$(document).ready(function() { $('a').replaceWith('<h3>Encrageenlevé! </h3>'); $('#titre').replaceWith('<h1>'+$('#titre').html()+'</h1>'); $('.premier').replaceWith('<a href="http://www.uqam.ca"> Site UQAM</a>'); });
jq11.html
20
30/11/2016
11
INF2005– Programmation web– A. Obaid
Les méthodes before() et after()
• Elles permettent d'ajouter du contenu à un élément avant ou après l'élément en question.
• Exemple: – $('zonetexte').after('<p> N'oubliez de signer votre texte SVP ! </p>');
– $('zonetexte').after("<p class='petit'> N'oubliez de signer! </p>");
jq10.html
21
INF2005– Programmation web– A. Obaid
Les méthodes wrap() et wrapIn()
• wrap() permet d'ajouter une balise (ouvrante et fermante) autour d'un élément. – En fait on passe en paramètres une balise ouvrante et sa fermante
(sans contenu !).
• wrapIn() entoure un contenu.
• Exemple: – $('div').wrap('<em></em>') transformera les <div>en:
• <em><div> …</div></em>
– $('div').wrapIn('<em></em>') transformera les <div> en
• <div><em> … </em></div>
function colorer() { $('.rouge').wrap('<span style="color:red"></span>'); $('.vert').wrap('<span style="color:green"></span>'); $('.bleu').wrap('<span style="color:blue"></span>'); }
jq12.html
Jq12_1.html
22
30/11/2016
12
INF2005– Programmation web– A. Obaid
La méthode unwrap()
• Inverse de wrap().
• Elle permet d' enlever la balise parent qui l'enveloppe.
… $('#enveloppe').unwrap(); … <b> <div id="enveloppe"> Ceci est un div enveloppe avec <b> </div> </b>
jq12.html
23
INF2005– Programmation web– A. Obaid
Les méthodes remove() et empty()
• remove() permet de supprimer des éléments. – On lui passe un sélecteur de l'élément à supprimer.
• empty() permet de vider le contenu d'un l'élément
<script type="text/javascript"> function viderLesBoutons(){ $('#LesBoutons button').empty(); } function viderTout(){ $('body').empty() } </script> … <body> <div id="LesBoutons"> <button onClick="viderLesBoutons();">Vider les boutons</button><br /> <button > Un bouton vide !</button> </div> <button onClick="viderTout();">Vider les le tout </button> …
Jq13.html
$("button").click(function(){ $("p").remove(); } );
24
30/11/2016
13
INF2005– Programmation web– A. Obaid
JQuery et CSS
• On dispose de méthodes pour la manipulation des classes CSS: addclass(), removeClass(), etc.
$(document).ready(function() { $("#maListe"). hover(function() { $(this).addClass("vert"); }, });
$(document).ready(function() { $("#maListe"). hover(function() { $(this).removeClass("vert"); }; });
25
INF2005– Programmation web– A. Obaid
addClass() et removeClass()
• addClass() permet d'ajouter une ou plusieurs classes
• removeClass() permet d'enlever une ou plusieurs classes
• Il existe aussi removeAttr() pour gérer les propriétés CSS
<style type="text/css"> .monDiv { color: red; } .lien:hover { color: yellow; } </style> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> functionajouteclasse(){ $('div:first').addClass('monDiv'); $('a').addClass('lien'); } </script> </head> <body> <div> Premier div</div> <div>deuxiemediv</div> <buttononclick="ajouteclasse();"> Ajouter une classe </button> <br/><a href="page1.html"> Un lien </a> </body></html>
jq17.html
26
30/11/2016
14
INF2005– Programmation web– A. Obaid
Modifications de propriétés CSS
• css() peut s'utiliser de plusieurs façons: – Css("propriéte") permet de récupérer la valeur d'une propriété CSS
– Css("propriété","valeur") permet de définir une propriété CSS
– css({"apropriete1": "valeur1", "propriete2": "valeur2",…}) permet de définir plusieurs propriétés CSS
$('body').css('background-color','#0ff'); $('a') .css({ borderBottom: '2px dashed #ff00ff', color: '#4Cb', paddingLeft: '4px', 'float': 'left', margin: '4px', 'letter-spacing': '2px', })
27
INF2005– Programmation web– A. Obaid
Modifications de propriétés CSS <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> function accentuer(){ $("dt").addClass("accentue"); } </script> <style type="text/css"> h1 { font-size: 2.5em; margin-bottom: 0;} .accentue { font-style: italic; color:red;} </style> </head> <body > <h1>Villes du monde </h1> <dl> <dt> Montreal </dt><dd> Large, verte, vivante et dynamqiue</dd> <dt> New York </dt><dd> Dense, pleine de grattes-ciels , passionnante, centre d'affaires </dd> </dl> <a href="#" onMouseOver="accentuer()">Allez-y ! </a> </body> </html>
jq6.html
28
30/11/2016
15
INF2005– Programmation web– A. Obaid
Modifications de propriétés CSS
• La méthode toggleClass() permet d’ajouter et d'enlever des classes (par jonglage !) – Les classes peuvent être appliquées en série.
<style type="text/css"> .lrouge { background-color: #000; color: #fff; border : 5px solidyellow;} } .encadre { display: block; }
</style> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> function jouerAvec(){ $('a').toggleClass('encadre'). toggleClass('lrouge'); } </script> </head> <body>
jq18.html
29
INF2005– Programmation web– A. Obaid
Objets JQuery
• jQuery repose sur la fonction jQuery() appelée aussi $() qui retourne un objet jQuery.
• Cet objet a plusieurs méthodes: – Manipulation du DOM, de CSS, d’évènements et autres
effets visuels.
• Exemple: – Si on désire masquer progressivement les paragraphes
d’une page, on utilise : – $("p").fadeOut(); jq8.html
30
30/11/2016
16
INF2005– Programmation web– A. Obaid
JQuery et DOM
• La fonction $() retourne un tableau d'objets DOM. • Les éléments de ces tableaux sont accessibles grâce à leurs
indices. • Exemples:
– $('body'): retourne un tableau à un élément. – $('a') : retourne un tableau d' éléments <a> – $('p')[1] désigne le deuxième paragraphe.
• before() et after(), etc. utilisent ces indices pour déterminer la
place de l'action JavaScript à effectuer.
31
INF2005– Programmation web– A. Obaid
JQuery et DOM
• On peut consulter des propriétés de ces objets tels que tagName, length, etc.
• On a aussi des méthode de parcours de l'arbre DOM. – parent() renvoie l'élément parent direct d'un élément. – children() renvoie les éléments enfants directs d'un élément
• On peut ajouter des éléments à des endroits spécifiques avec
les méthodes prependTo(), appendTo(), insertBefore(), insertAfter()
function lister(){ alert($('.bouton').length); alert($('#bouton1')[0].tagName); alert($('body').parent()[0].tagName); }
Jq14.html
32
30/11/2016
17
INF2005– Programmation web– A. Obaid
Sélecteurs et formulaires
• Il existe des sélecteurs spécifiques aux formulaires : – :checked : les boutons checkbox ou radio cochés – :selected : les options (select) sélectionnées. – :input : les éléments input d'un formulaire. – :button : les boutons. – :reset : les boutons reset. – :submit : les boutons submit. – :checkbox : les cases à cocher. – :radio : les boutons radio. – :text : les champs de texte. – :password : les champs de mots de passes. – :hidden : les éléments cachés du formulaire. – …
• La méthode val() retourne la valeur d'un champ du formulaire. Elle permet aussi de modifier un contenu.
jq16.html
33
INF2005– Programmation web– A. Obaid
Événements de formulaires
• select: déclenché lorsque du texte est sélectionné dans un champ de type text ou un texteara.
• change: déclenché lorsque le texte d'un champ de type text, password ou texteara a été modifié.
• submit : déclenché lorsqu'un formulaire est soumis
• focus : déclenché lorsque le focus est mis sur un élément d'un formulaire
jq21.html
$(document).ready(function() { $(':text, textarea').select(function(){ alert("Champ texte selctionne : "+$(this).val()); }); $(':input').change(function(){ alert("Champ input modifie : "+$(this).val()); }); });
34
30/11/2016
18
INF2005– Programmation web– A. Obaid
Événements de souris et clavier
• keydown : enfoncement de la touche
• keypress : maintien de la touche enfoncée
• keyup : relâchement de la touche.
• mousedown : appui sur la souris
• mouseup : relâchement de la souris
• click : clic de la souris.
• mouseenter : la souris entre au-dessus de l'élément
• mouseleave : la souris quitte l'élément
• mouseover : la souris entre au-dessus de l'élément
• mouseout : la souris quitte l'élément
• mousemove : la souris bouge sur l'élément
jq22.html
jq23.html 35
INF2005– Programmation web– A. Obaid
Objet clic
• Correspond au clic de la souris;
• Possède des propretés de coordonnées: – pageX: Coordonnée X (gauche vers la droite)
– pageY: Coordonnée Y (de haut vers le bas)
36
30/11/2016
19
INF2005– Programmation web– A. Obaid
Événements de fenêtre
• scroll : déclenché lorsque l'utilisateur utilise un ascenseur horizontal ou vertical.
• resize : déclenché lorsque l'utilisateur redimensionne la fenêtre.
• load : déclenché lorsque l'élément en question a fini de se charger (page, cadre, image, etc.).
• ready : déclenché lorsque la page est prête. Utilisé avec l'objet document.
• unload : déclenché lorsque l'utilisateur quitte la page.
37
INF2005– Programmation web– A. Obaid
Autres événements
• hover() : déclenché lorsque la souris passe au-dessus d'un élément (mouseover) et quand elle s'en va (mouseout).
• toggle() : fonction de basculement appelée successivement pour les effets show/hide et slide).
jq24.html
38
30/11/2016
20
INF2005– Programmation web– A. Obaid
Les fonctions d'animation
• Les méthodes slideDown() et slideUp() changent la hauteur et le largeur d'éléments – $(sélecteur).slideDown(vitesse, fonction)
– $(sélecteur).slideUp(vitesse, fonction)
• La méthode slideToggle() permet de faire un basculement. – $(sélecteur).slideToggle(vitesse, fonction)
• La vitesse peut être: "slow", "fast", "normal" ou une durée en millisecondes. La fonction (si elle est présente) sera exécutée à la fin de l'effet.
39
<script type="text/javascript"> $(document).ready(function(){ $("#montrer").click(function(){ $("#tableau").slideDown("slow"); }); }); </script>
jq30.html
INF2005– Programmation web– A. Obaid
Les fonctions d'animation
40
<!-- Fichier : jq9.html --> <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function() { $("#bascule").click(function(){ $(".texte").slideToggle( 'slow'); }); }); </script> <style> .texte { width:400px; color: red;border:1px solid black; } #uneImage { width:100px; float: left; margin: 5px; } </style>
<body> <p> Appueyz sur le bouton pour faire appareite et disparaitre le bloc ci-dessous</p> <button id="bascule">Basculer</button> <div class="texte"> Quam ob rem ut ii qui superiores…. <img id="uneImage" src="ete.jpg"> <br> Ideo urbs venerabilis post superbas efferatarum gentium cervices oppressas latasque leges ... </div> </body> </html>
30/11/2016
21
INF2005– Programmation web– A. Obaid
Les méthodes pour l'animation
• animate() permet d'animer le style CSS.
• Elle a la forme suivante:
• animate(style, [durée], [manière], [fin]) • style: formé des couples attribut/valeur définissant le style de
l'élément à la fin de l'animation.
• durée : durée en ms de l'animation ou un symbole parmi : slow (600ms), normal (400ms), fast (200ms).
• manière : chaine qui détermine la façon dont les propriétés vont changer : "swing", "linear".
• fin: fonction appelée quand l'animation est finie.
jq25.html
41
INF2005– Programmation web– A. Obaid
Animation - Exemples
42
script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("div").animate({height:300},"slow"); $("div").animate({width:300},"slow"); $("div").animate({height:100},"slow"); $("div").animate({width:100},"slow"); }); }); </script> <body> <button>Start Animation</button> <br /><br /> <div style="background:#98bf21;height:100px;width:100px; position:relative"> </div> </body> </html>
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animation
30/11/2016
22
INF2005– Programmation web– A. Obaid
Animation - Exemples
43
<html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("div").animate({left:"100px"},"slow"); $("div").animate({fontSize:"3em"},"slow"); }); }); </script> </head> <body> <button>Start Animation</button> <br /><br /> <div style="background:#98bf21;height:100px;width:200px;position:relative">HELLO</div> </body> </html>
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animation2
INF2005– Programmation web– A. Obaid
Les effets de visibilité
• Les méthodes hide() et show() donnent un effet d'animation en jouant sur la visibilité (attribut visibility) des éléments : – hide (vitesse[, callback])
– show(vitesse[, callback])
• vitesse peut être: "slow", "fast", "normal" ou une durée en millisecondes. Callback sera exécutée à la fin de l'effet.
• Ces méthodes sont souvent combinées.
• La méthode toggle (vitesse[, callback]) est utilisée pour passer entre l'absence et la présence d'un élément
jq27.html
44
$(document).ready(function(){ $(".cacheMoiCa").click(function(){ $(".secret").hide("slow"); }); });
$(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); });
30/11/2016
23
INF2005– Programmation web– A. Obaid 45
Les effects de visibilité
<!-- Fichier : jq4.html --> <html> <head> <style> #click1{ margin:10px;padding:12px; border:2px solid blue; width: 80px; height:20px; } </style> <script type="text/javascript" src="jquery.js" ></script> <script tyep="text/javascript"> $(document).ready(function() { $("#click1").click(function(){ $("#div1").hide(); }); }); </script> </head>
<body> <div> <div id="click1"> Clickez ici </div> <div id="div1"> <img src="ete.jpg" width=300px/> </div> </div> </body> </html>
jq26.html
jq27.html
jq28.html
jq29.html
jq8.html
bouger.html
INF2005– Programmation web– A. Obaid
La méthode toggle()
46
<!-- Fichier : jq7.html --> <html> <head> <style type="text/css"> #go{ border:2px solid #666; width: 40px; } </style> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#go").click(function(event){ $("#leDiv").toggle('slow'); }); }); </script> </head>
<body> <div id="go">Vas-y</div> <div id="leDiv"> <img src="ete.jpg" width=120px /> </div> </body> </html>
30/11/2016
24
INF2005– Programmation web– A. Obaid
Modification de la transparence
• Les méthodes fadeIn() /fadeOut() permettent de faire apparaître/ disparaitre les éléments progressivement en jouant sur le transparence. – fadeIn(vitesse[, callback])
– fadeOut(vitesse[, callback])
• Des fois, on inclut une de ces méthodes comme callback de l'autre:
$("#p2").fadeOut(2000, function() {
$(this).fadeIn(2000);
});
INF2005– Programmation web– A. Obaid
Modification de la transparence
• fadeTo( ) permet de changer l'opacité d'un élément en la faisant passer à un niveau donné.
– fadeTo(vitesse, opacite, callback);
• opacity : valeur entre 0 et 1 (1 : très opaque).
48
30/11/2016
25
INF2005– Programmation web– A. Obaid
Modification de la transparence
49
<!-- Fichier : jq10.html --> <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function() { $("#plusOpaque").click(function(){ $(".texte").fadeTo( 'slow', 0.9); }); $("#moinsOpaque").click(function(){ $(".texte").fadeTo( 'slow', 0.1); }); }); </script> <style> .texte {width:400px; color: red; border:1px solid black;} #uneImage { width:100px; float: left; margin: 5px; } </style> </head>
<body> <p> Appueyz sur le bouton pour faire appareite et disparaitre le bloc ci-dessous</p> <button id="plusOpaque">Opaciser</button> <button id="moinsOpaque">Eclaircir</button> <div class="texte"> Quam ob... <img id="uneImage" src="ete.jpg"> <br> Ideo urbs venerabilis post superbas ... </div> </body> </html>
INF2005– Programmation web– A. Obaid
Modification de la transparence
50
<!-- Fichier : jq2_1.html --> <html> <head> <script type="text/javascript" src="jquery.js" ></script> <script tyep="text/javascript"> $(document).ready(function() { $("#p1").fadeOut('slow'); $("#p2").fadeOut(2000, function() { $(this).fadeIn(2000); }); }); </script> </head>
<body> <p id="p1"> Mon premier paragraphe Hac ex causa conlaticia stipe Valerius humatur ille …</p> <p id="p2"> Mon second paragraphe: Proinde die funestis interrogationibus praestituto im…. </p> </body> </html>
30/11/2016
26
INF2005– Programmation web– A. Obaid
La méthode animate()
• Permet d'animer des propriétés CSS
– animate(styles, [durée], [manière], [callback])
• styles: liste attribut/valeur des éléments style utilisés.
• durée : slow (600ms), normal (400ms), fast (200ms) ou une durée en ms.
• manière : façon dont les propriétés vont changer : "linear", "swing", …
• Le paramètre styles sous forme {propriété: "valeur" ,…}
• {width: "100", height: "200px", fontSize: "14pts"}
jq25.html
51
INF2005– Programmation web– A. Obaid
La méthode animate()
52
script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("div").animate({height:300},"slow"); $("div").animate({width:300},"slow"); $("div").animate({height:100},"slow"); $("div").animate({width:100},"slow"); }); }); </script> <body> <button>Start Animation</button> <br /><br /> <div style="background:#98bf21;height:100px;width:100px; position:relative"> </div> </body> </html>
Source: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animation
30/11/2016
27
INF2005– Programmation web– A. Obaid
Animation - Exemples
53
<html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("div").animate({left:"100px"},"slow"); $("div").animate({fontSize:"3em"},"slow"); }); }); </script> </head> <body> <button>Start Animation</button> <br /><br /> <div style="background:#98bf21;height:100px;width:200px;position:relative">HELLO</div> </body> </html>
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animation2
INF2005– Programmation web– A. Obaid
Effets animés
• Pour avoir un animation progressive il faudra donner l'impression de continu
• Règle générale:
– Durée de l'animation d'une boite égale à la différence de hauteur (à la fin de l'animation) divisée par la vitesse
– La durée d'animation de la vidéo est de 25 frames/seconde (25 fps).
54
Recommended