Vous êtes sur la page 1sur 5

FST-MasterPro 2010

JAVA-JEE

JAVA-JEE

JQuery AVRIL 2010 © Enseignant : Riadh Bouhouch

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. Mode d’emploi L’utilisation de jQuery consiste à l’import d’un fichier JavaScript qui contient toutes les fonctions de jQuery et. comme vous le faites pour l'appel d'un fichier JavaScript ordinaire au niveau du <head> <script type="text/javascript" src="jquery. Une fois le fichier téléchargé.FST-MasterPro 2010 JAVA-JEE Définition et fonctionnalités La première version de jQuery date de Janvier 2006. vous pouvez le télécharger ici. de faciliter l'utilisation du JavaScript en simplifiant les fonctions standard. il suffit de lui faire un appel au niveau de vos pages WEB.js"></script>. Voici deux exemples après le click sur chaque bouton le style de la zone change 2 JQuery . Il a pour but : • • de gagner du temps dans le développement. C'est une bibliothèque JavaScript libre qui porte sur : • • • l'interaction entre JavaScript (comprenant AJAX) et HTML. pour ce faire. Quelques exemples utilisant jQuery 1. la création des animations. la gestion des événements. 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.

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

Pour la manipulation de la visibilité il existe plusieurs fonctions. Manipulation de la visibilité des zones Cette manipulation peut nous servir dans la création d’un menu déroulant horizontal comme. Voici un exemple : Nous pouvons remarquer dans cette image qu’il y a 3 menus à gauche. 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. e. cliquant sur l’un de ces liens une zone va paraître.FST-MasterPro 2010 JAVA-JEE 2. 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. JQuery 4 .

$("#dataUserManage"). $("#dataGeoManage"). </td> </tr> <tr> <td class="cadre" colspan="3"> <div style="display:none" id="dataUserManage"> &nbsp.<a href="#" id="userManage">Gestion des utilisateurs</a>&nbsp. }).slideUp("slow"). : JQuery 5 .slideToggle().&nbsp.&nbsp.<a href="#">Modifier les données d'un utilisateur</a><br> &nbsp.&nbsp.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="#">Ajouter un utilisateur</a><br> &nbsp.&nbsp.&nbsp.<a href="#">Supprimer un utilisateur</a> </div> </td> </tr> </table> : JavaScript $("#userManage").click(function () { $("#dataRegManage").&nbsp.slideUp("slow").