Forum de référencement de vos bébés, petit trésor ou l'on ne se prend pas là tête et ou vous trouverez sans aucun doute une aide.
 

Partagez | 
 

 Tutoriel Tableau par onglets

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Chti Chatphardeur
Admin
avatar

Féminin Scorpion Chien Age : 35 Date d'inscription : 06/10/2011
Messages : 74
Localisation : Nord
Emploi/loisirs : Les forums et le PC sans oublier le country
Humeur : Bonne

MessageSujet: Tutoriel Tableau par onglets   Jeu 6 Oct - 12:57


Tutoriel
Tableau par Onglets
Tuto par : Le Chti Chatphardeur
Aperçut : http://yukiandyuui.forumactif.com/
Niveau : Moyen
Code : HTML / CSS / SCRIPT
.

Je vous le donne comme moi je l'utilse pour mes forums actuellement.
Après réflexion je vais vous donner avec mes codes moi. J'ouvrirais d'autres tutoriels pour vous expliquer comment créer une class et les codes que je connais. Puisque je ne les connais pas tous. En espérant que cela vous aide tout de même.

[justify]
  1. Première étape : Installer le tableau par onglet sur votre page d'accueil.

    Un tableau par onglet n'est pas un tableau du style : [table][tbody][td][tr] .... C'est une succession de liste et de "class".

    Voici le code pour un tableau à cinq onglets :
    Code:
    <div id="les_onglets">
        <ul><li id="o_1" class="onglet_selectionner" onclick="changeOnglet(this);">Onglet 1</li>
            <li id="o_2" class="onglet" onclick="changeOnglet(this);">Onglet 2</li>
            <li id="o_3" class="onglet" onclick="changeOnglet(this);">Onglet 3</li>
            <li id="o_4" class="onglet" onclick="changeOnglet(this);">Onglet 4</li>
            <li id="o_5" class="onglet" onclick="changeOnglet(this);">Onglet 5</li>
            </ul>
            <div class="clear"><div id="les_contenus">
        <div id="co_1" class="contenu">Exemple de tableau par onglet</div>
        <div id="co_2" class="contenu" style="display: none;">Mon contenu 2</div>
        <div id="co_3" class="contenu" style="display: none;">Mon contenu 3</div>
        <div id="co_4" class="contenu" style="display: none;">Mon contenu 4</div>
        <div id="co_5" class="contenu" style="display: none;">Mon contenu 5</div>
    </div></div></div>
    Cela va vous donner un résulta comme ci-dessous.
    Spoiler:
     
    1. Ajouter ou retiré un onglet :
      Pour cela il faut repérer la liste des onglets.
      Code:
      <ul>.......</ul>
      Est, ce qui contient la lui des onglets.
      Les éléments de la liste sont représentés pas ceci :
      Code:
      <li id="o_2" class="onglet" onclick="changeOnglet(this);">Onglet 2</li>
      Le chiffre de id=o_? étant la position de l'onglet, pour le premier onglet ce sera donc 1, le second 2 et ainsi de suite. Le code ci-dessus indique donc que ceci est l'onglet 2. Dans le code tableau par onglet que je vous aie donné, je vous aie indiquée que nous avions cinq onglets, pour supprimer, effacer le ou les onglets en trop. Pour en ajouter, il vous suffit d'ajouter de nouveaux éléments de liste. Avec le numéros correspondant l'onglet.

    2. Ajouter ou supprimer un contenu :
      Maintenant que nous avons supprimé ou ajouté des onglets. Il nous faut nous occuper du contenu de ses onglets. Le contenu est représenté par une "class" dont le code est :
      Code:
      <div id="co_1" class="contenu">Exemple de tableau par onglet</div>
      Le chiffre de la partie id="co_?" correspond à l'onglet auquel appartient le contenu. S'il appartient à l'onglet 1 ce sera 1, à l'onglet 2 ce sera 2 et ainsi de suite.
      Il est identique pour tous les onglets, comme pour les onglets. Supprimer ou ajouter une "class" pour que le nombre d'onglets, corresponde au nombre de "class".



Dernière édition par Chti Chatphardeur le Sam 15 Oct - 14:00, édité 3 fois
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://le-chti-chatphardeur.forumgratuit.org
Chti Chatphardeur
Admin
avatar

Féminin Scorpion Chien Age : 35 Date d'inscription : 06/10/2011
Messages : 74
Localisation : Nord
Emploi/loisirs : Les forums et le PC sans oublier le country
Humeur : Bonne

MessageSujet: Re: Tutoriel Tableau par onglets   Jeu 6 Oct - 12:57


Tutoriel
Tableau par Onglets
Tuto par : Le Chti Chatpphardeur
Aperçut : http://yukiandyuui.forumactif.com/
Niveau : Moyen
Code : HTML / CSS / SCRIPT
.


  • Seconde étape : Mise en forme du tableau en CSS.
    Voici le code de ma mise en forme telle que sur l'exemple sur le forum suivant : http://yukiandyuui.forumactif.com/
    Le code est à copier/coller dans le CSS.
    Panneau d'administration >> Affichage >> Images et Couleurs >> Couleurs >> Feuille de style CSS
    Code:
    .onglet{
      float: left;
      padding: 2px;
      margin-right: 4px;
      margin-bottom: -1px;
      color: #000;
      background: #ffffff;
      border: 1px solid #000000;
      cursor: pointer;
      width: 18%;
      list-style: none;}
       
    .onglet_selectionner{
      float: left;
      padding: 2px;
      margin-right: 4px;
      margin-bottom: -1px;
      color: #000;
      background: #ffffff;
      border-top: 1px solid #000000;
      border-right: 1px solid #000000;
      border-left: 1px solid #000000;
      border-bottom: none !important;
      cursor: pointer;
      width: 18%;
      list-style: none;}

    .onglet:hover{
      background: #9C1C56;}
           
    .clear{
      clear: both;}

    .contenu{
      color: #000;
      background: #ffffff;
      border: 1px solid #000000;
      padding: 10px;
      list-style: none;}

    #les_contenus, #les_onglets{
      width: 100%;}
    Voici un aperçut en image :
    Spoiler:
     
    Voyons en détail les parties du code principal. Vous pouvez bien sûr tout modifier à votre guise.
    1. color: #000; => Vous permet de modifier la couleur d'écriture. Attention ici vous n'avez que trous chiffres. Mais il vous en faut six, ici il n'y en a que trois pour ne pas modifier la couleur et garder celle du forum.
    2. background: #ffffff; => pour la couleur de fond
    3. border: 1px solid #000000; => 1pix épaisseur de l'encadrement / solid dit que la ligne d'encadrement et continu / #000000 est la couleur
      C'est la même chose pour : border-top / border-right / border-left
    4. width: 000%; => La longueur de l'onglet en pourcentage ou du contenu



Dernière édition par Chti Chatphardeur le Sam 15 Oct - 14:00, édité 2 fois
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://le-chti-chatphardeur.forumgratuit.org
Chti Chatphardeur
Admin
avatar

Féminin Scorpion Chien Age : 35 Date d'inscription : 06/10/2011
Messages : 74
Localisation : Nord
Emploi/loisirs : Les forums et le PC sans oublier le country
Humeur : Bonne

MessageSujet: Re: Tutoriel Tableau par onglets   Jeu 6 Oct - 12:58


Tutoriel
Tableau par Onglets
Tuto par : Le Chti Chatphardeur
Aperçut : http://yukiandyuui.forumactif.com/
Niveau : Moyen
Code : HTML / CSS / SCRIPT
.



  • Troisième étape : Créer une page HTML avec le script.
    Le code ci-dessous est à copier/coller. Pour cela aller dans le Panneau d'administration, pour créer une page HTML.
    Modules / HTML / Gestion des pages HTML.
    Cocher à :
    Voulez-vous utiliser le haut et le bas de page de votre forum ? NON
    Utiliser cette page en tant que page d'accueil ? NON
    Voici le code :
    Code:
    function changeOnglet(_this){
        var getOnglets    = document.getElementById('les_onglets').getElementsByTagName('li');
        for(var i = 0; i < getOnglets.length; i++){
            if(getOnglets[i].id){
                if(getOnglets[i].id == _this.id){
                    getOnglets[i].className = 'onglet_selectionner';
                    document.getElementById('c' + _this.id).style.display            = 'block';
                }
                else{
                    getOnglets[i].className = 'onglet';
                    document.getElementById('c' + getOnglets[i].id).style.display    = 'none';
                }
            }
        }       
    }
    Valider la page, puis copier/coller l'adresse url de la page.
  • Dernière étape : Installer le code script pour que le tableau fonctionne.
    Voici le code qu'il vous faut ajouter avant le code du tableau par onglet, avant
    Code:
    <script src="URL de la page HTML"></script>
    Voilà votre tableau par onglet est près.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://le-chti-chatphardeur.forumgratuit.org
Chti Chatphardeur
Admin
avatar

Féminin Scorpion Chien Age : 35 Date d'inscription : 06/10/2011
Messages : 74
Localisation : Nord
Emploi/loisirs : Les forums et le PC sans oublier le country
Humeur : Bonne

MessageSujet: Re: Tutoriel Tableau par onglets   Mar 18 Oct - 19:01


Tutoriel
Tableau par Onglets
VERSION 2 de la troisième étape.
UTILISANT MODULE - GESTION JAVASCRIPT
Plus simple que la première Version.
.



  • Troisième étape : Rendez vous dans votre panneau d’administration >> Modules >> HTML & JAVASCRIPT >> Gestion des codes Javascript.
    Créer un nouveau Javascript, donner le titre que vous voulez, laissez cocher Sur l'index.
    Le code ci-dessous est à copier/coller dans le l'engader.
    Voici le code :
    Code:
    function changeOnglet(_this){
        var getOnglets    = document.getElementById('les_onglets').getElementsByTagName('li');
        for(var i = 0; i < getOnglets.length; i++){
            if(getOnglets[i].id){
                if(getOnglets[i].id == _this.id){
                    getOnglets[i].className = 'onglet_selectionner';
                    document.getElementById('c' + _this.id).style.display            = 'block';
                }
                else{
                    getOnglets[i].className = 'onglet';
                    document.getElementById('c' + getOnglets[i].id).style.display    = 'none';
                }
            }
        }       
    }
    Valider et voilà votre tableau est terminé et actif.


Dernière édition par Chti Chatphardeur le Mar 18 Oct - 19:17, édité 1 fois
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://le-chti-chatphardeur.forumgratuit.org
Invité
Invité



MessageSujet: Re: Tutoriel Tableau par onglets   Mar 18 Oct - 19:04

Bon !

J'ai mis ça dans généralité :

Code:
<div id="les_onglets">
    <ul><li id="o_1" class="onglet_selectionner" onclick="changeOnglet(this);">Accueil</li>
        <li id="o_2" class="onglet" onclick="changeOnglet(this);">Team Staff</li>
        <li id="o_3" class="onglet" onclick="changeOnglet(this);">Personnages Prédéfinis</li>
        <li id="o_4" class="onglet" onclick="changeOnglet(this);">Contexte</li>
        <li id="o_5" class="onglet" onclick="changeOnglet(this);">Les Crédits</li>
        </ul>
        <div class="clear"><div id="les_contenus">
    <div id="co_1" class="contenu">Accueil ++++
</div>
    <div id="co_2" class="contenu" style="display: none;">Staff +++</div>
    <div id="co_3" class="contenu" style="display: none;">Mon contenu 3</div>
    <div id="co_4" class="contenu" style="display: none;">Mon contenu 4</div>
    <div id="co_5" class="contenu" style="display: none;">Mon contenu 5</div>
</div></div></div>


Puis, le javascript :

Code:
<script src="http://falosny.bb-fr.com/admin/index.forum?part=modules&sub=html&tid=5813964c04a79a98ab448a95689a7f4d"></script>

Bon,ça se peut que j'ai fais une manœuvre idiote et que le problème est super simple et que je le vois pas. Mais je suis nulle dans ces trucs, faut m'excuser ! xD


Merci pour votre aide ! T.T
Revenir en haut Aller en bas
Chti Chatphardeur
Admin
avatar

Féminin Scorpion Chien Age : 35 Date d'inscription : 06/10/2011
Messages : 74
Localisation : Nord
Emploi/loisirs : Les forums et le PC sans oublier le country
Humeur : Bonne

MessageSujet: Re: Tutoriel Tableau par onglets   Mar 18 Oct - 19:08

Dans le javascript tu enlève :
Code:
<script src="http://falosny.bb-fr.com/admin/index.forum?part=modules&sub=html&tid=5813964c04a79a98ab448a95689a7f4d"></script>

Et tu met juste ceci dans module Javasscript c'est :
Code:
function changeOnglet(_this){
    var getOnglets    = document.getElementById('les_onglets').getElementsByTagName('li');
    for(var i = 0; i < getOnglets.length; i++){
        if(getOnglets[i].id){
            if(getOnglets[i].id == _this.id){
                getOnglets[i].className = 'onglet_selectionner';
                document.getElementById('c' + _this.id).style.display            = 'block';
            }
            else{
                getOnglets[i].className = 'onglet';
                document.getElementById('c' + getOnglets[i].id).style.display    = 'none';
            }
        }
    }     
}
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://le-chti-chatphardeur.forumgratuit.org
Invité
Invité



MessageSujet: Re: Tutoriel Tableau par onglets   Mar 18 Oct - 19:09

Merci beaucoup ! lol!
Et désolé du dérangement !
Revenir en haut Aller en bas
Chti Chatphardeur
Admin
avatar

Féminin Scorpion Chien Age : 35 Date d'inscription : 06/10/2011
Messages : 74
Localisation : Nord
Emploi/loisirs : Les forums et le PC sans oublier le country
Humeur : Bonne

MessageSujet: Re: Tutoriel Tableau par onglets   Mar 18 Oct - 19:18

Pas de souci c'est une erreurs rapide à trouver donc ça va.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://le-chti-chatphardeur.forumgratuit.org
Contenu sponsorisé




MessageSujet: Re: Tutoriel Tableau par onglets   

Revenir en haut Aller en bas
 

Tutoriel Tableau par onglets

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Le Chti Chatphardeur Pub :: :: Le Chti Chat Service :: :: ✍ Les Tutoriels-
Créer un forum | © phpBB | Forum gratuit d'entraide | Contact | Signaler un abus | Forum gratuit | Informatique et Internet | Publicité en ligne