Suivez les fils RSS
 
Auteur
condon
# 19 Mar 2010 - 10:04:17
Citer
10 Posts
Bonjour
Je travaille actuellement sur l'effet toggle;
j'ai téléchargé ceci:
http://www.sohtanaka.com/web-design/examples/toggle/

Pouvez vous me dire si l'on peut diversifier les "en tête" comme celui-ci:
http://www.evianmastersexperience.com/fr/Agenda
clic sur le signe plus

Merci de m'éclairer

^
fvsch
# 19 Mar 2010 - 13:32:36
Citer
Administrateur
19941 Posts
Bonjour,

condon a écrit :
Pouvez vous me dire si l'on peut diversifier les "en tête"

Je n'ai aucune idée de ce que "diversifier" veut dire ici, mais dans l'absolu on peut faire plein de choses du moment que l'on écrit un code sur-mesure.

http://fvsch.com 
^
condon
# 19 Mar 2010 - 15:09:29
Citer
10 Posts
Merci Florent
Par diversifier, j'entends chaque en tête différent comme sur e 2ème lien

^
ZeB_panam
# 20 Mar 2010 - 23:27:15
Citer
253 Posts
Salut,
Effectivement c'est pas très clair... Par en-tête tu veux dire le contenu qui est déjà affiché (et qui ne sera pas caché) ?

Bon disons qu'on va partir de ce principe-ci, et qu'on va prendre pour base le script du 1er lien que tu nous as donné.
Le problème de next() (en passant, dans le script original il n'y a même pas besoin de spécifier la classe dans le next() ), c'est qu'il sélectionne directement le prochain élément. Donc si tu intercales par exemple un span, là ça marche plus...



Ce qu'il faut faire c'est par exemple ça, avec une composition sous cette forme :

<h2 class="trigger"><a href="#">Web Design & Development</a></h2>
<div>
<span>Hello World</span>
<div class="toggle_container">
<h3>Need a Website?</h3>
<img src="thumbnail.gif" alt="" />
<p>Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan. </p>
<p>Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor. </p>
</div>
</div>


Donc, je ne donne pas de classe à celui qui portait la classe .toggle_container, je décale la classe .toggle_container sur le div enfant (qui portait la classe .block à l'origine), et enfin avant ce dernier j'insère ce que je veux (dans mon exemple un span).


Et au niveau du js :

$("h2.trigger").click(function(){
$(this).next().find(".toggle_container").slideToggle("slow,");
});


Donc, je sélectionne le prochain élément suivant le H2 (c'est un div) et dedans je recherche l'élément qui porte la classe .toggle_container.


En espérant avoir compris ta question smile

http://sebastien.vaneyck.free.fr 
^