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 :
Nike : 25% de remise sur tout le site via l’application
Voir le deal

    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

    avatar
    fascicularia
    MasculinAge : 54Messages : 189

    Dim 9 Mai 2010 - 14:06

    Voila qui m'intéresse. Vic comment peut on accéder à ce générateur.
    vic_le_faucheur
    vic_le_faucheur
    MasculinAge : 28Messages : 764

    Mer 12 Mai 2010 - 14:40

    alors je viens de m'apercevoir que le site que je voulais vous donner ne peux pas encore être accessible au public.
    sinon je suis désolé mais j'ai malencontreusement supprimer tout mes MP.
    du coup je n'ai plus aucun nom ni rien. renvoyez moi un message afin que je puisse de nouveau vous aider.

    désolé

    Lâtre
    Lâtre
    MasculinAge : 111Messages : 82

    Dim 16 Mai 2010 - 22:38

    Euuh j'ai tout fait comme tu dis mais c'est normal que rien ne change? eh?
    vic_le_faucheur
    vic_le_faucheur
    MasculinAge : 28Messages : 764

    Lun 17 Mai 2010 - 17:12

    tu pourrais mettre un lien vers ton forum ??

    merci

    Lâtre
    Lâtre
    MasculinAge : 111Messages : 82

    Lun 17 Mai 2010 - 17:13

    Je fais sur un forum que j'ai créer pour des tests de codage.

    http://legendarynaruto.forum-actif.eu/forum.htm
    vic_le_faucheur
    vic_le_faucheur
    MasculinAge : 28Messages : 764

    Lun 17 Mai 2010 - 20:56

    d'accord je vois si tu veux passe moi ton pseudo et ton mdp par mp

    Lâtre
    Lâtre
    MasculinAge : 111Messages : 82

    Lun 17 Mai 2010 - 21:01

    Je ne suis pas accorder a envoyer des messages pour le moment mais je suis aussi inscrit sur le forum dont tu a mis l'exemple si tu y es dis le moi et je te passe le tout dessus. ^^

    Merci d'avance
    vic_le_faucheur
    vic_le_faucheur
    MasculinAge : 28Messages : 764

    Mar 18 Mai 2010 - 18:37

    d'accord ba envoie le à leck demonis

    vic_le_faucheur
    vic_le_faucheur
    MasculinAge : 28Messages : 764

    Mer 19 Mai 2010 - 13:09

    petite edit j'ai trouver une façon très très fluide pour mettre les onglets.
    http://babacool-test.bbactif.com/index.htm

    il vous suffit de remplacer la ligne
    Code:
     document.getElementById(nom_cat[numero]).style.display = 'block';
    (qui est la deuxième ligne de la fonction change_cat par
    Code:
    $('#'+nom_cat[numero]).fadeIn();

    il vous faudra charger au préalable la bibliotèque jquery grâce à ce lien que vous mettrez dans le template de haut de forum entre les head
    Code:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

    Slash
    Slash
    MasculinAge : 28Messages : 80

    Ven 21 Mai 2010 - 17:05

    Merci du partage Vic

    J'ai quelque problème avec le code, dès que j'ai fini de changer le Template et que je confirme, on me met : La balise a été fermée avant d'avoir été ouverte ou la balise n'a pas été ouverte.

    Cela me perturbe un peu car j'ai fait comme dit dans ton tuto, alors je vois pas d'où vient le problème. Pourrais-tu m'aider ?



    Affichage des catégories grâce à un jeu d'onglets [MAJ : 01/07/15] - Page 2 Bird10
    vic_le_faucheur
    vic_le_faucheur
    MasculinAge : 28Messages : 764

    Ven 21 Mai 2010 - 17:27

    ouais ça me le fait aussi le mieux c'est de refaire le code comme ça il n'y a plus de problème
    un petit lien pour que tu n'ai pas tout à refaire !

    http://toutsurlinformatique.zxq.net/onglets.html

    voilà !

    Slash
    Slash
    MasculinAge : 28Messages : 80

    Ven 21 Mai 2010 - 17:34

    Que dire ? C'est Magnifique. Je te remercie Vic, maintenant à moi de jouer si je veux leur donner une autre forme Wink

    Encore une fois, Merci :frtrt:



    Affichage des catégories grâce à un jeu d'onglets [MAJ : 01/07/15] - Page 2 Bird10
    vic_le_faucheur
    vic_le_faucheur
    MasculinAge : 28Messages : 764

    Sam 22 Mai 2010 - 21:36

    bah si tu veux je peux t'aider à faire un design aux onglets

    Slash
    Slash
    MasculinAge : 28Messages : 80

    Sam 22 Mai 2010 - 21:46

    Bah, j'accepte ton aide Vic. Je te demanderais de l'aide si je bloque quelque part. A moins que tu es quelque chose à me proposer.

    Enfin, serais-tu faire un système d'onglet dans la page d'accueil ?



    Affichage des catégories grâce à un jeu d'onglets [MAJ : 01/07/15] - Page 2 Bird10
    vic_le_faucheur
    vic_le_faucheur
    MasculinAge : 28Messages : 764

    Dim 23 Mai 2010 - 10:19

    c'est à dire un autre système par exemple pour afficher differents contenus (autre que des categories) ?
    si c'est ça je peux le faire.

    mais bon si tu veux on se parle sur msn se sera plus pratique ^^

    je t'envoie mon adresse.

    vic_le_faucheur
    vic_le_faucheur
    MasculinAge : 28Messages : 764

    Mar 25 Mai 2010 - 8:55

    voilà j'ai mis de l'ordre dans le tuto, que je vais pouvoir mettre à jour petit à petit.
    vous n'aurez plus à chercher de partout !

    Sparrow-style
    Sparrow-style
    FémininAge : 37Messages : 32055

    Mar 25 Mai 2010 - 17:05

    Terrible le générateur ! Merci Vic Wink

    (J'ai élargis les spoiler du coup, j'avais pas compris ton MP sur le moment, ça a été plus clair en voyant le message ici Razz)



    sign
    vic_le_faucheur
    vic_le_faucheur
    MasculinAge : 28Messages : 764

    Mar 25 Mai 2010 - 18:37

    merci

    Monkey D Luffy
    Monkey D Luffy
    MasculinAge : 29Messages : 361

    Ven 28 Mai 2010 - 17:34

    Merci c'est beaucoup plus simple comme ça Wink Mais comment fait-on pour changer l'apparence des onglets ?? Je ne sais pas non plus ou placer le dernier code que tu as donner : Celui qui fait mettre en "haut de page".

    Edit : Je n'arrive pas à séparer mes onglets, il reste collé entre eux -_-"



    Affichage des catégories grâce à un jeu d'onglets [MAJ : 01/07/15] - Page 2 090822110057379954
    Kit By Lovely ! Merchi !!

    | One Piece. Shin Jidai. |
    vic_le_faucheur
    vic_le_faucheur
    MasculinAge : 28Messages : 764

    Ven 28 Mai 2010 - 21:14

    ba MP moi ton adresse msn on se parlera dessus.
    il faudra que je propose un générateur css ^^

    juste pour savoir as tu jouer à warcraft 3 dans un clan par hasard ??

    Monkey D Luffy
    Monkey D Luffy
    MasculinAge : 29Messages : 361

    Ven 28 Mai 2010 - 22:05

    envoyé Wink



    Affichage des catégories grâce à un jeu d'onglets [MAJ : 01/07/15] - Page 2 090822110057379954
    Kit By Lovely ! Merchi !!

    | One Piece. Shin Jidai. |
    Hotage
    Hotage
    MasculinAge : 31Messages : 23

    Lun 21 Juin 2010 - 23:09

    EDIT:

    J'ai utiliser le concepteur automatique d'onglet sur mon site:

    jetestmesthemes.forumactif.com

    Par contre je ne comprend pas, le css m'affiche un message d'ereur. Et de plus je ne sais aps comment rempalcer le text de mes onglets par des images: enfait je ne comprends pas grand chsoe au css, et c'est très embêtant...

    le message d'erreur de mon css:

    "Erreur détectée
    Nous avons compté un nombre impaire de guillemets
    donc une chaine est mal fermée. Cela signifie que votre CSS risque de ne
    pas être valide et ne sera pas affiché correctement sur votre forum.

    Nous
    vous conseillons de relire votre code."

    Voici mon code!

    Spoiler:

    Chui désolé de venir vous embêter... j'ai juste pas tout compris à mon codeAffichage des catégories grâce à un jeu d'onglets [MAJ : 01/07/15] - Page 2 Icon_redface

    merci d'avance :)


    Dernière édition par Hotage le Mar 22 Juin 2010 - 0:09, édité 1 fois
    Sui'
    Sui'
    MasculinAge : 30Messages : 1865

    Lun 21 Juin 2010 - 23:55

    Je vois pas de guillemet en trop, tu es sur d'avoir fournis tout le CSS de ton forum?

    Sinon je te conseil d'aller dans la bonne section d'aide qui est Ici



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

    Mar 22 Juin 2010 - 0:09

    Oui j'ai fourni tout le code. J'irais voir demain soir sur ton lien: là je suis trop mort :/
    vic_le_faucheur
    vic_le_faucheur
    MasculinAge : 28Messages : 764

    Mar 22 Juin 2010 - 9:28

    oui alors c'est le seul bug que j'ai remarquer. il suffit normalement de le re-copier/coller afin qu'il enlève cette erreur (va savoir pourquoi elle se déclenche)

    sinon tu héberge une image et tu met dans ton css

    ou il y a
    Code:

    .onglet_actif
    {
    [...]
    background:url('URL DE TON IMAGE POUR ONGLET ACTIF');
    }

    .onglet_actif
    {
    [...]
    background:url('URL DE TON IMAGE POUR ONGLET NON ACTIF');
    }

    en espérant t'avoir aider !
    Contenu sponsorisé


      La date/heure actuelle est Sam 26 Nov 2022 - 23:49