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 à ne pas rater :
Pokémon EV8.5 : coffret Collection Classeur Évolutions Prismatiques
Voir le deal

    Affichage des catégories grâce à un jeu d'onglets [MAJ : 01/07/15]

    vic_le_faucheur
    vic_le_faucheur
    MasculinAge : 30Messages : 764

    Mar 30 Mar 2010 - 9:43

    Rappel du premier message :





    Vic n'est plus présent sur le forum et ne peut plus répondre à vos questions. Postez dans la rubrique "problème en codage" si vous voulez de l'aide.


    1) Présentation :

    Bonjours à tous,
    Dans ce tutoriel, nous allons apprendre à afficher nos catégories à l'aide d'onglets.

    Pour commencer, voici quelques exemples d'application de ce tutoriel, histoire de vous donner quelques idées :
    Voir un résultat sur forumactif.
    Voir un deuxième résultat sur forumactif.
    Voici un résultat plus complexe sur un site .


    Mon but n'est pas uniquement de vous fournir un code à modifier, mais aussi d'essayer de vous faire comprendre comment il fonctionne.
    J'ai donc mis à la disposition de tous les courageux, des explications plus complètes cachées sous des spoiler.


    Pourquoi utiliser un système d'onglets ?

    Quand un utilisateur possède plusieurs contenus, il peut souhaiter en afficher un à la fois. (Pour prendre moins de place par exemple)
    Pour ce faire, il existe plusieurs solutions, dont utiliser des onglets. Ils ont l'avantage d'être faciles à mettre en place et faciles à utiliser.
    C'est pourquoi je les ai choisis pour ce tutoriel.


    Comment fonctionne ce système ?

    Explications:





    2) Le HTML :

    Afin de pouvoir mettre en place ce système, il vous faut au préalable choisir de séparer les catégories. Pour cela, vous devez aller à cet endroit :
    Panneau d'administration > Affichage > Page d'accueil > Structure et hiérarchie

    Choisissez l'un des trois formats dans "Séparer les catégories sur l'index"

    Pourquoi est-ce nécessaire ?
    Si l'on utilisait l'un des trois autres formats, les catégories feraient partie d'un même bloc. Elles formeraient donc un unique contenu, ce qui n'est pas ce que nous souhaitons.
    Le format que l'on vient de choisir, nous permet de séparer les catégories. Elles formeront donc chacune un contenu que nous pourrons choisir d'afficher ou non.


    Modifications du template
    Maintenant, nous allons modifier le template des catégories (index_box) afin d'ajouter nos onglets. Pour cela, nous allons aller à cet endroit :
    Panneau d'administration > Affichage > Templates > Général > Index_Box

    Pour vous faciliter la tâche, un générateur d'onglets a été mis au point : Générateur d'onglets (Fait par Onyx pour remplacer celui de Vic qui ne fonctionnait plus).

    Modifications avec le générateur d'onglets :
    Modifications avec le générateur:

    Modifications manuelles (sans le générateur d'onglets) :
    Modifications manuelles:





    3) Le Javascript :

    Vous allez voir c'est assez rapide. Rendez vous à la page de gestion du Javascript en vous rendant à cet endroit :
    Panneau d'administration > Modules > HTML et Javascript > Gestion des codes Javascript

    - Activez la gestion des codes Javascript (cliquez sur "oui", puis sur "enregistrer");
    - Cliquez sur "créer un nouveau Javascript";
    - Mettez un titre ("Catégorie en onglets" par exemple);
    - Vérifiez bien que seule la case "sur l'index" est cochée;
    - Copiez le code suivant dans la partie "code Javascript".

    Code:
    $('document').ready(function()
     {
      if($('.categorievo').size() > 1)
        {
     $('#conteneur_ongletsvo').css( 'display' , 'block' );
     $('#conteneur_ongletsvo .ongletvo').click(function()
     {
     change_categorie( $('.ongletvo', '#conteneur_ongletsvo').index( this ) )
     });
     
     $('.ongletvo:eq(0)').click();
    }
     });

     function change_categorie( index )
     {
     if( $('.categorievo:eq(' + index + ')').size() != 0 )
     {

     $('.categorievo').css( 'display' , 'none' );
     $('.categorievo:eq(' + index + ')').fadeIn( 500 );
     
     $('.ongletvo.actif').removeClass('actif');
     $('.ongletvo:eq('+ index +')').addClass('actif');
     }
     else alert('Vous ne pouvez pas accéder à cette catégorie');
     }

    Et voilà !

    Explications:





    4) Le CSS :

    Allez, c'est la dernière ligne droite. Pour trouver votre CSS, suivez ce chemin :
    Panneau d'administration > Affichage > Images et couleurs > Couleurs > Feuilles de styles CSS

    Insérez y le code suivant :
    Code:
    /*Conteneur qui contient toutes les catégories */
    #conteneur_categoriesvo {
    }
    /* Conteneur de chaque catégorie */
     .categorievo {
    }
    /* Conteneur de tous les onglets */
    #conteneur_ongletsvo {
      display: none;
    }
    /* Un onglet */
    .ongletvo{
      cursor: pointer;
    }
    /* Onglet actif */
    .actif{
      color: darkred;
    }

    Il ne contient que le strict minimum et la liste de toutes les classes disponibles.
    Il n'y a pas grand chose, mais je pense que vous pourrez trouver tout seul ce que vous souhaitez faire sur ce forum ou sur google.

    N'hésitez pas à demander de l'aide dans la section adéquate ^^

    Voilà, c'est terminé. J'espère que ce tutoriel vous aura aidé ~


    Vos commentaires et remerciements sont toujours bienvenus ^^
    Si vous avez des problèmes avec ce LS, venez poster ici.


    Dernière édition par vic_le_faucheur le Mar 25 Sep 2012 - 9:21, édité 142 fois

    Smikyou
    Smikyou
    FémininAge : 31Messages : 85

    Dim 20 Mar 2016 - 14:26

    ty
    Marion Navi
    Marion Navi
    FémininAge : 30Messages : 183

    Dim 27 Mar 2016 - 23:19

    merci
    Ansuz
    Ansuz
    MasculinAge : 34Messages : 55

    Mer 13 Avr 2016 - 16:26

    Merci ~ ♥
    Litonya
    Litonya
    FémininAge : 23Messages : 149

    Lun 6 Juin 2016 - 22:15

    Michi !
    Kabrina Lestrange
    Kabrina Lestrange
    FémininAge : 36Messages : 71

    Lun 13 Juin 2016 - 1:23

    Bonjour!

    J'aurais une petite question. J'ai suivis le tutoriel et il fonctionne à merveille! :)
    Je me demandais s'il est possible de faire afficher les onglets sur toutes les pages? Par exemple lorsque je vais dans un sous-forum les onglets ne sont plus affiché, ce qui empêche de naviguer entre les sections.

    Merci d'avance et bonne journée!
    Bzzzz
    Bzzzz
    FémininAge : 40Messages : 93

    Dim 19 Juin 2016 - 18:07

    Merci beaucoup
    NanoiHime
    NanoiHime
    FémininAge : 26Messages : 566

    Lun 15 Aoû 2016 - 1:11

    mercii



    NanoiHime
    NanoiHime
    FémininAge : 26Messages : 566

    Lun 15 Aoû 2016 - 1:12

    mercii



    P'tite
    P'tite
    FémininAge : 26Messages : 26

    Ven 2 Sep 2016 - 20:33


    Je l'ai enfin trouver, celui-là ! Je te remercie de ce partage^^
    RozenBreizh
    RozenBreizh
    FémininAge : 33Messages : 1411

    Dim 23 Oct 2016 - 19:29

    Merci pour ce tuto. :)
    Anonymous
    Invité

    Dim 30 Oct 2016 - 14:38

    Merci Very Happy je vais essayer cela... curiosité quand tu nous tient :p
    Lorris
    Lorris
    MasculinAge : 26Messages : 32

    Jeu 15 Déc 2016 - 18:34

    Merci (:
    Nocturne
    Nocturne
    FémininAge : 34Messages : 24

    Ven 20 Jan 2017 - 12:08

    Merci ! :]
    .sapphire
    .sapphire
    FémininAge : 30Messages : 39

    Mar 14 Mar 2017 - 1:18

    Merci pour le tuto !
    Heine06
    Heine06
    FémininAge : 44Messages : 57

    Sam 15 Juil 2017 - 23:48

    merci pour le tuto !
    Kadence
    Kadence
    FémininAge : 43Messages : 58

    Dim 29 Oct 2017 - 19:45

    Merci Wink
    Chevalier Oignon
    Chevalier Oignon
    MasculinAge : 34Messages : 60

    Sam 10 Mar 2018 - 1:33

    merci bien !!
    Littleelda
    Littleelda
    FémininAge : 34Messages : 49

    Sam 22 Déc 2018 - 21:00

    merci =)



    Affichage des catégories grâce à un jeu d'onglets [MAJ : 01/07/15] - Page 5 Elora_10
    Lauranna
    Lauranna
    FémininAge : 35Messages : 30

    Jeu 18 Avr 2019 - 22:05

    Merci pour ce tutoriel!

    Il y a un ou deux ans, j'avais suivi un tutoriel pour aboutir au même résultat... Mais je sais plus comment, je pouvais différentier les boutons en fonction de s'il y avait un nouveau message dans la catégorie ou non. Est-ce que vous sauriez comment retomber sur ce résultat?

    Je vous remercie pour votre code.
    Cath Graph
    Cath Graph
    FémininAge : 60Messages : 26

    Dim 23 Juin 2019 - 22:30

    Super, merci



    Affichage des catégories grâce à un jeu d'onglets [MAJ : 01/07/15] - Page 5 Signat10
    Elyade
    Elyade
    FémininAge : 39Messages : 53

    Sam 9 Mai 2020 - 13:39

    Merci bien pour ce partage très utile ! :love:
    Baylee Hamilton
    Baylee Hamilton
    FémininAge : 29Messages : 69

    Ven 28 Aoû 2020 - 9:51

    Merci pour le partage dommage que je ne suis pas aussi talentueuse pour parvenir a un résultat même avec le générateur de code car cela me dit erreur.
    P'tit loup
    P'tit loup
    MasculinAge : 42Messages : 451

    Lun 19 Juil 2021 - 15:37

    Merci ^^



    Affichage des catégories grâce à un jeu d'onglets [MAJ : 01/07/15] - Page 5 30xivrd
    Shaolan
    Shaolan
    MasculinAge : 33Messages : 121

    Dim 20 Fév 2022 - 15:03

    Magnifique tuto est codage qui fonctionne à merveille !

    J'aurai juste une petite question concernant la transition d'affichage du contenue des onglets.
    J'aurai voulu savoir s'il est possible de faire une "apparition/transition" en balayage, du genre que la contenue "glisse" dans une direction pour laisser place à l'autre contenue. (dans mon cas, je souhaiterai faire un balayage vers le haut)

    -on click sur onglet 2, contenue 1 glisser vers le haut, contenue 2 glisse vers le haut pour prendre place. et ainsi de suite :3

    Je ne vois pas du tout comment faire et je but dessus depuis plusieurs jours ><
    сhampi
    сhampi
    FémininAge : 26Messages : 151

    Mer 20 Avr 2022 - 16:31

    Un très grand merci pour votre tutoriel :)
    Contenu sponsorisé


      La date/heure actuelle est Jeu 12 Déc 2024 - 9:49