Bienvenue sur le blog d'un développeur web : Actualités du monde informatique et scientifique, morceaux de programmations et diverses informations intéréssantes.

Premiers pas avec jQuery et sa fonction slideToggle()

Posté par : Neg le : 2008-03-03 17:19:38



Je me lance dans des tests avec la librairie Javascript jQuery. Cette librairie permet de réaliser facilement des effets divers sur vos page web. Après avoir téléchargé la dernière version sur le site officiel, l'intégration dans sa page s'effectue via cette ligne à placée dans le <head> :

<script type="text/javascript" src="jquery-1.2.3.js"> </script>


Ensuite, nous pouvons commencer nos essais. Aujourd'hui (et pour débuter) la fonction que je vais utiliser se nomme "slideToggle()" elle permet de faire disparaître ou apparaître un élément (suivant son état actuel), avec un effet d'enroulement sur lui même. Nous allons l'utiliser comme il suit : (element_a_enrouler).slideToggle(vitesse). La vitesse pouvant prendre les valeur automatiques suivantes "slow", "normal", "fast", ou encore une durée en millisecondes.

Pour notre tentative en cour, nous allons mettre en place sur une page un élément div nommé "#bouge", contenant un lien "Entrer" auquel nous appliquerons la classe "entrer".

Dans le <body> de notre page, nous aurons donc :

<div id="bouge">
Le texte de notre div et le lien
<a href="#" class="entrer">Entrer</a>
</div>


Comment demander a jQuery d'enrouler notre élément div lorsque "entrer" est cliqué ?
En plaçant ce code dans le <head> de la page :

<script type="text/javascript">
$(document).ready(function(){
$(".entrer").click(function(){
$("#bouge").slideToggle("slow");
});
});
</script>


la première ligne "$(document).ready(function(){" signifie que les instruction qui suivent seront lancées lorsque le DOM du document sera chargé.

En dessous nous demandons qu'au clic de notre lien ayant la classe "entrer", notre élément "#bouge" soit enrouler en vitesse "slow".

Seulement en pratique il n'y' a désormais plus rien sur notre page. (bah merde alors !) Nous allons donc agrémenter tout ça, et utiliser la fonction slideToggle() pour enrouler/dérouler des éléments précis de notre page.

Mais d'abord regardons le résultat de la mise en place de notre premier test -qui trouve un minimum d'utilité en cachant les éléments situé en dessous- Sivous osez cliquer, vous découvrirez la réalisation qui nous attend. La démo (Bien sur le résultat est mis en page par css, vous pouvez avoir accès aux sources directement dans la page).

Pour réussir à enrouler/dérouler nos images a volontés, rien de bien plus compliqué. Nous disposons à présent, en plus des éléments précédents, 3 div ".brique" chacun possédant un titre "<h1>" et une image "<img>". Dans chacun de nos titre, se trouve aussi un lien "voir/cacher" possédant la classe "voir" Soit le code suivant a ajouter au corps de la page.

<div class='brique'>
<h1>image 1 <a href="#" class="voir">Voir/Cacher</a></h1>
<img src='mon_image.jpg' alt='texte alternatif' title='titre'>
</div>
<div class='brique'>
. . . . .
. . .fois 3


Nous allons avoir à faire quasiment la même chose que notre précédent travail. Pour ce second cas, ajoutons :

$(".voir").click(function(){
$(this).parent().next("<img>").slideToggle("slow");
});


Soit : Au clic d'un élément possédant la classe "voir", nous récupérons sont élément parent, et nous appliquons le déroulement/enroulement au prochain élément "<img>" trouvé.

Voilà pour aujourd'hui, je découvre avec vous (ou pas), je n'assure pas que ce soit le meilleur code pour effectuer ce travail; mais bon pour l'instant ça va pas bien loin, donc ça devrait aller.

PS : ceci est le centième article du blog !!

lien direct : http://www.chezneg.fr/leblog/chezneg-leblog.php?id_art=102&titre=Premiers-pas-avec-jQuery-et-sa-fonction-slideToggle()
tags : Informatique (68), études (16), compétences (22), internet (34), tutoriel (13), labo (7), jQuery (12),


J'aime, 18 personnes aiment çaCommentaire(s)(11)

1) tyler le : 2009-09-17 15:00:50 www.release911.com

Il me semble qu'il y a une petite erreur :
$(this).parent().next("<img>").slideToggle("slow");

Fonctionne avec next("img") au lieu de next("<img>")

@++

2) neg le : 2009-09-19 14:08:20 www.chezneg.fr/leblog/chezneg-leblog.php

Oui, ça parait plus correct mais il semblerait que les 2 fonctionnent.

3) stephane le : 2010-03-15 17:02:43 www.stephane-giberne.fr

tuto bien instructif

4) Ayako le : 2010-05-11 08:37:19 www.lovely-mochi.com

C'est cool quand ça marche aussi bien, tout en étant aussi simple... Merci ;)

5) axel le : 2011-06-28 23:25:10 http://www.id-meneo.com/

Yes! Merci, ça fait une heure que je galère. Je garde ce script bien au chaud.

6) kabin le : 2011-07-05 12:36:08 www.kabin.com

pas que ce soit le meilleur code pour effectuer ce travail; mais bon pour l'instant ça va pas bien loin, donc ça devrait aller.

7) yaka le : 2011-08-18 12:18:56 www.acsiiweb.com

Pensez vous faire un tuto sur les autres fonctions de jQuery ? Merci.

8) neg le : 2011-08-19 12:03:42 /www.chezneg.fr/leblog/chezneg-leblog.php

il y'a d'autre tuto concernant jquery sur le blog. sinon une documentation en française et bien faite et disponible à cette URL : http://jquery.developpeur-web2.com/documentation.php

9) Vincent le : 2012-01-16 23:44:10

Bonsoir,

c'est très bien expliqué.
Question subsidiaire:

lorsque l'on utilise ce principe avec la fonction toggle () pour faire un menu latéral Simplifié/Avancé.
cela fonctionne parfaitement avec une seule page web.
Par contre, si l'on convertit le tout en template, lors du clic sur un lien, on revient à la présentation initiale du menu.

Est ce qu'il y a un moyen de supprimer ce fonctionnement sans écrire une usine à gaz ?

Merci,

vincent

10) web tasar&#305;m le : 2012-06-22 14:23:18 kursistem.com

Here is another great blog for you to enjoy: realscienceexperience.wordpress.com
The Real Science Experience is a blog written by university students who have come from various backgrounds (and countries) and have followed the Bachelor of Science down different pathways from undergraduates to masters. On this blog we discuss what it is really like to study science at a tertiary level.Here is another great blog for you to enjoy: realscienceexperience.wordpress.com
The Real Science Experience is a blog written by university students who have come from various backgrounds (and countries) and have followed the Bachelor of Science down different pathways from undergraduates to masters. On this blog we discuss what it is really like to study science at a tertiary level.

11) boyaci le : 2012-10-10 23:45:53 http://www.boyacibadanaustasi.com

Oui, ça parait plus correct mais il semblerait que les 2 fonctionnent.


Ajouter un commentaire :






Les derniers articles :
Ouverture du site profitvacances.com
Utiliser la géolocalisation et styler une carte google map
Faire un slider simplement avec jQuery
Système de pagination en PHP sur une requête Mysql
Trouver les éléments à proximité sous MySql via leurs longitude et latitude
Stockage de données dans le cloud (SugarSync, DropBox, SkyDrive, BitCasa)
PHP : Recuperer les balises images d'un document (une page) HTML
PHP : faire un lecteur RSS grâce à simplexml_load_file
Regarder la TV devant Internet (et inversement)
Albert Dupontel et Benoit Poelvoorde en punks pour le film "le grand soir"

propulsé par Neg