Gularu.fr
Cueillir l'actu, l'insolite du web et d'autres trucs
Nouvelle version de ce billet très lu contenant tout ce qui faut pour que cela fonctionne avec la dernière version de prototype
Voici donc le tutorial, tutoriel concernant le superbe accordéon web 2.0 tendance que l’on voit chez tous les geeks qui se respectent ! 100% compatible Prototype et Scriptaculous. Pas grand chose à faire, suivez le guide :
Tout d’abord, téléchargez l’archive pour réaliser le tuto : téléchargez ici
Il contient toujours la même chose : les js, le fichier index ou demo, et le css. La librairie s’appelle accordion.js dans le dossier js et le css accordion_glam.css.
Trois étapes :
1- Mettez le head pour les js et le css de votre accordéon :
2- Insérez votre accordéon dans le body :
Les classes doivent porter le même nom que dans mon exemple car la librairie s’en sert. accordion-toggle pour les titres. accordion-content pour le contenu qui apparaît.
3- Ajoutez votre code prototype pour initialiser l’accordéon :
Voir le code prototype gérant l’initialisation
Je rappelle que l’écouteur avec window et load est en fait le lancement d’une fonction lorsque le DOM est complètement chargé, c’est à dire que lorsque tous les divs, images et textes sont apparus. Le chiffre 1 signifie qu’à l’ouverture de la page, c’est le titre 1 qui va être ouvert, ici Main.
C’est tout ! Pas très compliqué n’est-ce pas !
Voir mon exemple : la démo de l’accordéon
A lire aussi
Mots-clés : accordeon, accordion, accordion.js, effect, event.observe, event.stop, gratuit, prototype, scriptaculous
Publié dans : Informatique, Tutoriaux
—
23 avis à “Web 2.0 : Tutos gratuit pour un accordéon, accordion fonctionnant avec la version Prototype 1.6”
-
Tutorial : Web 2.0, Ajax, créer un accordéon, accordion dynamique et classe | Gularu #web & blog dit :
[...] Nouvelle version du post en cliquant ici : http://www.gularu.fr/blog/?p=403 [...]
-
Zetler dit :
Bonjour.
Je viens de voir l’effet accordéon…Class et sympa!
Merci beaucoup!
J’ai hâte de l’utiliser…
A plus
Laurent
-
Gularu dit :
Ecoute, c’est gratuit, profite-en !
-
salutunequestioncommentajouterunenouvelecellule?dslpblemedeclaviermerci
-
Ba tu rajoute une div avec le titre et le contenu.
-
JOHAAANNS dit :
Bonsoir a tous,
J’ai une question comment faire si dans chaque menu on y triuve un lien, et que quand on clique sur ce lien, l’accordeon concerné reste ouvert…
Merci d’avance..et super boulot
,
bravo -
ba tu met le lien, le lien ne fermera pas l’accordeon.
-
Heu si ! Si il y a un lien, et que l’on clique dessus, il charge automatiquement une autre page, donc l’accordéon se referme…
Saut si on fait des lien en ajax, ce qui permet de ne pas charger la page ou l’accordéon se trouve !
-
ba le principe du lien normalement c’est d’ouvrir une autre page… sinon on utilise un bouton.
-
Admettons :
ZONE MEMBRE (accordeon)
- Voir son profil (lien)
- Modifier ses infos (lien)
- tec…(lien)Si je clique sur un de ces liens, j’aimerais que cette accordéon soit toujours ouvert et visible, puisque ca reste dans le meme « domaine », la « ZONE MEMBRE »…cela evite au visiteur de reouvrir son accordeon, pour par exemple modifier qq chose de sa « ZONE MEMBRE »
-
Envoie le code par email, tu trouveras mon email sur mon C.V. tout en haut du blog.
-
Sof dit :
Bonjour,
Sympa ce tuto…
Vous sauriez comment configurer le JS pour qu’au chargement il n’y ai aucun panneau d’ouvert ?Merci bien
-
Il faut enlever le nom de la classe sur l’onglet concerné.
-
Web 2.0 : Tutos gratuit pour un accordéon, accordion fonctionnant … | Information Mining R&D dit :
[...] reading here: Web 2.0 : Tutos gratuit pour un accordéon, accordion fonctionnant … Share this [...]
-
Kazuul dit :
Salut,
je suis dans le meme cas que Johaaanns, je cherche à ce que le menu en accordéon reste ouvert lors du rechargement de la page. (message 2 décembre 2009 à 13:17).
As-tu trouver une solution ?
Merci d’avance.
-
Kazzul, décrit aussi précisément que possible ton problème, je vais voir ce que je peux faire.
-
Je te laisse juger par toi-même.
Connecte toi au site suivant, et test. A mon avis tu comprendras plus vite en testant que si j’explique.
-
-
Alors,
dans le code : accordion = new Accordion(« test-accordion », 1);
le 1 veut dire quel onglet est ouvert au chargement de l’accordeon. tu dois donc (en php) mettre 1, 2 ou 3 selon la page où ton internaute se trouve.
Ex :
< ?php
if ($page == "example.php) $numAccordeon = 2;
?>et dans le script :
accordion = new Accordion(« test-accordion », < ?php echo $numAccordeon; ?>);
-
Merci,
j’ai bien compris ce qu’il faut faire, mais j’arrive pas à faire reconnaitre à Java la variable $numAccordeon.
Quand je fais un echo de cette variable directement dans la page php, j’obtiens bien 1 ou 2 ou 3 en fonction du nom de la page.
Mais en java pas moyen, la dernière fonction ne reconnait rien.accordion = new Accordion(« test-accordion », );
-
Le javascript doit être dans la partie html et avec les balises php.
-
Merci ca fonctionne !
J’avais laisser cette partie dans le fichier accordion.js
-
Le PHP ne peut pas être lu dans un fichier .js
Heureux que cela fonctionne !
Laisser son avis
Catégories
—
Liens
—
À propos de Gularu.fr
—
Dans ce blog vous trouverez votre bonheur si vous êtes webmaster, web-designer, web tout court. Mais parfois je lance des petits coups de gueule politiques et donne mon avis sur des sujets souvent inutiles mais drôles...