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.


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

    vic_le_faucheur
    vic_le_faucheur
    MasculinAge : 28Messages : 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

    Hotage
    Hotage
    MasculinAge : 31Messages : 23

    Mar 22 Juin 2010 - 12:46

    je ne suis pas sûr de comprendre enfait :/ parce que dans l'idée j'aurais voulu une image active, et une image non active de chaque onglet... J'entend apr là, une image pour l'onglet (exemple) Général, active et non active, une image pour un autre onglet, activer pas active, etc... Comment je fais pour faire qu'au lieu du texte de chaque onglet ce soit une une image différente qui change en rollover?

    Chui désolé je suis pas très clair... C'est juste que je comprend pas tout: CSS j'ai jamais fait, et javascript c'est vraiment pas ça nomplus...

    EDIT:

    Comment je fais aussi pour espacer mes onglets entre eux? :/

    (chui désolé chui vraiment une emrde en css.. >_>)
    Sui'
    Sui'
    MasculinAge : 30Messages : 1865

    Mar 22 Juin 2010 - 13:24

    Tu sais pas lire ou quoi x), pour tout problème de code/ script tu vas la:

    https://www.never-utopia.com/avec-un-code-script-f99/

    Merci d'avance.

    Edit: Va te présenter avant toute demande d'aide s'il te plait.



    Merci beaucoup Woo pour ce kit *-*
    Affichage des catégories grâce à un jeu d'onglets [MAJ : 01/07/15] - Page 3 657955SignatureSuicopie
    Sui' Art's
    Hotage
    Hotage
    MasculinAge : 31Messages : 23

    Mar 22 Juin 2010 - 17:20

    Scusez moi :/ j'y vais de ce pas, désolé d'embêter le monde ^^'

    (les suisses sont lents à la détente...)
    avatar
    Nardco
    MasculinAge : 61Messages : 82

    Mar 6 Mai 2014 - 15:07

    Merci !!
    Lilihir
    Lilihir
    FémininAge : 24Messages : 14

    Mar 6 Mai 2014 - 22:42

    Merci beaucoup pour ton tutoriel !
    NyoTheNeko
    NyoTheNeko
    FémininAge : 28Messages : 5686

    Ven 9 Mai 2014 - 22:11

    Je le cherchais! \o/
    Super merci!



    Snapforum
    Snapforum
    MasculinAge : 35Messages : 23

    Lun 7 Juil 2014 - 13:43

    Merci !!! :)
    Kinjiro
    Kinjiro
    MasculinAge : 23Messages : 80

    Mer 23 Juil 2014 - 15:27

    merci



    Affichage des catégories grâce à un jeu d'onglets [MAJ : 01/07/15] - Page 3 Signau11
    Zoé
    Zoé
    FémininAge : 23Messages : 189

    Ven 25 Juil 2014 - 14:44

    merci :3



    Affichage des catégories grâce à un jeu d'onglets [MAJ : 01/07/15] - Page 3 274643signaaaa
    Ysamar
    Ysamar
    FémininAge : 43Messages : 37

    Ven 1 Aoû 2014 - 17:44

    merci
    Banpaia
    Banpaia
    FémininAge : 25Messages : 130

    Sam 2 Aoû 2014 - 17:02

    Merci !
    Takchou
    Takchou
    MasculinAge : 25Messages : 1

    Mer 20 Aoû 2014 - 12:01

    Ne fonctionne pas chez moi malheureusement..
    Laora || Peter
    Laora || Peter
    FémininAge : 31Messages : 182

    Jeu 11 Sep 2014 - 19:21

    Merci pour le tuto o/



    Affichage des catégories grâce à un jeu d'onglets [MAJ : 01/07/15] - Page 3 1393066044-signaturenu2
    Manue
    Manue
    FémininAge : 42Messages : 58

    Jeu 30 Oct 2014 - 19:16

    Merci beaucoup !!!

    Voila un rendu si cela t'intéresse toujours ! Il est fait avec des images pour les onglets
    https://www.never-utopia.com/t49634-categories-en-onglets-et-arrondis
    Mom's Heart
    Mom's Heart
    MasculinAge : 28Messages : 15

    Mar 2 Déc 2014 - 13:03

    Merci beaucoup ^^
    Nanachu ♥
    Nanachu ♥
    FémininAge : 25Messages : 108

    Jeu 4 Déc 2014 - 9:58

    Merci beaucoup ♥
    Rosaline
    Rosaline
    FémininAge : 32Messages : 50

    Lun 8 Déc 2014 - 13:24

    Merci pour le partage! Cependant le générateur de codes ne fonctionne plus (je ne sais pas si cela vient de mon ordinateur...) : /



    JE SOUTIENS
    Feathers of Fate
    Xperience
    Xperience
    FémininAge : 26Messages : 156

    Mar 9 Déc 2014 - 21:47

    Non, effectivement, le générateur ne fonctionne plus. :/



    Affichage des catégories grâce à un jeu d'onglets [MAJ : 01/07/15] - Page 3 1453390429-tumblr-lv1fbrkxzh1qlnpia
    Okashi
    Okashi
    FémininAge : 22Messages : 30

    Mar 9 Déc 2014 - 21:57

    Merci :)
    Asmareth
    Asmareth
    FémininAge : 35Messages : 123

    Jeu 25 Déc 2014 - 21:19

    merci ! :)
    mace
    mace
    MasculinAge : 32Messages : 15

    Ven 20 Fév 2015 - 23:47

    Merci, je m'empresse d'essayer cela.
    FlipFlap
    FlipFlap
    FémininAge : 39Messages : 59

    Sam 21 Fév 2015 - 18:32

    Bonjour

    Alors voilà ce que ça donne http://testemoi.forumactif.org/

    néanmoins, je n'arrive pas à mettre les images de Nouv/pas nouv et les img descr non plus! Si quelqu'un peut m'expliquer ce serait top!
    Professeur Felyne
    Professeur Felyne
    MasculinAge : 36Messages : 85

    Dim 8 Mar 2015 - 23:58

    Merci

    Par contre, le lien vers le "générateur de code" est mort ^^"



    .
    Morrigan
    Morrigan
    FémininAge : 29Messages : 22

    Dim 15 Mar 2015 - 18:30

    Merci beaucoup pour ce tutoriel!
    Amacky
    Amacky
    FémininAge : 30Messages : 135

    Mar 21 Avr 2015 - 10:45

    Je vais tester :)
    Contenu sponsorisé


      La date/heure actuelle est Dim 27 Nov 2022 - 0:35