Scribd Logo
Importer

Bienvenue sur Scribd !

  • JQuery

    Transféré par

    Walid Jean Claude
    226 vues5 pages

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Formats disponibles

    PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document

    Droits d'auteur :

    Attribution Non-Commercial (BY-NC)
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    226 vues5 pages

    JQuery

    Transféré par

    Walid Jean Claude

    Droits d'auteur :

    Attribution Non-Commercial (BY-NC)
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 5

    FST-MasterPro 2010

    JAVA-JEE

    JAVA-JEE

    JQuery AVRIL 2010 Enseignant : Riadh Bouhouch

    JQuery

    FST-MasterPro 2010

    JAVA-JEE

    Dfinition et fonctionnalits
    La premire version de jQuery date de Janvier 2006. C'est une bibliothque JavaScript libre qui porte sur :

    l'interaction entre JavaScript (comprenant AJAX) et HTML, la cration des animations, la gestion des vnements.

    Il a pour but :

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

    Mode demploi
    Lutilisation de jQuery consiste limport dun fichier JavaScript qui contient toutes les fonctions de jQuery et, pour ce faire, vous pouvez le tlcharger ici. Une fois le fichier tlcharg, 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>, aprs limport de ce dernier vous pouvez utiliser ses fonction ou bien dans la pages web elle-mme 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 dune zone dun lien dun bouton, de tout lments de la page cette fonction nous permet de changer ou dajouter une classe de style la zone ( llment) souhait avec la fonction addClass et removeClass Exemple dutilisation :

    Nous pouvons remarquer sur cette figure que la couleur larrire plan de la zone texte est blanche. Voici deux exemples aprs 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

    FST-MasterPro 2010

    JAVA-JEE

    2. Manipulation de la visibilit des zones Cette manipulation peut nous servir dans la cration dun menu droulant 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 dafficher une zone invisible en donnant leffet dune ouverture droulante, et la fonction slideToggle fait linverse 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 quil y a 3 menus gauche, e, cliquant sur lun de ces liens une zone va paratre.

    JQuery

    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 donnes 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

    Vous aimerez peut-être aussi