Pageframe

Vous avez déjà vu cet effet sur beaucoup de sites : il s'agit de présenter des informations sous forme d'onglets. Lorsque vous cliquez sur l'onglet, le contenu qui lui est lié apparaît. Un "pageframe" c'est quelque chose qui apparaît comme ce qui suit :

Cet article se propose de vous montrer comment réaliser cela en XHTML, javascript et CSS.

Bien, commençons par créer les onglets, les tabs, du pageframe. Pour cela nous allons créer un menu et notre menu sera codé sous forme de liste ordonnée :

<ol class="pageframe">
    <li><a href="#" onclick="show('p1','p1;p2;p3;p4');">Personal</a></li>
    <li><a href="#" onclick="show('p2','p1;p2;p3;p4');">Professional</a></li>
    <li><a href="#" onclick="show('p3','p1;p2;p3;p4');">Contact Details</a></li>
    <li><a href="#" onclick="show('p4','p1;p2;p3;p4');">Albums</a></li>
</ol>

Cette partie, si elle n'est pas complétée par des CSS, n'aura pas du tout la présentation voulue. Néanmoins, la structure de code qui vous est présentée est complète : rien d'autre n'est nécessaire pour afficher le "pageframe". C'est une partie importante du code qui est dès lors terminée.

Nous avons mis en évidence la classe CSS que nous avons réservée à la liste ordonnée (class="pageframe"). De même nous attirons votre attention sur l'appel de la fonction show() lors de l'événement de click (onclick()).

La classe CSS pageframe va nous permettre d'assigner un style particulier à la liste ordonnée. Voyons ceci de plus près :

    
ol.pageframe {  list-style-type :   none;
                width           :   700px;
                margin          :   0;
                padding         :   0;
                height          :   26px;
                border-bottom   :   1px solid #888;
}

À ce stade de notre code CSS, rien de bien spectaculaire se produit. On a évité la numérotation des éléments de la liste; nous avons remis à zéro marge et remplissage; nous avons spécifié une hauteur; nous avons spécifié un bord. Rien de bien passionnant. Continuons…

ol.pageframe li 
             {  display         :   inline-block;
                margin          :   0;
                padding         :   0;
                height          :   25px;
                line-height     :   25px;
                min-width       :   125px;
}

Cet ajout de code CSS permet de faire en sorte que chaque élément de la liste se présente l'un à côté de l'autre, que chaque élément a une hauteur de 25 pixels (c'est-à-dire 1 pixel de moins que le bloc <ol>...</ol>), que la hauteur d'une ligne est de 25 pixels également, et que la largeur minimale d'un élément est de 125 pixels. Tout cela a pour conséquence de faire en sorte que notre pageframe se présente sur une seule ligne et que chaque onglet a une taille déterminée (hauteur et largeur minimale).

Un peu plus de code CSS sera nécessaire pour créer les bords autour de chaque onglet. Voici comment faire :

ol.pageframe li a 
            {   text-decoration :   none;
                display         :   block;
                background      :   rgb(231,231,231);
                color           :   #666;
                text-align      :   center;
                border          :   1px solid #888;
                border-bottom   :   none;
}

Cette modification est aussi spectaculaire que la précédente : maintenant chaque onglet possède un bord. Une petite addition va nous permettre de déterminer l'apparence de l'onglet du pageframe lorsque la souris le survole :

ol.pageframe li a:hover
            {   background      :   rgb(245,245,245);
                color           :   #000;
                border-bottom   :   1px solid rgb(245,245,245);
}

Le tour est joué ! Nous avons bien construit un système de pageframe avec onglets. Que nous reste-t-il à implémenter ? Tout simplement qu'au click sur l'onglet, on active un contenu ou un autre. Pour cela nous allons vous montrer maintenant la totalité du code créé, à la fois le XHTML, le CSS et le javascript :

// CODE CSS
<style type="text/css">
body                {   background      :   #eee;
                        font            :   0.8em/1em "Lucida Grande",helvetica,verdana,arial,sans-serif;
                    }

ol.pageframe        {   list-style-type :   none;
                        width           :   700px;
                        margin          :   0;
                        padding         :   0;
                        height          :   26px;
                        border-bottom   :   1px solid #888;
                    }

ol.pageframe li     {   display         :   inline-block;
                        margin          :   0;
                        padding         :   0;
                        height          :   25px;
                        line-height     :   25px;
                        min-width       :   125px;
                    }

ol.pageframe li a   {   text-decoration :   none;
                        display         :   block;
                        background      :   rgb(231,231,231);
                        color           :   #666;
                        text-align      :   center;
                        border          :   1px solid #888;
                        border-bottom   :   none;
                      }

ol.pageframe li a:hover
                    {   background      :   rgb(245,245,245);
                        color           :   #000;
                        border-bottom   :   1px solid rgb(245,245,245);
                    }

div.pageframe-body  {   background      :   rgb(245,245,245);
                        width           :   678px; /* 700 - 2 x 10 du padding - 2 du bord */
                        padding         :   10px;
                        border          :   1px solid #888;
                        border-top      :   none;
                    }

div.pageframe-body  p
                    {   display         :   none;
                    }
</style>

// CODE JAVASCRIPT POUR L'ACTIVATION DES CONTENUS PAR ONGLET
<script type="text/javascript">

    function show( szID,szSections )
    {
        aSections = szSections.split(';');

        if ( aSections.length > 0 )
        {
            for ( var i = 0;i<aSections.length;i++ )
            {
                if ( ( oElement = document.getElementById( aSections[i] ) ) )
                {
                    oElement.style.display = 'none';
                }
            }
        }

        if ( ( oElement = document.getElementById( szID ) )  )
        {
            oElement.style.display = 'block';
        }
    }
</script>

// CODE XHTML
<ol class="pageframe">
    <li><a href="#" onclick="show('p1','p1;p2;p3;p4');">Personal</a></li>
    <li><a href="#" onclick="show('p2','p1;p2;p3;p4');">Professional</a></li>
    <li><a href="#" onclick="show('p3','p1;p2;p3;p4');">Contact Details</a></li>
    <li><a href="#" onclick="show('p4','p1;p2;p3;p4');">Albums</a></li>
</ol>

<div class="pageframe-body">
    <p id="p1" style="display:block;">

        Quae cum dixisset, Explicavi, inquit, sententiam meam, et eo quidem 
        consilio, tuum iudicium ut cognoscerem, quoniam mihi ea facultas, ut id 
        meo arbitratu facerem, ante hoc tempus numquam est data.

    </p>

    <p id="p2">

        Atque hoc loco, qui propter animi voluptates coli dicunt ea studia, quae 
        dixi, non intellegunt idcirco esse ea propter se expetenda, quod nulla 
        utilitate obiecta delectentur animi atque ipsa scientia, etiamsi 
        incommodatura sit, gaudeant.

    </p>

    <p id="p3">

        Sed quid attinet de rebus tam apertis plura requirere? Ipsi enim 
        quaeramus a nobis stellarum motus contemplationesque rerum 
        caelestium eorumque omnium, quae naturae obscuritate 
        occultantur, cognitiones quem ad modum nos moveant, et quid 
        historia delectet, quam solemus persequi usque ad extremum, cum 
        praetermissa repetimus, inchoata persequimur. Nec vero sum 
        nescius esse utilitatem in historia, non modo voluptatem.

    </p>

    <p id="p4">

        In quo enim maxime consuevit iactare vestra se oratio, tua 
        praesertim, qui studiose antiqua persequeris, claris et fortibus 
        viris commemorandis eorumque factis non emolumento aliquo, sed 
        ipsius honestatis decore laudandis, id totum evertitur eo 
        delectu rerum, quem modo dixi, constituto, ut aut voluptates 
        omittantur maiorum voluptatum adipiscendarum causa aut dolores 
        suscipiantur maiorum dolorum effugiendorum gratia.

    </p>
</div>

Ce code vous permet de créer des onglets/tabs sur les bons browsers du marché : Opera, Safari, Google Chrome, Firefox … et le nouvel Internet Explorer 8. Du moins cela a-t-il été testé sur ces navigateurs ! Et voilà la démonstration vivante des principes expliqués.

Nos autres articles