Cours langage jQuery, tutoriel & guide de travaux pratiques en pdf.

Utilisation de jQuery

Passons maintenant aux choses sérieuses afin d’obtenir un rendu Web 2.0 (affichage du contenu avec une animation). Bien sûr il existe déjà une multitude de scripts ou de librairies qui font office de gestionnaire d’onglets. Mais il est utile de savoir le développer soi même. Par contre, afin d’ajouter notre petite touche Web 2.0, nous allons utiliser la librairie jQuery.
Tout d’abord, commencer par télécharger la librairie jQuery : Télécharger. jQuery offre beaucoup de fonctions permettant de sélectionner des éléments. Par exemple, si vous désirez sélectionner tous les éléments d’une page qui sont des liens <a> et les faire disparaître, il suffit d’effectuer la fonction suivante :
<script type= »text/javascript » src= »/scripts/jquery-1.2.3.min.js »> <script type= »text/javascript »> // Une fois le chargment de la page terminé … $(document).ready( function() { $(« a »).slideUp(); } ); </script>

Utilisons maintenant cette astuce avec nos onglets

<script type= »text/javascript » src= »/scripts/jquery-1.2.3.min.js »></script> <script type= »text/javascript »> // Une fois le chargment de la page terminé … $(document).ready( function() { // Lorsqu’un lien a.tab est cliqué $(« a.tab »).click( function () { // Mettre tous les onglets non actifs $(« .active »).removeClass(« active »); // Mettre l’onglet cliqué actif $(this).addClass(« active »); // Cacher les boîtes de contenu $(« .content »).slideUp(); // Pour afficher la boîte de contenu associé, nous // avons modifié le titre du lien par le nom de // l’identifiant de la boite de contenu var contenu_aff = $(this).attr(« title »); $(« # » + contenu_aff).slideDown(); } ); } ); </script>