We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
MODX Community Forums Archive

Générer des onglets

    • 18219
    • 826 Posts
    marc Reply #1, 17 years, 1 month ago
    Bonjour à toute l’équipe.

    Je fais appel à vous pour obtenir au travers des snippets existants le code suivant :
    
<ul class="tabs"> 
    <li><a href="#">Onglet 1</a></li> 
    <li><a href="#">Onglet 2</a></li> 
    <li><a href="#">Onglet 3</a></li> 
</ul> 
 
 
<div class="panes"> 
    <div>Sit voluptaria consequuntur interpretaris ea, salutatus comprehensam usu ea. Qui te summo electram iracundia, ex mel scripta tritani. Eos eius minim laoreet ne, labitur pertinax est ne. Nam et tamquam appellantur, enim mediocrem cu cum. Everti verear cu has, ad quo facete fastidii</div> 
    <div>Sit voluptaria consequuntur interpretaris ea, salutatus comprehensam usu ea. Qui te summo electram iracundia, ex mel scripta tritani. Eos eius minim laoreet ne, labitur pertinax est ne. Nam et tamquam appellantur, enim mediocrem cu cum. Everti verear cu has, ad quo facete fastidii</div> 
    <div>Sit voluptaria consequuntur interpretaris ea, salutatus comprehensam usu ea. Qui te summo electram iracundia, ex mel scripta tritani. Eos eius minim laoreet ne, labitur pertinax est ne. Nam et tamquam appellantur, enim mediocrem cu cum. Everti verear cu has, ad quo facete fastidii</div> 
</div>


    Je précise ma structure de mon site :
    J’ai un document (dossier) dans lequel je veux faire apparaître ce code.
    Contenu dans ce document, j’ai donc 3 autres documents :
    - Onglet 1
    - Onglet 2
    - Onglet 3
    où j’aimerais récupérer le titre pour le mettre dans les balises <li>
    et le contenu dans les balises <div>

    Pouvez-vous m’indiquer quel(s) snippet(s) utiliser ?

    J’ai essayé avec WAYFINDER sans succès. Il ne génére aucun code. Sans doute parce que je l’utilise déjà pour générer le menu du site.

    Merci par avance wink
      Marc
      I&#39;m French... Sorry for my bad English, I use &#39; Google Translator&#39; or other... but that remains that tools wink
      • 18219
      • 826 Posts
      marc Reply #2, 17 years, 1 month ago
      Je rectifie : Wayfinder fonctionne correctement. Il faut seulement que les documents aient la case ’Afficher dans le menu’ de cocher. laugh

      Maintenant, je continue avec Ditto pour les balises <div>
        Marc
        I&#39;m French... Sorry for my bad English, I use &#39; Google Translator&#39; or other... but that remains that tools wink
        • 34001
        • 428 Posts
        Jean-Christophe B. Reply #3, 17 years, 1 month ago
        Quote from: Marc at Aug 06, 2009, 07:01 AM

        Je rectifie : Wayfinder fonctionne correctement. Il faut seulement que les documents aient la case ’Afficher dans le menu’ de cocher. laugh

        Maintenant, je continue avec Ditto pour les balises <div>
        Ravi que ça fonctionne. Effectivement, il n’y a aucun souci à effectuer plusieurs appels Wayfinder sur une même page.
        D’ailleurs, Ditto aurait pu tout aussi bien faire l’affaire, mais c’est quand même plus simple avec Wayfinder. wink
          Intégrateur web freelance
          • 18219
          • 826 Posts
          marc Reply #4, 17 years, 1 month ago
          Oui, Ditto aurait fait aussi l’affaire.
          La seule chose que je me pose comme question c’est un seul appel de Ditto aurait-il suffit ?

          Ma connaissance de ces deux outils j’en doute.

          Par contre, je me posait la question s’il existait un autre snippet capable de générer ce code en une seule fois ?
          Pas sur, pas sur...

          Je vous communiquerais mes résultats quand j’aurai fini wink
            Marc
            I&#39;m French... Sorry for my bad English, I use &#39; Google Translator&#39; or other... but that remains that tools wink
            • 18219
            • 826 Posts
            marc Reply #5, 17 years, 1 month ago
            Bon voila la solution la plus rapide à mettre en oeuvre.
            Un bon exercice pour les débutants wink

            Insérer le code suivant dans votre document en prenant soin de ne pas utiliser le WYSIWYG :
            <div id="Traitement">
	[!Wayfinder? &level=`1` &outerTpl=`wfTabs`  &rowTpl=`wfRowTabs` !]
	<!-- tab "panes" -->
	<div class="panes">
		[[Ditto? &tpl=`dtTabs` &paginate=`1` &summarize=`99` &sortBy=`ASC`]]
	</div>
</div>

            Créer les pages sous ce document. Celles vont apparaîtrent dans le contenu des onglets.

            Créer 3 chunks :
            Le premier nommé ’wfTabs’ avec le code suivant :
            <!-- bloc tabs -->
<ul class="tabs">
	[+wf.wrapper+]
</ul>
<!-- /bloc tabs -->


            Le second avec pour nom ’wfRowTabs’ et comme code :
            <li><a href="#"><span>[+wf.linktext+]</span></a></li>


            Enfin le troisième ’dtTabs’ avec le code :
            <div id="#"> [+content+] </div>


            Vous obtenez au final le code suivant : 
            <!-- the tabs --> 
<ul class="tabs"> 
    <li><a href="#">Tab 1</a></li> 
    <li><a href="#">Tab 2</a></li> 
    <li><a href="#">Tab 3</a></li> 
</ul> 
 
<!-- tab "panes" --> 
<div class="panes"> 
    <div>First tab content. Tab contents are called "panes"</div> 
    <div>Second tab content</div> 
    <div>Third tab content</div> 
</div>


            Vous allez me dire : Oui mais pour quoi faire ce code ?

            Simple, ce code est utilisé pour générer les Tabs (Onglets).
            Avec le package ’jquery.tools.min.js’, vous obtenez le résultat indiqué sur le site de jQuerry TOOLS à l’adresse suivante http://flowplayer.org/tools/demos/tabs/index.html

            Vous pouvez bien entendu pousser plus loin le travail. smiley
              Marc
              I&#39;m French... Sorry for my bad English, I use &#39; Google Translator&#39; or other... but that remains that tools wink
              • 34001
              • 428 Posts
              Jean-Christophe B. Reply #6, 17 years, 1 month ago
              Super! Excellent tutoriel pour démarrer. smiley

              C’est là où je me dis qu’il faudrait vraiment lancer un site pour la documentation FR, histoire de donner de la visibilité à ce genre d’information. Je vais relancer Davidm à ce sujet dès la rentrée. wink
                Intégrateur web freelance
                • 6726
                • 7,075 Posts
                davidm Reply #7, 17 years, 1 month ago
                Excellent tuto merci smiley

                Oui c’est vrai tu as raison il faut relancer modxcms.fr, mais de mon côté j’y met une condition : qu’on constitue une équipe de contributeurs suffisamment étendue pour que ça puisse se faire sans qu’une ou deux personnes doivent y passer plusieurs jours complets... car ça, de mon côté, ça n’est plus possible vu le contexte économique il faut carburer pour décrocher des contrats et surtout être rentable...
                  .: COO - Commerce Guys - Community Driven Innovation :.

                  MODx est l&#39;outil id
                  • 18219
                  • 826 Posts
                  marc Reply #8, 17 years, 1 month ago
                  Je rejoins ton analyse David, mais nous nous éloignons du sujet du post qui je le rappelle concerne la gestion d’onglet.
                  Par contre, rien n’empêche d’ouvrir un autre post sur le sujet que Fairytree a initié wink

                  Car je pense que beaucoup peuvent s’exprimer en cette période d’entrée.
                    Marc
                    I&#39;m French... Sorry for my bad English, I use &#39; Google Translator&#39; or other... but that remains that tools wink
                    • 6726
                    • 7,075 Posts
                    davidm Reply #9, 17 years ago
                    Si le sujet dérive vraiment alors je splitterai comme d’habitude, pour l’instant ça ne mérite pas à mon avis tongue Tout le monde est libre de s’exprimer ici jusqu’à preuve du contraire !
                      .: COO - Commerce Guys - Community Driven Innovation :.

                      MODx est l&#39;outil id
                      • 15001
                      • 697 Posts
                      Jul Reply #10, 16 years, 9 months ago
                      Bonjour à tous,

                      Je peine à faire fonctionner ces fameux onglets.

                      Premier problème:

                      Les onglets s’affichent, mais le contenu des deux "tab panes" est visible simultanément.
                      Solution: Pour résoudre ce premier problème, il faut soit rajouter class="pane" à chacune des <div> présentant le contenu d’un onglet, soit modifier la feuille de style en supprimant remplaçant div.pane par div.
                      /* initially all panes are hidden */ 
div.panes div.pane {
	display:none;		
}


                      Second problème:
                      Lorsque je clique sur un onglet, MODx redirige sur la page d’accueil, ce qui n’est pas l’objectif recherché.
                      Je soupçonne que le problème se trouve au niveau du Javascript.
                      Exact!
                      Solution: Pour résoudre ce second problème, il faut mettre ceci dans l’en-tête de la page:
                         <script type="text/javascript" src="assets/js/jQuery/jquery.tools.min.js?v=1"></script>
   <script type="text/javascript" src="assets/js/jQuery/global-0.36.js"></script>
   <script type="text/javascript" src="assets/js/jQuery/tools.tabs-1.0.4.js"></script>

                      où les 3 scripts sont ceux utilisés par la page:
                      http://flowplayer.org/tools/tabs.html
                      Il faut regarder le code source pour les trouver.