By continuing your navigation on this site, you accept the use of cookies to offer you contents and adapted services. Legal Notice.

SKINS TUTO

GuppY Help Center


PRESENTATION
BOXES
SERVICES
JQUERY
BULK
EXAMPLES
Currently...

 121885 visitors

 1 visitor online

  • Mise en place
  • Code dans l'article
  • jqstyle.css

On peut créer un accordéon dans un article.

CRÉATION DES ONGLETS :

  1. Créer un article
  2. Copier les lignes qui sont dans ce fichier
  3. Aller dans  iconeSOURCE.png  de l'article
  4. Coller les lignes
  5. Cliquer à nouveau sur SOURCE pour sortir

ENREGISTRER

 

Si vous avez plus ou moins de 4 onglets : dans SOURCE, copier-coller ou supprimer les lignes correspondant à un onglet (remplacer [ par < ) :

Pour le titre de l'onglet :

[li style="text-align:center;width: 60px;">Onglet 3[/l>

Pour le contenu de l'onglet :

[div class="gytabitem">

[table align="center" border="0" cellpadding="1" cellspacing="1" style="width: 100%;">

[tbody>

[tr>

[td style="text-align: left;">

Contenu 3 - dans un tableau[/td>

[/tr>

[/tbody>

[/table>

[p>

[/p>

[/div>

► Enregistrer l'article

EXPLICATION DU CODE

(la balise < a été remplacée par pour éviter l'activation du code)

[div style="width:100%;text-align:center;margin:auto;">

[ul id="gytabs">

Largeur de l'ensemble des onglets

[li class="gyactif" style="text-align:center;width: 60px;">Onglet 1[/li>

Titre du premier onglet (onglet actif par défaut)

largeur de l'onglet

[li style="text-align:center;width: 60px;">Onglet 2[/li>

Titre du deuxième onglet

[li style="text-align:center;width: 60px;">Onglet 3[/li>

Titre du troisième onglet

[li style="text-align:center;width: 80px;">Onglet 4[/li>

[/ul>

Titre du quatrième onglet

[div id="gytabcontent">

[div class="gytabitem">

[table align="center" border="0" cellpadding="1" cellspacing="1" style="width: 100%;">

[tbody>

[tr>

[td style="text-align: left;">

Contenu 1 - dans un tableau[/td>

[/tr>

[/tbody>

[/table>

[p>

[/p>

[/div>

Contenu du premier onglet

[div class="gytabitem">

[table align="center" border="0" cellpadding="1" cellspacing="1" style="width: 100%;">

[tbody>

[tr>

[td style="text-align: left;">

Contenu 2 - dans un tableau[/td>

[/tr>

[/tbody>

[/table>

[p>

[/p>

[/div>

Contenu du deuxième onglet

[div class="gytabitem">

[table align="center" border="0" cellpadding="1" cellspacing="1" style="width: 100%;">

[tbody>

[tr>

[td style="text-align: left;">

Contenu 3 - dans un tableau[/td>

[/tr>

[/tbody>

[/table>

[p>

[/p>

[/div>

Contenu du troisième onglet

[div class="gytabitem">

[table align="center" border="0" cellpadding="1" cellspacing="1" style="width: 100%;">

[tbody>

[tr>

[td style="text-align: left;">

Contenu 4 - dans un tableau[/td>

[/tr>

[/tbody>

[/table>

[p>

[/p>

[/div>

Contenu du quatrième onglet

[/div>

[/div>

Fin du code pour les onglets

Le style est dans le fichier jqstyle.css dans le dossier de la skin.

#gytabs{
    display: none;
    margin-left: -4px;
}

Ensemble des onglets
#gytabs li{
    position: relative;
    float: left;
    list-style: none;
    padding: 2px 5px 7px;
    margin-right : -8px;
    border: 1px solid #8F916A;
    cursor: pointer;
    background-color: inherit;
    color: #000000;
    z-index: 1;
}
Titre des onglets
#gytabs .gyactif{
    margin-bottom : 1px;
    background-color: #8F916A;
    font-weight: bold;
    color: #FFFFFF;
    z-index: 10;
}
Onglet actif
#gytabcontent{
    clear: both;
    position: relative;
    margin: 0 2px;
    padding: 0 4px;
    border: 1px solid #8F916A;
    top: -2px;
    background-color: #ECEFC2;
    color: #000000;
    width: auto;
    overflow: hidden;
    z-index: 5;
}
Contenu des onglets

Associated keywords

Creation date : 27/06/2013 07:53
Page read 5179 times


You are here :   Home » Tabs