Your SlideShare is downloading. ×
jQuery
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

jQuery

3,835
views

Published on

Présentation de jQuery

Présentation de jQuery

Published in: Technology

1 Comment
6 Likes
Statistics
Notes
  • En fait, l'astuce de la touche F12 marche je crois sur tous les navigateurs. A confirmer pour Safari et Opera ;)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
3,835
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
156
Comments
1
Likes
6
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. JQuery v 1.2
  • 2. Votre formateur var formateur = { prenom : "Franck", nom : "SIMON", formation : "ingénieur", competences : ["Java","Java EE","C - C++", "web", "Javascript","PHP","MySql","etc."], emploi : "consultant independant", email : "franck.simon@antislashn.org", web : "www.franck-simon.com" }; http://www.linkedin.com/pub/franck-simon/49/584/b73 http://www.viadeo.com/fr/profile/franck.simon16 https://plus.google.com/u/0/103522587535315941799/posts @antislashnantislashn.org JQuery 2 / 128
  • 3. jQuery● Objectifs de la formation ● revoir les principes du Web 2.0 – JSON, Ajax ● savoir utiliser les outils de debug des navigateurs ● revoir les principes dutilisation de JavaScript en programmation objet ● revoir les principes de chargement du DOM ● savoir utiliser jQueryantislashn.org JQuery 3 / 128
  • 4. Web 2.0● Évolution conceptuelle du Web ● expression inventée par Dal Dougherty, et reprise par Tim OReilly – terme largement accepté maintenant ● ensemble de techniques, fonctionnalités ● objectifs – utilisation plus naturelle du Web – meilleurs expérience utilisateur ● fluidité de la navigation, attente minime, ... – web socialantislashn.org JQuery 4 / 128
  • 5. Web 2.0● Application Web "traditionnelle" URL : 1ére requête génération envoi page complète page affichage page requête + données génération envoi page complète page affichage page requête + données génération affichage envoi page complète page pageantislashn.org JQuery 5 / 128
  • 6. Web 2.0● Application Web 2,0 URL : 1ére requête génération envoi page complète page affichage page requête + données génération envoi données données injection données requête + données génération injection envoi donnée données donnéesantislashn.org JQuery 6 / 128
  • 7. Web 2.0● Le Web 2.0 est donc un mode de développement des sites web ● une page est envoyée à la première connexion – avec fichiers CSS et JavaScript ● chaque action de lutilisateur sur la page provoque des demande de au serveur – le serveur ne renvoie que des données ● pas de page complète à envoyer ● nécessite une fonctionnalité spécifique qui permet au navigateur de faire ds requêtes au serveur via JavaScript – lobjet XMLHttpRequestantislashn.org JQuery 7 / 128
  • 8. Deboguer JavaScript● Tous les navigateurs actuels fournissent nativement ou par plugin des outils de debug ● suivi des requêtes, avec temps de réponse ● console de log JavaScript – avec ● affichage du DOM, des CSS, etc.● Ces outils ne sont pas activés par défaut ● il faut dabord charger léventuel plugin ● puis activer loutil de debugantislashn.org JQuery 8 / 128
  • 9. Deboguer JavaScript● Deboguer avec IE ● IE est livré avec des outils de debug ● activation par le menu Outils de développement – touche F12antislashn.org JQuery 9 / 128
  • 10. Deboguer JavaScript● Console IEantislashn.org JQuery 10 / 128
  • 11. Deboguer JavaScript● Deboguer avec Firefox ● ajouter le plugin Firebug – menu Modules complémentairesantislashn.org JQuery 11 / 128
  • 12. Deboguer JavaScript● Deboguer avec Firefox ● installer FireBug ● puis dans le menu Développement Web, activer les outilsantislashn.org JQuery 12 / 128
  • 13. Deboguer JavaScript● Console de FireBug ● bien noter quil existe la console par défaut et la console de FireBugantislashn.org JQuery 13 / 128
  • 14. Deboguer JavaScript● Deboguer avec Google Chrome ● ajouter via Chrome Web Store le plugin FireBug Lite ● activer le mode développeur dans le extensions – menu Outils … Optionsantislashn.org JQuery 14 / 128
  • 15. Deboguer JavaScript● Deboguer avec Google Chrome ● activer le mode développeur – menu Outils … Outils de développementantislashn.org JQuery 15 / 128
  • 16. Deboguer JavaScript● Console de Google Chromeantislashn.org JQuery 16 / 128
  • 17. Deboguer JavaScript● Si la console est supportée par le navigateur ● vous pouvez utiliser lobjet console console.log("Hello"); console.error("ERREUR"); ● si la console nexiste pas, vous pouvez lémuler par un affichage dans des balises div sur votre pageif(!console){ console = {}; console.log = function(message){ document.getElementById("__console_log__").innerHtml += message; } console.error = function(message){ document.getElementById("__console_error__").innerHtml += message; }}antislashn.org JQuery 17 / 128
  • 18. JSon● JSon : JavaScript Object Notation ● format déchange humainement compréhensible ● RFC 4627 ● souvent utilisé pour la sérialisation et la transmission dobjets ● la fonction eval() de JavaScript permet ensuite dévaluer la chaîne de caractères JSon json_1.html var r = eval("2+2"); console.log(r); var json = {civilite:"M",...,adresse:{rue:"Rue de Bruxelles",...}}; var obj = eval("("+json+")"); console.log(obj.adresse.ville);antislashn.org JQuery 18 / 128
  • 19. JSon● Syntaxe de base ● cf le site de référence http://www.json.org/antislashn.org JQuery 19 / 128
  • 20. POO et JavaScript● JavaScript offre un support limité des concepts objets ● la classe en tant que telle nexiste pas – le mot clé class est réservé mais nest pas utilisé ● la programmation est orienté prototype – le prototype est un objet permettant la création dautres objets par clonage ● la POO en JavaScript se base sur les mécanismes de – prototype – function – concept de closure (fermeture)antislashn.org JQuery 20 / 128
  • 21. POO et JavaScript● Tout est objet en JavaScript ● sauf null et undefined● JavaScript utilise deux types dobjets ● les objets natifs (Native Object) ● les objets du conteneur dexécution (Host Object)● Les objets natifs utilisent des collections dynamiques de propriétés ● contient un référence vers un autre objet, null ou undefined ● la fonction delete permet de supprimer un propriétéantislashn.org JQuery 21 / 128
  • 22. POO et JavaScript● Création dune classe ● les classe sont définie via des fonctions function foo(){ var message = "Hello"; this.getMessage = function(){ return message;} alert(message); } ● le mot clé new permet de créer une instance var f = new foo(); alert(f.getMessage());antislashn.org JQuery 22 / 128
  • 23. POO et JavaScript● Dans lexemple de la page précédente ● foo est une fonction, foo peut-être vu comme une classe ● linstanciation par new va : – exécuter la fonction – créer un espace de stockage pour les variables locales stockées dans la fonction ● la variable message est "privée" à la classe ● la méthode getMessage est ajoutée à linstance – this référencie lobjet lui-même ● alert() est exécutéantislashn.org JQuery 23 / 128
  • 24. POO est JavaScript● Contexte dexécution des fonctions ● le mot-clé this dans un contexte non objet fait référence à window – si la fonction foo est exécutée en tant que fonction, getMessage est ajouté à window ● this fait référence à window foo(); alert(window.getMessage()); – si une instance de foo est créée, this fait référence à lobjet créé ● getMessage devient une méthode de foo var f = new foo(); alert(f.getMessage());antislashn.org JQuery 24 / 128
  • 25. POO et JavaScript● Le type natif Object est une collection de propriétés● Les propriétés sont crées dynamiquement lors de lassignation dune valeur ● la propriété est mise à jour si elle existe var o = new Object(); o.couleur = "vert"; console.log(o.couleur); console.log(o[couleur]);antislashn.org JQuery 25 / 128
  • 26. POO et JavaScript● Par défaut Object ne possède que la propriété prototype ● prototype est de type Object ● une fonction est aussi de type Object● La programmation par prototype ne fait pas la distinction entre une propriété de type donnée ou code ● la structure de lobjet peut changer dynamiquementantislashn.org JQuery 26 / 128
  • 27. POO et JavaScript● Évaluation dune propriété par linterpréteur : ● linterpréteur vérifie si la propriété existe au sein de lobjet ● si la propriété nexiste pas linterpréteur la recherche auprès du prototype – le prototype étant un objet il possède lui-même un prototype – linterpréteur interroge la chaîne des prototypes jusquà ce quil trouve la propriété ou que le chaînage des prototypes soit finiantislashn.org JQuery 27 / 128
  • 28. POO et JavaScript prototype.html function Toto(val){ this.valeur = val; } function Titi(message){ this.message = message; } Titi.prototype = new Toto(15); var o = new Titi("Hello"); console.log(o.valeur); console.log(o.message);antislashn.org JQuery 28 / 128
  • 29. POO et JavaScript● Il est courant dutiliser un objet littéral pour créer un espace de nommage ● évite les collisions de nommage ● nest pas une spécification ● nest pas un package namespace.html var antislashn = {}; antislashn.Personne = function(n){ var nom = n; this.getNom = function(){return nom}; } var p1 = new antislashn.Personne("Titi"); var p2 = new antislashn.Personne("Toto"); console.log(p1.getNom()); console.log(p2.getNom());antislashn.org JQuery 29 / 128
  • 30. POO et JavaScript● Une closure (fermeture) est formée par le retour dun objet de type function ● cet objet ayant été créé dans le contexte dexécution lors de lappel de la fonction externe – on peut donc le voir comme une fonction interne à une fonction function foo(nb){ function add(val){ return nb+val; } return add; } var f = foo(10); console.log(f(5));antislashn.org JQuery 30 / 128
  • 31. DOM● Document Object Model ● représentation objet sous forme darbre● Recommandation du W3C ● décrit une interface (API) indépendante de tout langage permettant de parcourir et mettre à jour la structure du document● DOM navigateur ● historiquement permet de manipuler les éléments "importants" dune page HTML – formulaires, images, etc – mais pas les div, h, ...antislashn.org JQuery 31 / 128
  • 32. DOM● Le DOM de niveau 2 permet de parcourir tout les éléments du document HTML ● entre autre par getElementById sur lobjet document ● lobjet document possède aussi – createElement, createTextNode, createAttribute, … ● méthodes pour manipuler un nœud – appendChild, insertBefore, replaceChild, cloneNode, … ● méthodes pour naviguer dans le DOM – parentNode, childNodes, firstChild, lastChild, ...antislashn.org JQuery 32 / 128
  • 33. DOM● Attention au différences entre navigateurs ● certains navigateurs ajoutent des nœuds de type texte● Un nœud est de type Element, et possède les propriétés – nodeType : type de nœud (entier) – nodeName : nom du nœud – nodeValue : valeur du nœud (ou null) – attributes : tableau des attributs (ou null)● JQuery facilitera le recherche dans le DOMantislashn.org JQuery 33 / 128
  • 34. Gestion des événements● Un événement est un changement détat de lenvironnement qui peut-être intercepté par JavaScript ● clic sur un élément, clavier, souris, survol, …● Un objet Event est créé par le navigateur ● objet global sous IE, ou passé à la fonction de gestion de lévénement dans les autres navigateur ● les propriétés de lobjet Event décrivent lévénement – source, cible, etc,antislashn.org JQuery 34 / 128
  • 35. Gestion des événements● Principales propriétés de lobjet Event ● target : cible de lévénement – srcElement sous IE ● type : type dévénement – focus, load, click, … ● stopPropagation : stoppe la remontée de lévénement – cancelBubble sous IE ● preventDefault : annule les actions implicites sur les événements – submit par exemple ● currentTarget : nœud sur lequel se trouve lévénement lors de sa captureantislashn.org JQuery 35 / 128
  • 36. Gestion des événements● La gestion des événements est différente selon les navigateurs● Un bonne pratique est de mettre la gestion des événements hors du code HTML ● ne pas employer lattribut onClick par exemple ● le code est alors très différents entre IE et Mozilla● JQuery permet de standardiser le code de gestion des événementsantislashn.org JQuery 36 / 128
  • 37. XMLHttpRequest● Permet denvoyer une requête HTTP vers le serveur et den contrôler la réception ● la récupération dune instance de XHR diffère selon les navigateurs – avec IE 6 et moins : var xhr = new ActiveXObject("Microsoft.XMLHTTP"); – avec IE 7 + et les autres navigateurs var xhr = new XMLHttpRequest(); ● lutilisation de lobjet est ensuite homogèneantislashn.org JQuery 37 / 128
  • 38. XMLHttpRequest● Les étapes dutilisation de XHR ● récupérer une instance de XMLHttpRequest ● brancher une fonction de surveillance de la réponse sur lévénement onreadystatechange ● ouvrir la connexion vers la ressource – méthode open(...) ● envoyer la requête – méthode send(...) ● surveiller létat de la réponse dans la fonction callback ● traiter la réponse lorsque celle-ci est valide – propriété responseText ou responseXMLantislashn.org JQuery 38 / 128
  • 39. XMLHttpRequest● Exemple de code (extrait) Complétion/index.jsp function recupererXMLHttpRequest() { Fonction retournant un objet if (window.XMLHttpRequest) { XHR, ou null sil nexiste pas return new XMLHttpRequest(); } else if (window.ActiveXObject) { return new ActiveXObject("Microsoft.XMLHTTP"); } return null; } variable définie pour la page, contenant une instance XHR function executeRequete(url,fonction) { if (xhr) { fonction callback xhr.onreadystatechange = fonction; xhr.open("GET", url, true); xhr.send(null); } ouverture de la ressource en mode asynchrone }antislashn.org JQuery 39 / 128
  • 40. XMLHttpRequest● Exemple de code (extrait) ● fonction callback Complétion/index,jsp function majListeVille() vaut 4 { var rep = ""; on vérifie la validité de la if (xhr.readyState==READY_STATE_COMPLETE réponse && xhr.status == 200){ réponse du serveur rep = xhr.responseText; document.getElementById(liste_villes).innerHTML = "<select onclick=majChamps(this)>"+rep+"</select>"; } }antislashn.org JQuery 40 / 128
  • 41. CSS – modèle en boite● Chaque élément HTML est représenté par une boite ● les valeurs de hauteur (height) et largeur (width) sont celles du contenu (content)antislashn.org JQuery 41 / 128
  • 42. jQuery – introduction● JQuery est un framework open source ● écrit en JavaScript ● utilisé côté client● Développé à lorigine par John RESIG ● première version en 2006● Projet soutenu par une communauté nombreuse● Utilisé par de nombreux grands groupes ● IBM, Google,antislashn.org JQuery 42 / 128
  • 43. jQuery - introduction● jQuery est un ensemble de fonctionnalités JavaScript permettant de manipuler le DOM dune page HTML ● site de référence : jquery.com ● la bibliothèque est disponible sous la forme dun simple fichier .js – compressé ou non – peut aussi être remplacée par un lien vers Google <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"> </script>antislashn.org JQuery 43 / 128
  • 44. jQuery - introduction● Principales fonctionnalités ● parcours et modification du DOM ● gestion des événements ● effets et animations ● manipulation de CSS ● usage facilité dAJAX ● ajout de fonctionnalités par plugins ● divers utilitairesantislashn.org JQuery 44 / 128
  • 45. jQuery - introduction● La documentation jQuery est très explicite, avec de nombreux exemples ● http://jquery.com/ ● quelques exemples de base sont disponibles à ladresse http://docs.jquery.com/Tutorials:Live_Examples_of_jQueryantislashn.org JQuery 45 / 128
  • 46. jQuery – the big pictureantislashn.org JQuery 46 / 128
  • 47. jQuery - bases● jQuery repose sur une seule fonction ● jQuery() ou plus simplement $() – admet des paramètres qui peuvent être ● une fonction qui sera exécutée lorsque le DOM sera chargé ● une chaîne de caractères appelée "query" qui permettra de sélectionner des nœuds du DOM – retourne un résultat : objet jQuery ● ce qui permet de chaîner les appels de méthode● Un query peut correspondre à ● un sélecteur CSS ● un sélecteur XPath ● un sélecteur jQueryantislashn.org JQuery 47 / 128
  • 48. jQuery - bases● Classiquement les développement JavaScript font appels à window.onload = function(){...} ; ● lévénement sera déclenché lorsque toute la page aura été chargée – html, images, css, …● Lutilisation de jQuery permet de lancer la fonction dès que le DOM est prêt $(document).ready(function(){ console.log("boujour document"); });antislashn.org JQuery 48 / 128
  • 49. jQuery – les bases● Le sélecteur $(this) correspond à lobjet en cours de manipulation● Un grand nombre de méthodes de jQuery accepte une fonction comme paramètre ● souvent ces fonctions reçoivent des paramètres positionnés par jQuery – comme each() ou addClass() ● il est possible dutiliser $(this) dans ces fonctions pour travailler sur lélément courantantislashn.org JQuery 49 / 128
  • 50. jQuery - bases● Une bonne pratique de codage JavaScript se doit de séparer la partie HTML de la partie JavaScript ● par de JavaScript dans les balises au niveau des attributs dévénements● Utiliser jQuery avec $(document).ready() permet de simplifier le suivi de cette bonne pratique ● peut être simplifié en $(function(){ console.log("bonjour jQuery"); }); – mais moins parlantantislashn.org JQuery 50 / 128
  • 51. jQuery - bases● Exemple de base jQuery 01 – Base/exemple_01.html <html> <head> <title>Formation jQuery</title> <style type="text/css"> #box{ color: red; font-size: xx-large; } </style> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> exécuté lorsque le DOM sera $(document).ready(function(){ chargé $("#box").click(function(){ console.log($("#box").text()); }); défini la fonction qui sera invoquée }); lorsque lutilisateur cliquera sur </script> lélément </head> <body> sélectionne lélément dont <div id="box">Bonjour</div> lid est box (sélection CSS) </body> </html>antislashn.org JQuery 51 / 128
  • 52. jQuery – les sélecteurs de base● Fonctionnalité la plus importante de jQuery● Notation très concise ● cf. http://www.codylindley.com/jqueryselectors/● Les sélecteurs de base correspondent aux fonctions getElementById et getElementsByTagName ● $("#box") sélectionne lélément selon sont id ● $("div") sélectionne tous les éléments de type <div>antislashn.org JQuery 52 / 128
  • 53. jQuery – les sélecteurs de base● Sélection par la classe $(".menu") ● sélectionne tous les éléments de classe CSS menu● Les sélections peuvent être cumulées au sein dun même appel à la fonction jQuery $("box, div, .menu") ● sélectionnera – lélément identifié par box – toutes les balises <div> – tous les éléments de classe CSS menuantislashn.org JQuery 53 / 128
  • 54. jQuery – les sélecteurs de base● Sélection hiérarchique ● comme avec CSS (http://reference.sitepoint.com/css/generalsiblingselector) ● $("#box p")sélectionne tous les descendants <p> de lélément identifié par box ● sélectionne tous les <p> immédiats $("#box > p") contenus dans lélément identifié par box ● $("#box ~ p") sélectionne tous les <p> frères de lélément identifié par box ● $("#box ~ p")sélectionne le <p> frère immédiat de lélément identifié par boxantislashn.org JQuery 54 / 128
  • 55. jQuery – sélection par filtres● $("li:first") sélectionne le premier élément de la liste <li>● $("li:last") sélectionne le dernier élément de la liste <li>● $("li:even") sélectionne les éléments pairs de la liste <li> - index commence à 0● $("li:odd") sélectionne les éléments impairs de la liste <li> - index commence à 0● $("li:eq(3)")sélectionne le troisième élément de la liste <li> - index commence à 0antislashn.org JQuery 55 / 128
  • 56. jQuery – sélection par filtres● $("li:gt(2)")sélectionne les éléments suivant lindex 2 de la liste <li> - donc à partir du 4ème éléments● $("li:lt(2)")sélectionne éléments dont lindice est inférieur à 2 de la liste <li> - donc les 2er éléments● $(":header") sélectionne toutes les balises <h>● sélectionne tous les éléments de $("li:not(li:eq(1))") la liste <li>, sauf celui dindice 1 ● on peut cumuler les exclusions $("li:not(:first,:last)")antislashn.org JQuery 56 / 128
  • 57. jQuery – sélection par filtres enfants● sélectionne les premiers éléments $("ul:first-child") fils <li> de tous les <ul>● sélectionne les derniers éléments $("ul:last-child") fils <li> des <ul>● sélectionne tous les 2ème éléments $("li:nth-child(2)") fils – ne commence pas à 0 ● la valeur peut être remplacée par odd ou even● sélectionne tous les éléments qui $("p:only-child") sont enfants uniques de leur parent <p>antislashn.org JQuery 57 / 128
  • 58. jQuery – sélection par filtre de contenu● sélectionne les <div> qui $("div:contains(toto)") contiennent le texte toto● $("div:empty") sélectionne les <div> qui nont pas de de contenu (pas denfants ni de texte)● $("div:parent") sélectionne les <div> qui sont parents (qui ont des enfants et/ou du texte) $("div:has(p)")● sélectionne les <div> qui possèdent au moins un enfant <p>antislashn.org JQuery 58 / 128
  • 59. jQuery – sélection par filtre de visibilité● $("div:visible") sélectionne les <div> qui sont visibles● $("div:hidden") sélectionne les <div> qui sont cachésantislashn.org JQuery 59 / 128
  • 60. jQuery – sélection par filtre dattribut● Lattribut est manipulé par [attr] ● jusquà la version 1.3, il létait par [@attr]● $("div[id]") sélectionne les <div> possédant un id● Il est possible de sélectionner les attributs ayant (ou non) une certaine valeur ● $("div[name=adresse]") sélectionne les <div> dont lattribut name vaut adresse ● de manière générale la forme est [attr OP valeur] – les opérateurs OP sont détaillées page suivanteantislashn.org JQuery 60 / 128
  • 61. jQuery – sélection par filtre dattribut● Opérateurs ● = : égalité ● != : différent ● ^= : commence par ● $= : finit par ● *= : contient● On peut filtrer sur plusieurs attributs ● retrouve les <input> ayant $("input[id][name=adresse]") un id et dont le name vaut adresseantislashn.org JQuery 61 / 128
  • 62. jQuery – méthodes utilitaires● $.each(collection,callback(index,value)) : applique une fonction sur chaque élément de la sélection● data(key,value) : associe une paire clé/valeur à un élément sélectionné● data(key) : lit une valeur par sa clé sur lélément sélectionné● cf. http://api.jquery.com/category/utilities/antislashn.org JQuery 62 / 128
  • 63. jQuery – gestion des attributs● attr() possède plusieurs signatures permettant ● de connaître la valeur dun attribut $(this).attr(name) ● de changer la valeur dun attribut $(this).attr(name,toto) ● de changer la valeur de plusieurs attributs – la collection est alors passée sous la forme dun objet JSon ● de changer lattribut à laide dune fonction – les paramètres reçus sont lindice de lélément et la valeur de lattributantislashn.org JQuery 63 / 128
  • 64. jQuery – gestion des attributs● Exemple dutilisation de attr() jQuery 02 – CSS/attr.html function attrLecture(){ alert($("#b1").attr(type)); } function attrEcriture(){ $("li:first").attr(value,premier); } function attrMap(){ $("li:eq(1)").attr({value:deuxième,id:li2}); } function attrFonction(){ $("li").attr(value,function(index, value){ if(index>1) return "item "+index; }); }antislashn.org JQuery 64 / 128
  • 65. jQuery – gestion des attributs ● removeAttr() supprime un attribut ● val() retourne la valeur (attribut value) dun élément – permet aussi de changer la valeur, deux signatures ● paramètre correspondant à la nouvelle valeur ● fonction retournant une valeur et prenant en paramètre lindice de lélément dans une collection et sa valeur● Les attributs de classe CSS seront vus plus loins● Attention : jQuery évolue, en fonction des versions, attr() peut renvoyer une String ou un Boolean ● sur une propriété checked dun checkbox par exemple – cf. http://api.jquery.com/prop/antislashn.org JQuery 65 / 128
  • 66. jQuery – contenu dun élément● La méthode text() permet de lire et modifier le contenu dun élément sous forme textuelle ● text() : lit le contenu texte dun élément et de ces descendants ● text(textString) : met à jour le contenu dun élément ● text(function(index,text)) : met à jour le contenu dun élément par une fonction recevant lindice de lélément dans la collection et sa valeur actuelle ● si des balises sont incluses dans les mises à jour, les marques de balisage < et > seront transformés en entité &lt; et &gt;antislashn.org JQuery 66 / 128
  • 67. jQuery – contenu dun élément● La méthode html() permet de lire et modifier le contenu HTML dun élément ● html() : lit le contenu texte dun élément et de ces descendants ● html(htmlString) : met à jour le contenu dun élément ● html(function(index,html)) : met à jour le contenu dun élément par une fonction recevant lindice de lélément dans la collection et sa valeur actuelle ● cette méthode utilise la propriété innerHTML des navigateursantislashn.org JQuery 67 / 128
  • 68. JQuery – gestion des CSS● Différentes méthodes permettent de gérer les feuilles de style ● addClass : ajout dune ou plusieurs classes – si plusieurs classes sont ajoutée, elles sont séparées par un espace – une fonction peut être utilisée pour retourner une ou plusieurs classes, cette fonction reçoit lindice de lélément et le nom des classes de cet élément ● removeClass : suppression dune ou plusieurs classes – mêmes paramètres possibles que addClassantislashn.org JQuery 68 / 128
  • 69. jQuery – gestion des CSS● Exemple addClass et removeClass jQuery 02 – CSS/addRemoveClass.html $(document).ready(function(){ $("li").mouseover(function(){ $(this).addClass("surligne"); }); $("li").mouseout(function(){ $(this).removeClass("surligne"); }); });antislashn.org JQuery 69 / 128
  • 70. jQuery – gestion des CSS ● hasClass : vérifie la présence dune classe CSS – renvoie true ou false ● toggleClass : ajoute ou supprime une classe – ajoute la classe si elle nest pas présente – supprime la classe si elle est présent – si plusieurs classes sont spécifiées, elles sont séparées par des virgules ● plusieurs signatures existentantislashn.org JQuery 70 / 128
  • 71. jQuery – gestion des CSS● Un grand nombre de méthodes permettent de retrouver (et changer) les positions et dimensions dun élément ● la signature sans paramètre retourne un nombre sous forme de String ● la signature avec paramètre change la valeur● la méthode css() permet de retrouver la valeur dun attribut de style en gardant lindication dunité ● $(this).css(width) pourrait renvoyer 100px ● $(this).width() pourrait renvoyer 100antislashn.org JQuery 71 / 128
  • 72. jQuery – gestion des CSS● La méthode css() ● $(this).css(color) permet de récupérer la valeur dune propriété de style ● permet de mettre à jour les styles au moyen dun paramètre JSon $(this).css({color :red, border:solid 1px}) – ou une seule propriété $(this).css(color,blue)  ● permet au aussi de mettre à jour les styles au moyen dune fonction qui reçoit en paramètre lindice de lélément dans la collection et la valeur du style – css(propertyName,function(index,value))antislashn.org JQuery 72 / 128
  • 73. jQuery – gestion des CSS● Dimensionnement avec jQuery ● height(), width() : hauteur et largeur – interrogation ou mise à jour – signature avec fonction de calcul recevant lindice dans la sélection et la valeur actuelle ● innerHeight(), innerWidth() : dimension interne – padding inclus et bordure exclue ● outerHeight(), outerWidt() : dimension externe – un booléen est passé à la méthode pour préciser sil faut inclure le margin ou non ● false (margin non inclus) par défautantislashn.org JQuery 73 / 128
  • 74. jQuery – gestion des CSS● Positionnement avec jQuery ● position() : retourne sous forme dobjet {top,left} la position par rapport à lélément parent ● offset() : retourne sous forme dobjet {top,left} la position relative au document ● scrollTop(), scrollLeft() : modifie le décalage entre un bord du document et lélément sélectionnéantislashn.org JQuery 74 / 128
  • 75. jQuery – les événements● Les gestionnaires dévénements de jQuery sont similaires aux événements DHTML ● syntaxe simplifiée – onclick devient click, onmouseover devient mouseover, ... ● par les sélecteurs il est aisé de mettre le même gestionnaire dévénement sur tout un ensemble déléments ● facilité de mettre en place du code non intrusif – les différences entre navigateurs sont gommées ● possibilité de passer des données aux événements – format JSonantislashn.org JQuery 75 / 128
  • 76. jQuery – les événements● Les événements possèdent deux signatures ● eventName(handler(eventObject)) ● eventName([eventData],handler(eventObject)) – eventName : nom de lévénement ● click, submit, … – handler : fonction qui sera invoquée lors du déclenchement de lévénement ● doit renvoyer false pour arrêter la remontée de lévénement – eventObject : objet de type jQuery.Event qui est automatiquement passé au gestionnaire dévénement ● eventData : données sous forme JSon qui peut être passé au gestionnaire dévénementsantislashn.org JQuery 76 / 128
  • 77. jQuery – les événements● Lobjet jQuery Event ● normalise les différentes implémentation des objets événement des navigateurs ● propriétés normalisée – target, relatedTarget, pageX, pageY, wich, metaKey ● dautres propriétés sont copiées, qui peuvent être undefined selon lévénement – altKey, bubbles, button, cancelable, charCode, clientX, clientY, screenX, … ● documentation : http://api.jquery.com/category/events/event-object/antislashn.org JQuery 77 / 128
  • 78. jQuery – les événements● Événements du navigateur ● error() : événement invoqué en cas derreur JavaScript ● resize() : événement invoqué lors du redimensionnement de la fenêtre du navigateur ● scroll() : événement invoqué lors de lutilisation des barres de scollingantislashn.org JQuery 78 / 128
  • 79. jQuery – les événements● Chargement du document ● load() : invoqué lorsquun élément et ses fils ont été complètements chargés – concerne les éléments associés à une URL : image, script, frame, iframe, window ● ready() : invoqué lorsque le DOM est construit – incompatible avec <body onload="..."> – syntaxes équivalentes : ● $(document).ready(handler) ● $().ready(handler) ● $(handler) ● unload() : invoqué lorsque lutilisateur quitte la pageantislashn.org JQuery 79 / 128
  • 80. jQuery – les événements● Les événements du formulaire ● blur() : invoqué lors de la perte de focus ● change() : invoqué lors du changement dun élément de formulaire – changement entre la prise et perte de focus ● focus() : invoqué lors de la prise de focus ● select() : invoqué lors de la sélection dun texte dans un <input type=text> ou un <textarea> ● submit() : invoqué lors de la soumission dun formulaireantislashn.org JQuery 80 / 128
  • 81. jQuery – les événements● Les événements clavier ● focusin() : invoqué si un élément ou un de ses fils gagne le focus ● focusout() : invoqué si un élément ou un de ses fils pert le focus ● keydown() : invoqué lors de lappui dune touche du clavier ● keypressed() : invoqué lors de lappui dune touche du clavier, avec gestion de la répétition ● keyup() : invoqué lors du relâchement dune touche du clavierantislashn.org JQuery 81 / 128
  • 82. jQuery – les événements● Les événements souris ● clic de souris : click(), dblclick() – ces deux événements ne doivent pas être utilisés ensemble sur le même élément ● mouvements de la souris : mousedown(), mouseup(), mousemove(), mouseover() – certains événement IE sont émulés : mouseenter(), mouseleave() ● hover() permet de positionner un handler pour lentrée et la sortie dun élément ● toggle() gère les cycles de sélection et dé-selection dun élément par le clic sourisantislashn.org JQuery 82 / 128
  • 83. jQuery – les événements● bind() permet de lier un (ou plusieurs) événement, des données et un gestionnaire dévénement à une sélection délément ● les éléments du DOM doivent exister lors de la liaison – voir delegate(), ou live() pour attacher des pour des éléments qui ne sont pas encore créer – cf. on() depuis la version 1.7● dautres méthodes jQuery existe pour lier des événements, ou supprimer des événements ● faire attention aux versions de jQuery ● http://api.jquery.com/category/events/event-handler-attachment/ –antislashn.org JQuery 83 / 128
  • 84. jQuery – les formulaires● jQuery najoute rien de nouveau dans la gestion des formulaires● Un ensemble de sélecteurs de formulaire permet de sélectionner rapidement un ensemble déléments dun formulaire ● :input, :text, :password, :radio, ...● Filtres de sélection ● :checked, :selectedantislashn.org JQuery 84 / 128
  • 85. jQuery – les effets ● jQuery offre la possibilité dautomatiser certains effets et animations ● à utiliser à bon escient et avec modération ● La plupart des fonctions sur les effets utilise des paramètres optionnels ● speed: slow, normal ou fast – ou un nombre en millisecondes ● easing : effet prédéfini personnalisé par plugin ● function : une fonction callback qui sera invoquée à la fin de leffet ● Lensemble des effets peut être désactivé par linstruction jQuery.fx.off = trueantislashn.org JQuery 85 / 128
  • 86. jQuery – les effets● Effets de base ● hide() : cache la sélection ● show() : affiche la sélection● Glissements ● slideDown() : fait apparaître, par glissement vers le bas, un élément ● slideUp() : fait disparaître, par glissement vers le haut, un élémentantislashn.org JQuery 86 / 128
  • 87. jQuery – les effets● Effets de fondu ● fadeIn() : fait apparaître un élément avec effet de fondu ● fadeOut() : fait disparaitre un élément avec effet de fondu ● fadeTo() : modifie lopacité de lélément sélectionné● Différer un effet ● la méthode delay() permet de différer un effet $("div.effet").slideUp(300).delay(2000).fadeIn(600);antislashn.org JQuery 87 / 128
  • 88. jQuery – les effets● Passer dun effet à lautre ● toggle() : bascule un élément dinvisible à visible, et inversement ● toggle(function1,fucntion2) : bascule dune fonction à lautre à chaque clic sur lélément ● slideToggle() : bascule de slideUp vers slideDown et inversement ● fadeToggle() : bascule de visible à invisible par effet de fondu, et inversementantislashn.org JQuery 88 / 128
  • 89. jQuery – les effets● animate() permet de créer une animation ● un paramètre obligatoire sous forme dobjet JSon fournit les styles à animer ● en plus des paramètres optionnels de vitesse, easing et fonction callback animate({fontSize:"24px", left:300, width: "200px", opacity: 0.5},1000 )antislashn.org JQuery 89 / 128
  • 90. jQuery – parcourir le DOM● Le parcours du DOM est conforme à ce qui est habituellement utilisée avec lAPI DOM 3 ● traversée en Java, JavaScript ou XPath● On retrouve donc lensemble des fonctionnalités usuelles ● retrouver les enfants, parents, … ● mais avec un vocabulaire qui nest pas le même que lAPI du W3Cantislashn.org JQuery 90 / 128
  • 91. jQuery – parcourir le DOM● Lensemble des méthodes jQuery de parcours du DOM renvoie un objet jQuery, ce qui permet de chaîner les appels● La documentation complète est accessible sur le lien : http://api.jquery.com/category/traversing/tree-traversal/● Les pages suivantes résument les méthodes de parcours du DOMantislashn.org JQuery 91 / 128
  • 92. jQuery – parcourir le DOM● children() : renvoie une collection déléments enfants immédiats de chaque élément sélectionné● parent() : renvoie le parent immédiat de chaque élément sélectionné● parents() : renvoie une collection déléments ancêtres de chaque élément sélectionné● parentUntil() : renvoie une collection déléments ancêtres de chaque élément sélectionné, jusquà un élément (ou sélecteur) passé à la fonction ●antislashn.org JQuery 92 / 128
  • 93. jQuery – parcourir le DOM● siblings() : renvoie les frères de chaque élément de la sélection● prev() : renvoie le frère immédiatement précédent de chaque élément de la sélection● prevAll() : renvoie les frères précédents de chaque élément de la sélection● prevUntil() : renvoie les frères précédents de chaque élément de la sélection, jusquà un élément désigné par le sélecteurantislashn.org JQuery 93 / 128
  • 94. jQuery – parcourir le DOM● next() : renvoie le frère immédiatement suivant de chaque élément de la sélection● nextAll() : renvoie les frères suivants de chaque élément de la sélection● nextUntil() : renvoie les frères suivants de chaque élément de la sélection, jusquà un élément désigné par le sélecteurantislashn.org JQuery 94 / 128
  • 95. jQuery – parcourir le DOM● content() : renvoie tous les nœuds enfants de chaque élément de la sélection● closest(selecteur) : renvoie le parent le plus proche de chaque élément sélectionné répondant au sélecteur● find(selecteur) : renvoie les descendants de chaque élément sélectionné répondant au sélecteur● find(param) : ajoute les éléments fournis en agruments (élément, sélecteur ou HTML)antislashn.org JQuery 95 / 128
  • 96. jQuery – manipuler le DOM● Nous avons déjà vu les méthodes text() et html()● Les pages suivantes présente les méthodes de manipulation du DOM, sans les détailler ● comme habituellement sous jQuery, la plupart des méthodes prennent en paramètre un contenu ou une fonction renvoyant un contenu ● cf. http://api.jquery.com/category/manipulation/antislashn.org JQuery 96 / 128
  • 97. jQuery – manipuler le DOM● text() et html() : modification du contenu● append() : ajout à lintérieur de lélément sélectionné, en mode ajout● after() : ajout après lélément sélectionné● before() : ajout avant lélément sélectionné● wrap() : ajout autour de lélément sélectionné● wrapAll() : ajout autour tous les éléments de la sélection● wrapInner() : ajout autour des enfants de lélément sélectionné● unwrap() : annule laction de wrap()antislashn.org JQuery 97 / 128
  • 98. jQuery – manipuler le DOM● replaceWith() : remplace lélément sélectionné par le contenu spécifié● remove() : supprime du DOM tous les éléments répondant aux critères de sélection● detach() : comme remove(), mais en conservant les données associées● clone() : copie les élémentsantislashn.org JQuery 98 / 128
  • 99. jQuery – filtres sur le DOM● filter(expression) : réduit lensemble des éléments sélectionnés à ceux qui passe le filtre● eq(index) : réduit lensemble des éléments sélectionnés à celui correspond à la position● slice(debut[,fin]) : réduit lensemble des éléments sélectionnés à ceux qui sont entre deux positions● is(expression) : indique si la sélection répond à un critère, renvoie true ou false● first() et last() : réduit lensemble des éléments sélectionnés au premier ou dernier item● has(selecteur) : réduit lensemble des éléments sélectionnés à ceux qui ont un descendant correspondant au sélecteurantislashn.org JQuery 99 / 128
  • 100. jQuery – les caractères spéciaux● jQuery utilise un certain nombre de caractères comme éléments de syntaxe● Si ces caractères sont utilisés dans des expressions littérales, il faut les échapper avec deux caractères backslash - ● Liste des caractères spéciaux ● # ; & , . + * ~  : ! ^ $ [ ] ( ) = > | /antislashn.org JQuery 100 / 128
  • 101. jQuery - AJAX● jQuery facilite lécriture du code AJAX● AJAX nécessite aussi de la programmation côté serveur ● ce qui signifie : – un langage : PHP, ASP, .NET, Java, … – un serveur : Apache, IIS, Tomcat, Jboss, … – une base de données : MySql, Oracle, SQLServer, Derby, …● La programmation côté serveur nest pas abordée ici● Il est intéressant, si ce nest essentiel, de mettre en place des outils de suivi des requêtes AJAX dans le navigateurantislashn.org JQuery 101 / 128
  • 102. jQuery - AJAX● load(url [,datas] [,function]) ● charge une ressource dans la sélection – url : url de la ressource – datas : pairs clé/valeur envoyées au serveur ● si aucune données la méthode GET est utilisée – function : fonction à exécuter en cas de réussite de la requête ●retourne un objet jQuery● loadIfModified(url [,datas] [,function]) ● ne charge la ressource que si celle si est modifiée ● même fonctionnement que load()antislashn.org JQuery 102 / 128
  • 103. jQuery - AJAX● Exemple de code load() ● onglet Network de Chrome jQuery 04 – Ajax/load.html $(document).ready(function(){ $("#conteneur").load("test.html"); }) ressource à charger <div id=conteneur></div>antislashn.org JQuery 103 / 128
  • 104. jQuery - AJAX● $.get(url [,datas] [,function] [,type]) ● effectue une requête AJAX avec une méthode HTTP GET – url : ressource à charger – datas : paires clé/valeur envoyées au serveur – function : fonction à exécuter en cas de réussite de la requête – type : type de la réponse fournie à la fonction callback ● String pouvant être : xml, html, script, json, jsonp, text ● renvoie un objet XMLHttpRequestantislashn.org JQuery 104 / 128
  • 105. jQuery - AJAX● $.post(url [,datas] [,function] [,type]) ● effectue une requête AJAX avec une méthode HTTP POST – url : ressource à charger – datas : paires clé/valeur envoyées au serveur – function : fonction à exécuter en cas de réussite de la requête – type : type de la réponse fournie à la fonction callback ● String pouvant être : xml, html, script, json, jsonp, text ● renvoie un objet XMLHttpRequestantislashn.org JQuery 105 / 128
  • 106. jQuery - AJAX● $.getSrcipt(url[,function]) ● charge une script via la méthode HTTP GET et lexécute – url : script à charger – function : fonction à exécuter en cas de réussite de la requête ● renvoie un objet XMLHttpRequest $(document).ready(function(){ $.getScript("hello.js"); });antislashn.org JQuery 106 / 128
  • 107. jQuery - AJAX● Les méthodes précédentes sont des raccourcis de lutilisation de la méthode $.ajax()● La méthode ajax() permet de maîtriser complètement le fonctionnement de lobjet XMLHttpRequest● Les paramètres de la fonction sont fournis sous la forme dun objet JSon● cf. http://api.jquery.com/jQuery.ajax/antislashn.org JQuery 107 / 128
  • 108. jQuery - AJAX● La méthode ajax() permet de sadapter à tous les cas de figure ● authentification, cross domaine, ajout dans le header de la requête, … ● bien étudier la documentation $(document).ready(function(){ $.ajax({ url: teste.html, success: function(data){ $(#conteneur).html(data); }, error: function(xhr,status,error){ console.log(status); console.log(error); }, }); });antislashn.org JQuery 108 / 128
  • 109. jQuery - AJAX● Événements associés à la requête AJAX ● ajaxSend(function) : assigne une fonction callback qui sera exécutée avant lenvoi de la requête ● ajaxStart(function) : assigne une fonction callback qui sera exécutée lors du début de la requête ● ajaxStop(function) : assigne une fonction callback qui sera exécutée à la fin de toutes les requêtes ● ajaxSuccess(function) : assigne une fonction callback qui sera exécutée en cas de succès de la requête ● ajaxComplete(function) : assigne une fonction callback qui sera exécutée à la fin complète de la requête ● ajaxError(function) : assigne une fonction callback qui sera exécutée en cas de derreur sur la requêteantislashn.org JQuery 109 / 128
  • 110. jQuery - AJAX● Fonctions utilitaires (helpers) ● serialize() : encode un formulaire en String pouvant être soumis au serveur ● serializeArray() : encode un formulaire en un tableau JSon de clé/valeursantislashn.org JQuery 110 / 128
  • 111. jQuery – construction dune popup● Pour illustrer la prise en main de jQuery, nous allons créer une popup didentification ● deux champs de saisie : user et password● Pour valider la saisie un script vallidation.js vérifie si le champ est remplit ou non ● ce script créé un événement personnalisé qui sera appelé ensuite sur des événement du DOMantislashn.org JQuery 111 / 128
  • 112. jQuery – construction dune popup● script de validation ● le fichier validation.js doit être ajouter avant le script AuthPopup.js $(":text,:password").live(validation,function(){ var val = $.trim($(this).val()); var errorMessage=[]; if($(this).hasClass(required) && val=="") errorMessage.push("Champ obligatoire"); var isOk = errorMessage.length==0; var msg; if(!isOk) msg = "<div class=error>"+errorMessage.join(<br/>)+"</div>"; if($(this).next().is("div.error")) $(this).next().remove(); $(this).after(msg); $(this).data("isValid",isOk); });antislashn.org JQuery 112 / 128
  • 113. jQuery – construction dune popup● Création dun objet JavaScript AuthPopup qui permettra ● de créer le code HTML ● dajouter des événements – pour la validation du formulaire ● dafficher le formulaire ● denvoyer les informations au serveur ● de cacher le formulaireantislashn.org JQuery 113 / 128
  • 114. jQuery – construction dune popup● Structure de base JavaScript var AuthPopup = { create: function(){}, addEvents: function(){}, show: function(){}, sendToServer: function(){}, hide: function(){} };antislashn.org JQuery 114 / 128
  • 115. jQuery – construction dune popup● La mise en place du HTML est confiée à la fonction create() create: function(){ var html=[]; var i=0; html[i++] = "<div id=authPopup>"; html[i++] = "<form>"; html[i++] = "<div id=header>Identifiez-vous<div id=cmdCancel>x</div></div>"; html[i++] = "<div id=body>"; html[i++] = "<div><label for=user>User </label>"; html[i++] = "<input type=text id=user class=required/></div>"; html[i++] = "<div><label for=pswd>Password </label>"; html[i++] = "<input type=password id=pswd class=required/></div>"; html[i++] = "<div><input type=submit id=cmdSend value=OK/></div>" html[i++] = "</form>"; html[i++] = "</div>"; $(body).append(html.join("")); $(body).append("<div id=overlay></div>"); },antislashn.org JQuery 115 / 128
  • 116. jQuery – construction dune popup● Laffichage de la popup est confiée à la méthode show()show: function(){ if($("#authPopup").size() == 0){ this.create(); this.addEvents(); } var top = $(window).scrollTop()+($(window).height() - $(#authPopup).height())/2; var left = $(window).scrollLeft()+($(window).height() - $(#authPopup).height())/2; $("#authPopup") .css(top,Math.max(0,top)) .css(left,Math.max(0,left)) .slideDown(slow) .find(:text,textarea).first().focus(); $("#overlay").fadeIn();},antislashn.org JQuery 116 / 128
  • 117. jQuery – construction dune popup● La fermeture de la popup est gérée par la méthode hide() hide: function(){ $("#authPopup").slideUp(slow,function(){ $("#overlay").fadeOut(); }); }antislashn.org JQuery 117 / 128
  • 118. jQuery – construction dune popup● Les événements sont ajoutés par la méthode addEvents() ● la méthode de validation est liée à lévénement du DOM par la méthode trigger() ● la croix doit fermer la popup – le proxy est utilisé pour garder de la popup lors de lappel de hide() ● lappui sur la touche OK doit soumettre le formulaireantislashn.org JQuery 118 / 128
  • 119. jQuery – construction dune popup● Code de la fonction addEvents() addEvents: function(){ $(":text, :password").live("blur",function(){ $(this).trigger("validation"); }); $("#cmdCancel").click($.proxy(this.hide,AuthPopup)); $("#authPopup").children("form").submit( {"popup":this}, function(event){ if($(#user).val()=="" || $(#pswd).val()==""){ alert("Formulaire incomplet"); } else{ event.data.popup.sendToServer(); event.data.popup.hide(); } return false; }); },antislashn.org JQuery 119 / 128
  • 120. jQuery – construction dune popup● Code de la méthode addEvents() ● Enregistrement de lévénement click – une première approche aurait pu donner ceci : $("#cmdCancel").click(this.hide); ● ● mais dans le contexte de lappel de lévénement this est le bouton submit !!! – jQuery fournit $.proxy() qui permet de définir le contexte dexécution dune fonction $("#cmdCancel").click($.proxy(this.hide,AuthPopup)); ● ● lors de lappel de $.proxy() this fait référence à AuthPopup – le 2nd paramètre est le contexte dans lequel doit être appelée la méthode, AuthPopup qui est lobjet aurait pu être remplacé par thisantislashn.org JQuery 120 / 128
  • 121. jQuery – construction dune popup● Code de la méthode addEvents() ● soumission du formulaire (extraits de code) $("#authPopup").children("form").submit({"popup":this},function(event)... – – un objet est passé à submit(), cet objet référencie dans la propriété popup lobjet AuthPopup – cet objet est lié à lobjet event qui sera passé à la fonction callback – il devient alors dappeler les méthode de lobjet AuthPopup avec le bon contexte event.data.popup.sendToServer(); event.data.popup.hide(); ● la méthode addEvent() retourne false pour stopper la soumissionantislashn.org JQuery 121 / 128
  • 122. jQuery – construction dune popup● Lenvoi des données au serveur est confiée à la méthode sendToServer() sendToServer: function(){ $.ajax({ url:authentification, type:POST, context:this, data:{ user:$("#user").val(), pswd:$("#pswd").val() }, success:function(){ console.log("envoi réussi"); } }); },antislashn.org JQuery 122 / 128
  • 123. jQuery – construction dune popup● Pour linstant aucune feuille de style na été définie ● Notre popup ressemble à cela ● la feuille de style AuthPopup.js permet dobtenirantislashn.org JQuery 123 / 128
  • 124. jQuery – les plugins● jQuery peut être étendu à laide de plugin ● le développement des plugins nentre pas dans cette présentation ● largement documenté sur le web● jQuery possède une large gamme de plugins● Tous les plugins se basent sur jQuery, il faut donc inclure la bibliothèque jQuery, et les bibliothèques des plugins● Deux plugins sont maintenus par le projet jQuery ● jQuery UI et jQuery mobileantislashn.org JQuery 124 / 128
  • 125. UI● Permet dajouter au projet des effets visuels, des widgets ● onglets, calendriers, boites de dialogue, barre de progression, …● Le téléchargement des bibliothèques peut être personnalisé ● cf. http://jqueryui.com/download – les composants peuvent êtes ajoutés un par unantislashn.org JQuery 125 / 128
  • 126. UI● Les widgets sont contrôlés par : ● le fichier JavaScript ● le fichier des CSS ● un répertoire des images● Il faut donc ajouter à la page ● adapter les chemins et noms de fichier si nécessaire <link type="text/css" href="css/smoothness/jquery-ui-1.8.18.custom.css" rel="Stylesheet" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery-ui.js"></script>antislashn.org JQuery 126 / 128
  • 127. Bibliographie● AJAX – Le guide complet ● auteurs : Bruno CATTEAU et Nicolas FAUGOUT ● éditeur : Micro Application● JQuery – Découverte du framework JavaScript ● auteur : Luc VAN LANCKER ● éditeur : ENI éditions● JQuery – Le guide complet ● auteurs : Guillaume ALLAIN et Timothy STUBBS ● éditeur : Micro Applicationantislashn.org JQuery 127 / 128
  • 128. Ressources web● Sites officiels ● http://jquery.com/ ● http://www.json.org/ ● http://www.w3.org/ ● http://www.w3schools.com/● Blogs ● http://www.codylindley.com/jqueryselectors/ ● www.mathieurobin.com/category/devweb/javascript/jquery/antislashn.org JQuery 128 / 128