AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.

Le Deal du moment :
Nike : Jusqu’à 50% sur les articles de ...
Voir le deal

    Faire des onglets en Javascript

    NyoTheNeko
    NyoTheNeko
    FémininAge : 30Messages : 5683

    Ven 30 Mai 2014 - 15:00

    Rappel du premier message :



    Faire des onglets en Javascript



    Bonjour à tous! Voilà un petit tutoriel pour vous apprendre à faire des onglets en Javascript! Il est à noter que c'est très utile pour nos PA et nos QEEL qui demandent des onglets, et c'est parfois plus facile à comprendre que l'utilisation du :target en CSS. Cependant le javascript ne marche pas dans les messages forumactif (et ce, pour des questions de sécurité), c'est à dire que vous ne pouvez pas utiliser ce code dans les messages, mais uniquement sur le templates ou la page d'accueil de votre forum! Si vous voulez des onglets dans vos messages, il faudra passer par le CSS!

    Ce tutoriel est donc une généralisation du tutoriel de Sui pour faire un QEEL en onglets. Il faut bien comprendre que vous pouvez l'utiliser de plein de façon différentes, autres que pour un QEEL: que ce soit une PA, un profil, une signature dans une iframe, une fiche de pub, etc. C'est donc un tutoriel pour que vous compreniez les mécanismes derrière et puissiez les réutiliser comme bon vous semble!


    Le Javascript



    Commençons tout de suite par un premier bout de script:
    Code:
    <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>

    Ca fait beaucoup n'est-ce pas? Et pour la plupart d'entre vous, ce sera probablement du charabia! Mais pas de panique, les explications arrivent, pas à pas, tout de suite!

    Tout d'abord un petit mot sur ces balises:
    Code:
    <script type="text/javascript"></script>

    Cela implique que entre ces deux balises, vous retrouverez un code javascript. Facile donc de le repérer au milieu du reste du HTML: il suffit de chercher les balises script!

    Commençons maintenant l'analyse du code en lui-même!


    Code:
    function change_onglet(name)
    Ce début est tout simple, nous indiquons que nous créons une fonction (function) du nom de change_onglet et qui prend comme arguments name. Cet argument pourrait très bien s’appeler prout, petit_coeur, machin ou chose, c'est juste que ce sera utilisé ensuite dans la fonction. La fonction en elle-même pourrait aussi avoir le nom que l'on veut: tout ce qui importe, c'est que plus tard, on appelle la fonction par ce nom que l'on a défini!
    Le terme important est donc function car cela signifie qu'on déclares une fonction javascript.


    Code:
    document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet';
    Plus compliqué ici. Là, on prend l'élément passé par son id, (getElementById) et on prend donc son nom, qu'on dit commencer par "onglet_" et le reste de son nom enregistré dans anc_onglet (exemple: si anc_onglet contient un, on cherche l'élément avec l'id onglet_un). Là, on change sa class actuelle (.className) par onglet_0 onglet.

    Donc, pour essayer d'expliquer un peu mieux que ce charabia: pour l'onglet qui était actif avant le click, on change la class actuel par la class "onglet_0 onglet".

    Notons que la class "onglet_0 onglet" est en réalité deux class: onglet et onglet_0. On pourrait également les nommer autrement! En effet, ces class sont surtout là pour ensuite, par le CSS, mettre en forme les onglets! onglets étant la classe de TOUS les anglets, et onglet_0, la class des onglets inactifs.


    Code:
    document.getElementById('onglet_'+name).className = 'onglet_1 onglet';
    Comme vous voyez, ici, on reprend l'argument "name" passé à la fonction! Ici, c'est donc similaire: on prend l'onglet qu'on vient de cliquer, et on lui donne la classe onglet_1 onglet. Il y a donc ici un changement de classe entre l'actif et l'inactif!
    Notons, encore une fois, que la classe pourrait changer! En effet, on pourrait l’appeler comme on veut, cela permet simplement de mettre dans le CSS une certaine mise en forme! On n'est d'ailleurs pas obligé d'avoir deux class!

    En effet, avoir deux class (dont une seule qui change) permet de donner à tous les onglets la même mise en forme, mais de donner une différence tout de même à l'onglet actif et aux onlgets inactifs. Par exemple, les class pourraient très ben être inactif onglet et actif onglet respectivement!


    D'ailleurs, si on ne souhaite pas que tous les onglets aient la même mise en forme, on pourrait tout simplement supprimer "onglet" et simplement avoir:
    Code:
    document.getElementById('onglet_'+anc_onglet).className = 'inactif';
                            document.getElementById('onglet_'+name).className = 'actif';
    avec inactif la class d'un onglet inactif et actif le code d'un onglet actif. Pr exemple, inactif serait d'une certaine couleur, et actif d'une autre.


    Passons à la suite:
    Code:
    document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';
    Ici, on dit que l'onglet actif avant le click doit changer de style de display: il doit passer à none. Donc ici, on change directement le CSS, qu'on appelle avec le .style, et on change la balise qu'on appelle avec .display!
    En gros, on fait en sorte que l'onglet courant ne s'affiche plus.


    Code:
    document.getElementById('contenu_onglet_'+name).style.display = 'block';
    Ici, on fat pareil, mais l'inverse! C'est à dire que c'est l'onglet qu'on vient de cliquer qui passe à un display: block, donc apparait!

    Notez qu'on pourrait également changer ici le CSS, par exemple en mettant opacity, qui passerait de 0 à 1. Dans le CSS, on pourrait alors mettre une transition dans l'endroit concerné! Il faut aussi faire attention, plus loin, dans le CSS, que l'on ne mette pas display:none mais bel et bien opacity: 0 (cf plus tard, la partie CSS).

    Et enfin:
    Code:
    anc_onglet = name;
    Ici certainement le truc le plus important: on transfère à anc_onglet la valeur de name, c'est à dire que l'on dit que notre onglet courant est à présent l'onglet que l'on vient de cliquer! Comme ça, au prochain passage dans la fonction, la valeur de anc_onglet ne sera plus la même, et on pourra repasser d'un onglet à un autre de la même façon!


    Passons à présent au second bout de code javascript nécessaire:
    Code:
    <script type="text/javascript">
            //<!--
                    var anc_onglet = 'un';
                    change_onglet(anc_onglet);
            //-->
    </script>
    Ça, c'est le code qui permet de déterminer, à l'ouverture de la page, quel est l'onglet qui sera ouvert. Donc en gros on crée une "var" (= variable) du nom anc_onglet (que l'on réutilise dans le code JS plus haut Wink), et on lui donne comme valeur 'un'. On passe alors cette variable créée dans la fonction change_onglet de plus tôt. Ceci étant un code qui ne demande pas d'appel, ça s'exécute au rafraichissement ou démarrage de la page!
    Faites bien attention à ce que vous remplaciez "un" par le nom effectif d'un de vos onglets!


    Le HTML



    Tout d'abord, créons les "boutons" des onglets, c'est à dire, sr quoi on va cliquer pour afficher les onglets!
    Code:
    <span class="onglet_0 onglet" id="onglet_un" onclick="javascript:change_onglet('un');"> Onglet 1</span><span class="onglet_0 onglet" id="onglet_deux" onclick="javascript:change_onglet('deux');"> Onglet 2</span>


    Il suffit de copier ce bout de code:
    Code:
    <span class="onglet_0 onglet" id="onglet_NOM" onclick="javascript:change_onglet('NOM');">TITRE_ONGLET</span>
    pour créer un nouveau onglet. bien sûr, remplacez NOM par une valeur unique, qui désignera donc cet onglet là!

    Ce bout de code:
    Code:
    onclick="javascript:change_onglet('deux');"
    est l'appel à la fonction écrite plus haut. En somme on dit: au click de la souris (onclick) on fait appel à la fonction javascript du nom change_onglet, avec le paramètre "deux". On pourrait aussi changer pour que ce soit au passage de la souris avec "onmouseover" au lieu de onclick. Bien sûr, le paramètre passé correspond au contenu à afficher!


    Et maintenant, créons le contenu des onglets:
    Code:
    <div class="contenu_onglet" id="contenu_onglet_un">Contenu du 1er onglet</div>
    <div class="contenu_onglet" id="contenu_onglet_deux">Contenu du 2ième onglet</div>

    Bien sûr, comme plus tôt, cette partie est à copier et à nommer pour autant d'onglets que l'on a du même nom que le bouton d'onglet correspondant:
    Code:
    <div class="contenu_onglet" id="contenu_onglet_NOM">Contenu du NOMième onglet</div>
    On a donc l'id, qui identifie quel contenu d'onglet c'est pour que le code JS puisse le modifier comme voulu (et donc qui a le même "nom" que le bouton d'onglet), et la class, qui permet notamment de faire des manipulations CSS (et notamment de l'afficher quand il le faut).

    Si vous voulez mettre une image comme "bouton" de votre onglet, il suffit de faire ceci:
    Code:
    <span class="onglet_0 onglet" id="onglet_NOM" onclick="javascript:change_onglet('NOM');"><img src="URL_DE_L'IMAGE" /></span>


    Le CSS


    Le seul code obligatoire à mettre est celui-ci:
    Code:
    .contenu_onglet {
      display:none;
    }
    Qui permet, en effet, de mettre un display: none, par défaut, à tous les onglets inactifs! Donc, à remplacer par opacity:0 et une transition si vous avez effectué le changement dont j'ai parlé plus haut!


    Le reste du code CSS est optionnel, mais bien sûr, pour mettre en forme correctement, vous en aurez besoin!
    Voici donc le squelette, sans rien dedans, pour la mise en forme! Attention cependant, si vous avez changé le nom de certaines classes, il faudra aussi les changer dans le CSS!

    Code:
    .onglet {
    /* Permet de mettre en forme tous les onglets (enfin la partie à clicker). Par exemple, de tous les entourer. */
    }

    .onglet_0 {
    /* Permet de mettre en forme tous les onglets inactifs. PAr exemple, leur donner une couleur ou couleur de fond particulière. */
    }

    .onglet_1 {
    /* Permet de mettre en forme l'onglet actif. Par exemple, lui donner une couleur ou couleur de fond particulière. */
    }

    #onglet_NOM {
    /* Changez NOM par le nom de l'onglet à modifier. Cela permet de mettre en forme un onglet en particulier. */
    }

    .contenu_onglet {
    /* Mise en forme de tous les contenus d'onglets. Utile notamment pour les positionner quelque part */
    }

    #contenu_onglet_NOM {
    /* Changez NOM par le nom du contenu d'onglet à modifier. Cela permet de mettre en forme un contenu d'onglet en particulier. */
    }

    Et voilà, c'est un peu tout! Si vous avez des questions ou que des passages n'étaient pas clairs, n'hésitez pas à demander!


    Dernière édition par NyoTheNeko le Jeu 22 Jan 2015 - 21:44, édité 1 fois



    Afterglow
    Afterglow
    FémininAge : 28Messages : 138

    Sam 30 Juil 2016 - 20:21

    Merci pour ce tuto :)



    How do you get up from an all time low?
    KIRI
    KIRI
    FémininAge : 31Messages : 7

    Dim 31 Juil 2016 - 4:43

    Merci !
    Yam'
    Yam'
    FémininAge : 30Messages : 75

    Mar 23 Aoû 2016 - 19:02

    Merci pour le tuto!
    C'est super apprécié!
    Anonymous
    Invité

    Mer 24 Aoû 2016 - 2:22

    Merci pour ce tuto depuis le temps que je cherche comment faire **
    Sparryx
    Sparryx
    MasculinAge : 21Messages : 71

    Mer 24 Aoû 2016 - 22:43

    Merci^^
    Calliope
    Calliope
    FémininAge : 32Messages : 22

    Sam 27 Aoû 2016 - 14:34

    Merci ! C'est exactement ce dont j'avais besoin. :friends:



    "When I get sad I stop being sad and be AWESOME instead. True story!"
    Barney Stinson ♥
    ♪ Extasy ♪
    ♪ Extasy ♪
    FémininAge : 34Messages : 117

    Mer 31 Aoû 2016 - 16:12

    Je pense que ça va m'être utile ! Merci Very Happy
    Descalium
    Descalium
    FémininAge : 27Messages : 13

    Lun 5 Sep 2016 - 5:22

    Merci !
    Kabrina Lestrange
    Kabrina Lestrange
    FémininAge : 35Messages : 71

    Sam 24 Sep 2016 - 18:50

    Coucou!

    Merci pour ce tuto complet! J'aurais cependant une petite question à laquelle tu seras peut-être la meilleure personne pour y répondre.

    En fait, j'ai utiliser un système d'onglet avec javascript afin de faire mes catégories sur mon forum. Et j'aimerais que lorsqu'il y a un nouveau message dans une des catégories, que l'onglet change d'image ou de couleur. Bref qu'il y ait un effet spécial afin de savoir qu'il y a un nouveau message.

    Est-ce possible?

    Merci d'avance!! Bisous! :love:
    Black Moon
    Black Moon
    FémininAge : 28Messages : 108

    Lun 17 Oct 2016 - 15:48

    Thanks
    Memorian
    Memorian
    FémininAge : 29Messages : 52

    Mar 18 Oct 2016 - 14:30

    merci <3
    Gouttou †
    Gouttou †
    FémininAge : 25Messages : 50

    Ven 21 Oct 2016 - 15:14

    Merci o/



    Faire des onglets en Javascript - Page 6 365666rrrrr
    Kanae
    Kanae
    FémininAge : 31Messages : 354

    Jeu 3 Nov 2016 - 6:50

    Merci beaucoup pour ce tutoriel !
    Avec un peu de chances, cela me permettra de concrétiser une chouette idée design et bien pratique !

    Cracklebones
    Cracklebones
    FémininAge : 21Messages : 7

    Dim 25 Déc 2016 - 23:55

    Merci beaucoup !
    Pauli
    Pauli
    FémininAge : 30Messages : 22

    Mar 27 Déc 2016 - 18:07

    Merciii beaucoup Very Happy
    catkiller
    catkiller
    FémininAge : 29Messages : 70

    Sam 21 Jan 2017 - 22:10

    merci !
    M.O
    M.O
    MasculinAge : 34Messages : 51

    Lun 23 Jan 2017 - 20:24

    Merci!
    OptimaluS
    OptimaluS
    MasculinAge : 40Messages : 6

    Mer 25 Jan 2017 - 13:29

    Super tutoriel cheers
    Cez
    Cez
    FémininAge : 27Messages : 17

    Jeu 26 Jan 2017 - 5:50

    merci !
    Artchie
    Artchie
    FémininAge : 32Messages : 43

    Ven 10 Fév 2017 - 0:37

    Merci :hug:
    Saroush
    Saroush
    FémininAge : 24Messages : 6

    Ven 17 Fév 2017 - 21:20

    merci !
    Adélaïde.D.L
    Adélaïde.D.L
    FémininAge : 35Messages : 39

    Mar 18 Avr 2017 - 11:38

    très intéressant merci



    Faire des onglets en Javascript - Page 6 Pxox
    Mordred Ghost
    Mordred Ghost
    FémininAge : 37Messages : 74

    Mer 1 Juil 2020 - 12:58

    Merci beaucoup ! Je viens de tester en l'appliquant sur une construction de fiche perso. Ca fonctionne en local ou en iframe.
    Là où je suis embêtée c'est que le JS ne fonctionne pas quand je poste mon code dans un sujet. J'ai beau avoir mis le JS dans l'admin du fofo avec tous les autres. J'ai dû merdouiller quelque part. J'vais continuer de me creuser la tête. Je me connais c'est encore une bricole.
    Contenu sponsorisé


      La date/heure actuelle est Ven 29 Mar 2024 - 6:16