TUTO SKINS

Centre d'Aide GuppY


PRÉSENTATION
SERVICES
JQUERY
EN VRAC
EXEMPLES
En ce moment...

 105480 visiteurs

 2 visiteurs en ligne

  • 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

Mots-clés associés

Date de création : 27/06/2013 07:53
Page lue 4357 fois


Vous êtes ici :   Accueil » Onglets