[FICHE ONGLET] • Comment faire des onglets sur le côté ?
Voir le sujet précédent   Aller en bas 
Handraëlavatar
Rang M E M B R E
Séparateur 1

Féminin
Statut Présent(e)
Messages : 138
Expos Graphisme
Pas d'étoiles

Message  Dim 17 Sep - 17:07 • Message : 5419

• DEMANDE D'ENTRAIDE INFORMATIQUE •
  • Pseudo* : Handraël

  • Votre demande concerne* : [X] un codage [ ] un forum [ ] les deux [ ] autre


  • Je souhaite (cocher la bonne mention)* :

  • [ ] poser une question
    Quelle est votre question ? : Réponse ici
    [X] obtenir de l'aide
    Quel est le problème rencontré ? (détailler votre réponse au maximum) : Je ne sais pas comment créer des onglets à mettre sur le côté d'une fiche (je cherche à les mettre à gauche plus précisement)

  • Autre : Merci d'avance


  • (*) champs obligatoires

    Dernière mise à jour le 14.07.2017, par Nevida.

    Revenir en haut Aller en bas
    Nevidaavatar
    Rang F O N D A T R I C E
    Séparateur 1

    Féminin
    Statut Présent(e)
    Messages : 1873
    Logiciels : Photoshop CS6
    Expos GraphismeCodageEcriture
    Pas d'étoiles

    Message  Dim 17 Sep - 17:13 • Message : 5421
    Me voilà Smile
    Peux-tu me donner le code de ta fiche s'il te plaît Smile
    Revenir en haut Aller en bas
    Handraëlavatar
    Rang M E M B R E
    Séparateur 1

    Féminin
    Statut Présent(e)
    Messages : 138
    Expos Graphisme
    Pas d'étoiles

    Message  Dim 17 Sep - 17:20 • Message : 5425
    Coucou, vu que je ne sais pas trop comment m'y prendre je ne l'ai pas encore commencé. xddxduio::
    Revenir en haut Aller en bas
    Nevidaavatar
    Rang F O N D A T R I C E
    Séparateur 1

    Féminin
    Statut Présent(e)
    Messages : 1873
    Logiciels : Photoshop CS6
    Expos GraphismeCodageEcriture
    Pas d'étoiles

    Message  Dim 17 Sep - 17:58 • Message : 5438
    Très bien alors disposes-tu d'une maquette ? Smile
    Si non, il faudrait que tu en fasses une pour que je puisse t'aider correctement *-*
    @Handraël
    Revenir en haut Aller en bas
    Handraëlavatar
    Rang M E M B R E
    Séparateur 1

    Féminin
    Statut Présent(e)
    Messages : 138
    Expos Graphisme
    Pas d'étoiles

    Message  Dim 17 Sep - 19:05 • Message : 5453
    Alors en gros il faudrait que ça donne quelque chose comme ça www. Smile
    Revenir en haut Aller en bas
    Nevidaavatar
    Rang F O N D A T R I C E
    Séparateur 1

    Féminin
    Statut Présent(e)
    Messages : 1873
    Logiciels : Photoshop CS6
    Expos GraphismeCodageEcriture
    Pas d'étoiles

    Message  Dim 17 Sep - 22:04 • Message : 5482
    Pour créer une fiche contenant un système d'onglet, il faut d'abord comprendre le fonctionnement de ce dernier. Le système d'onglet utilise le langage Javascript, c'est pourquoi il n'est pas forcément simple à appréhender.
    Moi même je ne maîtrise pas parfaitement ce langage mais je vais tenter de t'aider au mieux Smile
    Dans la fonction Javascript utilisée, on demande à la fonction de cacher tous les onglets et de n'afficher que celui qui est ouvert, c'est à dire celui qui est activé avec un clic de la souris.
    Lorsque l'on change d'onglet, la fonction est capable de jouer sur le style du bouton et d'afficher le contenu de l'onglet correspondant puis de cacher le contenu de l'ancien onglet ouvert.
    Via cette fonction, on crée une ancre sur le premier onglet, ainsi la fonction c'est qu'elle doit démarrer sur cet onglet.

    Pour commencer, tu vas donc pouvoir copier/coller le code suivant dans une page html vierge (il comprend la fonction javascript qui orchestre le jeu des onglets, ainsi que le squelette du système d'onglets) :
    Code:

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript">
            //<!--
                    function change_onglet(name)
                    {
                            document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet';
                            document.getElementById('onglet_'+name).className = 'onglet_1 onglet';
                            document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';
                            document.getElementById('contenu_onglet_'+name).style.display = 'block';
                            anc_onglet = name;
                    }
            //-->
            </script>    

    <style type="text/css">    
          
    </style>
    <body>  
    <div class="fond_onglet">
          
     <div class="systeme_onglets">
          
     <div class="onglets">
       <span class="onglet_0 onglet" id="onglet_onglet1" onclick="javascript:change_onglet('onglet1');">Onglet 1</span><span class="onglet_0 onglet" id="onglet_onglet2" onclick="javascript:change_onglet('onglet2');">Onglet 2</span><span class="onglet_0 onglet" id="onglet_onglet3" onclick="javascript:change_onglet('onglet3');">Onglet 3</span>    
     </div>
                    
     <div class="contenu_onglets">
            
     <div class="contenu_onglet" id="contenu_onglet_onglet1">
          Onglet 1        
     </div>
                  
     <div class="contenu_onglet" id="contenu_onglet_onglet2">
         Onglet 2    
     </div>
                
     <div class="contenu_onglet" id="contenu_onglet_onglet3">
         Onglet 3    
     </div>
                
     </div>
     
     </div>
    </div>
    </body>
            <script type="text/javascript">
            //<!--
                    var anc_onglet = 'onglet1';
                    change_onglet(anc_onglet);
            //-->
            </script>

    J'ai trouvé ça sur le net, c'est une autre manière de fonctionner puisque là, il faut utiliser du JQuery : https://www.grafikart.fr/tutoriels/jquery/onglets-175

    @Handraël
    Je te laisse regarder un peu le code ^^ j'aurai dû mal à t'expliquer tout ça dans le détail mais sache qu'il y a plusieurs articles intéressants à ce sujet sur Internet Smile
    Si quelqu'un si connaît bien en JS, n'hésitait pas Very Happy
    Revenir en haut Aller en bas
    • Page 1 sur 1

    Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
    Sauter vers: