Forum de Test

Design en cours.
 
AccueilFAQRechercherS'enregistrerMembresGroupesConnexion

Poster un nouveau sujet   Répondre au sujetPartagez | 
 

 Organisation par onglets

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Ilsé
>> Fondatrice <<
avatar

Nombre de messages : 208
Age : 24
Localisation : DTC
Date d'inscription : 20/10/2006

MessageSujet: Organisation par onglets   Sam 30 Mar - 17:44

    Un petit truc qui a bien du succès : l'organisation en onglet. Je vous propose donc un tutoriel pour apprendre à le faire ^^

    Pour les fondateurs UNIQUEMENT (passe par l'utilisation de templates)
    Spoiler:
     

    Pour TOUS (technique apprise à l'instant même, via le forum des forums Very Happy) et plus simple

    1 & 2| Au lieu de faire une page HTML, allez dans le panneau d'administration → modules → Java Script.
    Faites une nouvelle page en cochant "Sur l'index" et collez le code ci-dessous.

    Code:
    //<!--
                    function change_onglet(name)
                    {
                            document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet';
                            document.getElementById('onglet_'+name).className = 'onglet_1 onglet';
                            document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';
                            document.getElementById('contenu_onglet_'+name).style.display = 'block';
                            anc_onglet = name;
                    }
            //-->




    3] Faire les onglets.
    Vous allez coller votre code en PA.

    Vous commencez par installer la div.

    Code:
    <div class="systeme_onglets"> Reste du code </div>
     <script type="text/javascript">
            //<!--
                    var anc_onglet = 'NOMONGLETBASE';
                    change_onglet(anc_onglet);
            //-->
            </script>

    Puis la div des onglets :

    Code:
    <div class="onglets">VOS ONGLETS</div>

    Dans cette div, vous rajoutez les informations pour faire vos onglets. Un onglet se fait de la sorte ( copiez / collez le code autant de fois qu'il vous faut d'onglet )

    Code:
    <span class="onglet_0 onglet" id="onglet_NOMONGLET" onclick="javascript:change_onglet('NOMONGLET');">Nom de l'onglet</span>

    Rappel : onclick : vous y accédez en cliquant.
    onmouseover : vous y accédez en passant le curseur.

    Une fois vos onglets faits, vous installez la div de leur contenu ;

    Code:
    <div class="contenu_onglets"> VOS CONTENUS </div>

    Pour faire le contenu, c'est le code suivant :

    Code:
    <div class="contenu_onglet" id="contenu_onglet_NOMONGLET">Contenu de l'onglet</div>

    Le tout devrait vous donner quelque chose comme ça :

    Code:
    <div class="systeme_onglets">
    <div class="onglets">
    <span class="onglet_0 onglet" id="onglet_NOMONGLET" onclick="javascript:change_onglet('NOMONGLET');">Nom de l'onglet</span>
    <span class="onglet_0 onglet" id="onglet_NOMONGLET" onclick="javascript:change_onglet('NOMONGLET');">Nom de l'onglet</span>
    <span class="onglet_0 onglet" id="onglet_NOMONGLET" onclick="javascript:change_onglet('NOMONGLET');">Nom de l'onglet</span>
    </div>
    <div class="contenu_onglets">
    <div class="contenu_onglet" id="contenu_onglet_NOMONGLET">Contenu de l'onglet</div>
    <div class="contenu_onglet" id="contenu_onglet_NOMONGLET">Contenu de l'onglet</div>
    <div class="contenu_onglet" id="contenu_onglet_NOMONGLET">Contenu de l'onglet</div>
    </div>
    </div>
     <script type="text/javascript">
            //<!--
                    var anc_onglet = 'NOMONGLETBASE';
                    change_onglet(anc_onglet);
            //-->
            </script>


    4] Et le tout, bien sûr, peut se modifier en CSS !
    Voici un code de base - c'est celui avec lequel j'ai appris, il n'a donc pas été fait par moi mais j'sais plus d'où il venait ^^" -

    Code:
    .onglet
            {
                    display:inline-block;
                    margin-left:3px;
                    margin-right:3px;
                    padding:3px;
                    border:1px solid black;
                    cursor:pointer;
            }
            .onglet_0
            {
                    background:#bbbbbb;
                    border-bottom:1px solid black;
            }
            .onglet_1
            {
                    background:#dddddd;
                    border-bottom:0px solid black;
                    padding-bottom:4px;
            }
            .contenu_onglet
            {
                    background-color:#dddddd;
                    border:1px solid black;
                    margin-top:-1px;
                    padding:5px;
                    display:none;
            }




    Pour ne pas faire de pub, je vais m'abstenir de vous montrer un exemple ^^"
    Mais si vous désirez me montrer vos résultats, que vous avez des questions, allez-y Very Happy
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://revedecrivain.kanak.fr
 
Organisation par onglets
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» [AIDE]Modifier les applis associées au onglets du bas (slider)
» [TUTO] [Manila V 2.0/2.1] Fond d'écran sur tous les onglets + mUn background4allpages.cab
» [TUTO] Avoir les 15 onglets facilement
» question organisation voyage halloween
» [REQUETE] pour ajouts d''onglets programme

Permission de ce forum:Vous pouvez répondre aux sujets dans ce forum
Forum de Test :: School & Shop :: Tutoriels-
Poster un nouveau sujet   Répondre au sujetSauter vers: