Forum de Test
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Forum de Test

Design en cours.
 
AccueilRechercherDernières imagesS'enregistrerConnexion
Le Deal du moment : -15%
(Adhérents Fnac) LEGO® Star Wars™ ...
Voir le deal
552.49 €

 

 Organisation par onglets

Aller en bas 
AuteurMessage
Ilsé
>> Fondatrice <<
Ilsé


Nombre de messages : 209
Age : 31
Localisation : DTC
Date d'inscription : 20/10/2006

Organisation par onglets Empty
MessageSujet: Organisation par onglets   Organisation par onglets Icon_minitimeSam 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
http://revedecrivain.kanak.fr
 
Organisation par onglets
Revenir en haut 
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Forum de Test :: School & Shop :: Tutoriels-
Sauter vers: