You are on page 1of 5

FST-MasterPro 2010

JAVA-JEE

JAVA-JEE

JQuery AVRIL 2010 © Enseignant : Riadh Bouhouch

JQuery

1

FST-MasterPro 2010

JAVA-JEE

Définition et fonctionnalités
La première version de jQuery date de Janvier 2006. C'est une bibliothèque JavaScript libre qui porte sur :
• • •

l'interaction entre JavaScript (comprenant AJAX) et HTML, la création des animations, la gestion des événements.

Il a pour but :
• •

de gagner du temps dans le développement, de faciliter l'utilisation du JavaScript en simplifiant les fonctions standard.

Mode d’emploi
L’utilisation de jQuery consiste à l’import d’un fichier JavaScript qui contient toutes les fonctions de jQuery et, pour ce faire, vous pouvez le télécharger ici. Une fois le fichier téléchargé, il suffit de lui faire un appel au niveau de vos pages WEB, comme vous le faites pour l'appel d'un fichier JavaScript ordinaire au niveau du <head> <script type="text/javascript" src="jquery.js"></script>, après l’import de ce dernier vous pouvez utiliser ses fonction ou bien dans la pages web elle-même comme tout code JavaScript ou vous ecrivez votre code dans un fichier JavaScript et vous lui faites appel.

Quelques exemples utilisant jQuery
1. Changement du style d'une zone avec la modification de classe de style

jQuery propose une fonction qui permet changer le style d’une zone d’un lien d’un bouton, … de tout éléments de la page cette fonction nous permet de changer ou d’ajouter une classe de style à la zone (à l’élément) souhaité avec la fonction « addClass » et « removeClass » Exemple d’utilisation :

Nous pouvons remarquer sur cette figure que la couleur l’arrière plan de la zone texte est blanche. Voici deux exemples après le click sur chaque bouton le style de la zone change
2

JQuery

FST-MasterPro 2010

JAVA-JEE

Voici le code qui nous permet de faire cet effet lors du click sur les boutons
CSS : .bgGreen{ background-color:#0F0; } .bgBlue{ background-color:#00F; } HTML : <button id="changeBackGroundBlue">backGroundBlue</button> <button id="changeBackGroundGreen">backGroundGreen</button> <div style="height:30px; width:150px; border:#00F solid;" id="zone2">Zone de texte visible</div> JavaScript : $("#changeBackGroundBlue").click(function () { $("#zone2").addClass("bgBlue"); }); $("#changeBackGroundGreen").click(function () { $("#zone2").removeClass("bgBlue"); $("#zone2").addClass("bgGreen"); });

JQuery

3

FST-MasterPro 2010

JAVA-JEE

2. Manipulation de la visibilité des zones Cette manipulation peut nous servir dans la création d’un menu déroulant horizontal comme. Pour la manipulation de la visibilité il existe plusieurs fonctions, mais nous allons voir que les fonctions « slideUp » et « slideToggle » La fonction « slideUp » permet d’afficher une zone invisible en donnant l’effet d’une ouverture déroulante, et la fonction « slideToggle » fait l’inverse c'est-à-dire que si la zone est ouverte (visible) elle la ferme (elle la rend à son état initial qui est invisible) et vis versa. Voici un exemple :

Nous pouvons remarquer dans cette image qu’il y a 3 menus à gauche, e, cliquant sur l’un de ces liens une zone va paraître.

JQuery

4

FST-MasterPro 2010

JAVA-JEE

Voici un exemple du code qui nous permet de faire cet effet lors du click sur les liens du menu
HTML
<table width="100%" class="dataContent" cellpadding="0" cellspacing="0"> <tr> <td class="bande" colspan="3"> &nbsp;<a href="#" id="userManage">Gestion des utilisateurs</a>&nbsp; </td> </tr> <tr> <td class="cadre" colspan="3"> <div style="display:none" id="dataUserManage"> &nbsp;&nbsp;&nbsp;<a href="#">Ajouter un utilisateur</a><br> &nbsp;&nbsp;&nbsp;<a href="#">Modifier les données d'un utilisateur</a><br> &nbsp;&nbsp;&nbsp;<a href="#">Supprimer un utilisateur</a> </div> </td> </tr> </table>

:

JavaScript
$("#userManage").click(function () { $("#dataRegManage").slideUp("slow"); $("#dataGeoManage").slideUp("slow"); $("#dataUserManage").slideToggle(); });

:

JQuery

5