Tutoriels vidéo art graphique gratuits

 
Bienvenue, Invité. Merci de vous connecter ou de vous inscrire.
Pages: [1]   En bas

Auteur Sujet: Menu accordeon avec les spry  (Lu 9255 fois)

kola

  • Wisi Addict
  • ***
  • Hors ligne Hors ligne
  • Messages: 211
    • Voir le profil
    • dorettinicolas.fr
    • E-mail
Menu accordeon avec les spry
« le: mars 05, 2009, 14:09:53 pm »

Bonjour à tous!

J'essaie de réaliser un menu accordéon avec les widget spry de dreamweaver CS4, une grande aventure.
Je cherche à faire deux choses:
La première, je voudrais que le contenu contienne lui aussi un accordéon. Je m'explique: quand je clique sur le titre 1 par exemple, le contenu 1 apparait, je clique sur lui et un autre menu descendant apparait.
Par défaut, voici le code html apparaissant à la création du menu :

<div id="Accordion1" class="Accordion" tabindex="0">
         <div class="AccordionPanel">
           <div class="AccordionPanelTab">Titre 1</div>
           <div class="AccordionPanelContent">Contenu 1</div>
         </div>
         <div class="AccordionPanel">
           <div class="AccordionPanelTab">Titre 2</div>
           <div class="AccordionPanelContent">Contenu 2</div>
         </div>
       </div>

Moi, naïf, je me dit : « ah ben, l’informatique,  c’est simple, je recopie le code sur mon contenu ! »

<div id="Accordion1" class="Accordion" tabindex="0">

         <div class="AccordionPanel">
           <div class="AccordionPanelTab">Titre 1</div>
           <div class="AccordionPanelContent">
      <div id="Accordion1" class="Accordion" tabindex="0">
         <div class="AccordionPanel">
            <div class="AccordionPanelTab">Titre 1’</div>
                                <div class="AccordionPanelContent">Contenu 1’</div>
         </div>
                </div>
         </div>

         <div class="AccordionPanel">
           <div class="AccordionPanelTab">Titre 2</div>
           <div class="AccordionPanelContent">Contenu 2</div>
         </div>
       </div>

Et ben vous savez quoi ? L’informatique, c’est pas simple. ??? Ça marche pô ! :'(

La deuxième chose que j’aimerais faire c’est que mon accordéon soit fermé et ne s'ouvre que lorsque l'on clic sur l'un des titres. Par défaut, il y en a toujours un d’ouvert.

Je suppose à raison qu’il faut remonter ses manches pour se plonger les mains dans le cambouis Javascriptien,  mais dès que la programmation dépasse le Html/Css, j’ai comme des petits boutons qui me poussent partout et mes trop rares cheveux tombent à force de tirer dessus…

Quelqu’un peut-il m’aider ?

kriztho

  • Global Moderator
  • Wisi Comment on décroche
  • *****
  • Hors ligne Hors ligne
  • Messages: 1490
    • Voir le profil
    • La veille techno du web
    • E-mail
Re : Menu accordeon avec les spry
« Réponse #1 le: mars 06, 2009, 18:05:13 pm »

J'ai pu sans problème insérer un Accordéon Spry dans le contenu dans autre Accordéon. Quand tu as inséré le premier composant, tu veilles à bien être dans le contenu d'un des panneaux et tu insères le deuxième.
Je n'ai pas eu de problème.
Par contre pour le problème de ne pas avoir d'onglet ouvert, la question est pertinente... Je pense qu'il faudrait allez chercher la réponse dans le fichier JavaScript associé au composant Spry. Mais la c'est une autre aventure ;)
As-tu jeté un coup d'oeil sur l'aide en ligne des composants Spry ?
IP archivée
______________________________________________________________
Je ne connais pas grand chose, mais je progresse...
[La veille techno du web] - [Histoire d'écrire de l'informatique]

kola

  • Wisi Addict
  • ***
  • Hors ligne Hors ligne
  • Messages: 211
    • Voir le profil
    • dorettinicolas.fr
    • E-mail
Re : Menu accordeon avec les spry
« Réponse #2 le: mars 07, 2009, 12:11:57 pm »

Merci Kriztho...

Je sais pas quoi te dire. J'avais recopié le code et ça ne marchait pas; j'ai fait comme tu m'as dit en sélectionnant le contenu puis en réappliquant un spry accordéon à partir du menu et va comprendre, ça marche... J'avais du faire une petite erreur dans mes lignes de codes.
Il reste toujours ce problème d'ouverture par défaut...Je n'ai rien trouvé dans l'aide d'adobe, je continue à chercher!

kola

  • Wisi Addict
  • ***
  • Hors ligne Hors ligne
  • Messages: 211
    • Voir le profil
    • dorettinicolas.fr
    • E-mail
Re : Menu accordeon avec les spry
« Réponse #3 le: mars 07, 2009, 12:30:48 pm »

Et ben voilà, j'ai trouvé... Non pas sur la doc d'Adobe (ils doivent l'expliquer mais seulement dans l'aide anglaise, beaucoup plus complète), mais sur ce site que je ne connaissais pas:

http://ceslava.com/blog/fr/personalizar-el-spry-accordion-en-dreamweaver-cs3-videotutorial/

Sisi, c'est en français.
Il faut ouvrir le fichier javascript, changer la ligne 37:
this.defaultPanel = 0;
le 0 en -1
et la ligne 51:
this.useFixedPanelHeights = true;
true en false

et bingo, ça marche. Après, un soupçon de css et c'est merveilleux.

Bon week-end et merci encore!
 



Wisibility est un sité dédié à la formation aux métiers l’image. Vous y trouverez différentes ressources vous aidant à maîtriser les logiciels graphiques tels que Photoshop, Lightroom, Illustrator, InDesign, Flash… Aujourd’hui, Wisibility réunie plus d'une vingtaine d’experts, intervenant en Entreprise pour former graphistes, webdesigners, développeurs web, photographes, monteurs, trucistes…
Depuis 2006 nous nous sommes spécialisés dans les tutoriels vidéos permettant de se former à distance. Notre forum très actif, géré par une équipe de bénévoles répondra à vos demandes. Vous pourrez également profiter de nos émissions et reportages sur la Wisi TV.
Contact - Wisibility est une marque déposée

Blog - Tutoriels - Wisi TV - Forum