Visiteur non identifié. Spherick
« First they ignore you, then they ridicule you, then they fight you, then you win. »faux Mahatma Gandhi, plutôt Nicholas Klein, syndicaliste, 1918
Jan
Fév
Mar
Avr
Mai
Jui
Jui
Aou
Sep
Oct
Nov
Déc
Accueil > Blog Eric > Hobbies > Informatique > SPIP : mettre des onglets dans un article

Public  SPIP : mettre des onglets dans un article

J’avais envie d’onglets dans mes articles...
Avec Spip_Contrib, faites un vœu et voilà

mardi 19 décembre 2006, lu 1603 fois

Principe inspiré de Pierre Troll, voir http://www.spip-contrib.net/En-ongl...

Onglet 1

contenu du premier onglet
etc...

Onglet 2

contenu du deuxième onglet
etc...

Onglet 3

contenu du troisième onglet
etc...


Pour l’implémenter :

Ajouter le code suivant dans le CSS :

/* Gestion des onglets
-------------------------------------------------------- */

.dynamic-tab-pane-control.tab-pane {
        position:        relative;
        width:                100%;                /* width needed weird IE bug */
        margin-right:        -2px;        /* to make room for the shadow */
}

.dynamic-tab-pane-control .tab-row .tab {

        width:                        70px;
        height:                        16px;
        background-image:        url( "images/tab.png" );
        position:                relative;
        top:                        0;
        display:                inline;
        float:                        left;
        overflow:                hidden;
        cursor:                        Default;
        margin:                        1px -1px 1px 2px;
        padding:                2px 0px 0px 0px;
        border:                        0;
        z-index:                1;
        font:                        11px Tahoma;
        white-space:                nowrap;
        text-align:                center;
}

.dynamic-tab-pane-control .tab-row .tab.selected {
        width:                        74px !important;
        height:                        18px !important;
        background-image:        url( "images/tab.active.png" ) !important;
        background-repaet:        no-repeat;
        border-bottom-width:        0;
        z-index:                3;
        padding:                2px 0 0px 0;
        margin:                        1px -3px -3px 0px;
        top:                        -2px;
        font:                        11px Tahoma;
}

.dynamic-tab-pane-control .tab-row .tab a {
        font:                        11px Tahoma;
        color:                        Black;
        text-decoration:        none;
        cursor:                        default;
}

.dynamic-tab-pane-control .tab-row .tab.hover {
        font:                        11px Tahoma;
        width:                        70px;
        height:                        16px;
        background-image:        url( "images/tab.hover.png" );
        background-repaet:        no-repeat;
}

.dynamic-tab-pane-control .tab-page {
        clear:                        both;
        border:                        1px solid rgb( 145, 155, 156 );
        background:                rgb( 252, 252, 254 );
        z-index:                2;
        position:                relative;
        top:                        -2px;
        font:                        11px Tahoma;
        color:                        Black;
        filter:                        progid:DXImageTransform.Microsoft.Gradient(StartColorStr=#fffcfcfe, EndColorStr=#fff4f3ee, GradientType=0)
                                        progid:DXImageTransform.Microsoft.Shadow(Color=#ff919899, Strength=2, Direction=135);
        /*244, 243, 238*/
        /* 145, 155, 156*/
        padding:                10px;
}

.dynamic-tab-pane-control .tab-row {
        z-index:        1;
        white-space:        nowrap;
}

Copier les 3 images ci-jointes dans le dossier images.

Copier le .txt ci-joint dans un dossier ressources, à la racine du site et le renommer en .js.

Ajouter, dans le Head du fichier html qui affiche les articles (ici, blog.html), la ligne suivante :

        <script type="text/javascript" src="ressources/spip_onglets.js"></script>

Et enfin, dans l’article lui-même, gérer les onglets de la façon suivante :

<div class="tab-pane" id="xx">
        <div class="tab-page">
            <h2 class="tab">Onglet 1</h2>
contenu du premier onglet
etc...
        </div>
        <div class="tab-page">
            <h2 class="tab">Onglet 2 très très long</h2>
contenu du deuxième onglet
etc...
        </div>
        <div class="tab-page">
            <h2 class="tab">Onglet 3</h2>
contenu du troisième onglet
etc...
        </div>

Onglet inactif
Onglet inactif en rollover
Onglet actif
à renommer en .js
Vous pouvez noter cet article, lu 1603 fois
0 vote


Qui êtes-vous ?
Votre message

Ce formulaire accepte les raccourcis SPIP [->url] {{gras}} {italique} <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.