En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies pour vous proposer des contenus et services adaptés. Mentions légales.

TUTO SKINS

Centre d'Aide GuppY


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

 121884 visiteurs

 1 visiteur 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 5178 fois


Vous êtes ici :   Accueil » Onglets