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 :
Coffret Collection Poster Pokémon EV8.5 É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

    avatar
    Quinnie
    MasculinAge : 28Messages : 54

    Mar 28 Avr 2015 - 11:07

    Je vais essayer x)
    Misery Mind™
    Misery Mind™
    FémininAge : 33Messages : 153

    Ven 15 Mai 2015 - 10:08

    Merci !



    Klemmeria
    Klemmeria
    FémininAge : 24Messages : 147

    Mar 19 Mai 2015 - 20:51

    Oh merci ça marche!!!

    Du coup problème résolu et il n'y en aura pas de troisième x)



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

    Dim 24 Mai 2015 - 20:45

    merci pour ce tuto :3



    Chocolakato
    Chocolakato
    FémininAge : 34Messages : 837

    Lun 25 Mai 2015 - 19:26

    tack :)



    Kuro-ai
    Kuro-ai
    FémininAge : 30Messages : 18

    Lun 15 Juin 2015 - 18:38

    Bonsoir
    merci beaucoup cela m'a bien aider^^
    juste le code là:
    Code:
    $('#conteneur_categories').css( 'min-height' , $('.categorie:eq(' + index + ')').outerHeight() );
    fait un peu buger^^" (les catégories n'avaient justement pas la même place) en tous cas je l'ai retirer et tous va mieux °^° mais peut-être est-il obsolète?^^ (non non je ne suis pas la seule à avoir eu ce problème)
    Onyx
    Onyx
    FémininAge : 31Messages : 3350

    Mar 16 Juin 2015 - 3:29

    Hellow hellow, ce LS/tuto est justement en cours de révision ^^

    En plus de corriger un problème de balises fermées au mauvais endroit, je suis en train de recréer le générateur de code de A à Z (et ce truc me fait avoir des envies de meurtre, je le jure ><) et ce serait bien de trouver tous les bugs avant que je doive tout recommencer, j'avoue u_u

    Tu peux me dire quel effet le bug fait exactement? Sous quel navigateur, etc?



    Kuro-ai
    Kuro-ai
    FémininAge : 30Messages : 18

    Mar 16 Juin 2015 - 7:54

    je suis sous chrome
    et le bug était que:
    1 er onglet: mes catégories sont ont bon endroit
    2eme onglet: catégories un peu plus bas
    3eme onglet: catégorie encore un peu plus bas
    4eme onglet: même emplacement que le 3ème
    et c'est en cherchant mon problème que j'ai vu que quelqu'un sur le forum forumactif avait le même code et le même problème et que j'ai su quel code créait ça °-°
    je n'ai malheureusement pas de capture mais eux en avait:
    Ici
    Onyx
    Onyx
    FémininAge : 31Messages : 3350

    Mer 17 Juin 2015 - 2:57

    Merci, je vais regarder ça ^^

    En attendant, si quelqu'un me lit, j'en profite pour vous dire qu'un nouveau générateur sera bientôt en ligne \o/

    De plus, si vous suivez les instructions manuelles, faites attention, il y a deux erreurs dans le tuto qui seront corrigées bientôt :
    Dans le "Création des contenus", vous devez refermer votre "div" juste avant "END tablefoot", pas "END catrow".
    Dans le "Création du conteneur des catégories", vous devez refermer votre div juste après "END catrow", pas après "END tablefoot".



    Onyx
    Onyx
    FémininAge : 31Messages : 3350

    Sam 20 Juin 2015 - 4:32

    Edit : Désolée du double-post, j'avais oublié que j'avais déjà posté XD

    Je me poste ça pour m'en souvenir, c'est le tuto en cours de rerédaction Wink
    Tuto:


    Dernière édition par Onyx le Mer 1 Juil 2015 - 4:25, édité 7 fois



    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Sam 20 Juin 2015 - 11:54

    Ow, heureusement que j'ai vu ton message, j'allais commencer moi aussi un générateur de code pour ça (enfin bon... Ca fait des mois que j'ai 150 000 projets de code XD).
    Bon bah tant pis, j'en ferai un pour autre chose XD ! Bon courage pour le finaliser ♥ Hésite pas à le poster dans Work in Progress si tu veux un coup de main / avis / test à un moment

    Totalement HS Onyx, mais, dans ta signature je crois que tu as inversé 2 mots x) (un et ouvrir)

    Onyx
    Onyx
    FémininAge : 31Messages : 3350

    Mer 1 Juil 2015 - 4:24

    Héhéhé, je suis trop rapide *^*

    En fait, j'ai déjà demandé des avis, mais dans la zone couleur, c'est vrai que j'aurais pu demander dans le Work In Progress, surtout que la section est vide (si on exclus tout ceux qui ne devraient pas y être) u_u

    Et oui, il y avait une faute dans ma signature :siffle:





    Donc voilà, la correction du tutoriel est terminée, il suffit de remplacer le premier post en entier par le code ci-bas :



    A-Lice
    A-Lice
    FémininAge : 30Messages : 4939

    Mer 1 Juil 2015 - 10:42

    C'est nikel Onyx merci beaucoup (: Je re-déplace donc !

    TiGraou
    TiGraou
    MasculinAge : 31Messages : 243

    Mer 1 Juil 2015 - 14:11

    Bonjour!
    Merci pour la MAJ, n'étant pas doué en Javascript, j'aimerai savoir comment on fait pour afficher tout le forum.

    Par exemple:
    "Catégorie1" "catégorie2" "catégorie3" "toutleforum"

    Je vous remercie d'avance. ^^
    Hidema
    Hidema
    MasculinAge : 29Messages : 54

    Lun 6 Juil 2015 - 2:26

    Merci pour ce tutoriel. Wink
    poloch
    poloch
    MasculinAge : 30Messages : 109

    Mer 5 Aoû 2015 - 18:46

    Merci Very Happy



    Affichage des catégories grâce à un jeu d'onglets [MAJ : 01/07/15] - Page 4 Sans_t12
    Kirito
    Kirito
    MasculinAge : 28Messages : 209

    Lun 10 Aoû 2015 - 22:07

    Merci !!
    Anonymous
    Invité

    Lun 10 Aoû 2015 - 23:08

    Merci. \(T∇T)/
    Ombeline30
    Ombeline30
    FémininAge : 40Messages : 130

    Mer 12 Aoû 2015 - 11:03

    C'est superbe quel travail bravo !
    Kirito
    Kirito
    MasculinAge : 28Messages : 209

    Mer 12 Aoû 2015 - 19:10

    Merci infiniment
    Sanaito
    Sanaito
    FémininAge : 28Messages : 5

    Sam 29 Aoû 2015 - 21:29

    Merci de tout coeur pour ce tuto !
    patriciadpt30
    patriciadpt30
    FémininAge : 61Messages : 240

    Lun 28 Sep 2015 - 21:34

    Oh merci bien bonne semaine à vous :) .



    Patricia :)
    Anonymous
    Invité

    Ven 23 Oct 2015 - 21:11

    Merci beaucoup beaucoup beaucoup pour ce tuto Affichage des catégories grâce à un jeu d'onglets [MAJ : 01/07/15] - Page 4 2371822337
    Patdrue
    Patdrue
    FémininAge : 35Messages : 158

    Ven 13 Nov 2015 - 21:44

    Je vais essayer, merci en tout cas parce que je viens d'avoir une idée qui me fait avoir besoin pile de ce système ^^
    Wolund
    Wolund
    MasculinAge : 26Messages : 53

    Jeu 14 Jan 2016 - 15:59

    Merci pour me tuto!
    Contenu sponsorisé


      La date/heure actuelle est Ven 13 Déc 2024 - 17:18