Des onglets en CSS avec JQuery

Des onglets en CSS avec JQuery

Au programme du jour : un tutoriel pour vous expliquer comment créer un système d’onglets grâce à JQuery.

Un peu de CSS et des infos issues d’une base de données afin de rendre l’exemple le plus concret possible.

Pour commencer, on a besoin de JQuery UI, que l’on télécharge ici (bien vérifier que tabs est coché). Vous créez un dossier js dans lequel vous copiez les fichiers que vous venez de télécharger.

Nous aurons également besoin d’un dossier css dans lequel nous placerons le fichier style.css.

Commençons par créer un fichier index.php qui contiendra tout le code nécessaire pour le fonctionnement des onglets.

Après

<body>

Ajouter

<div id="content">
    <div id="tabs">
        <ul> 
           <li><a href="#tabs-1">Onglet 1</a></li>
           <li><a href="#tabs-2">Onglet 2</a></li>
           <li><a href="#tabs-3">Onglet 3</a></li>
        </ul>
        <div id="tabs-1">Contenu de l'onglet 1</div>
        <div id="tabs-2">Contenu de l'onglet 2</div>
        <div id="tabs-3">Contenu de l'onglet 3</div>
    </div>
</div>

Voir le résultat

Sans le CSS et JQuery, on se rend vite compte que le rendu est loin d’être optimisé.

On va donc s’occuper, dans un premier tems, du css.

Ajouter dans le head

<link type="text/css" rel="stylesheet" href="css/style.css" />

Afin d’aérer l’ensemble, ajouter

body, html { 
    margin: 40px 0
}

Ensuite ajouter juste en dessous

#content {
    margin: 0 auto;
    width: 1000px
}

Et pour terminer la première partie du CSS, on va styliser les balises UL et LI comme ceci

#tabs ul {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 30px;
    border-bottom: 1px solid #666;
    border-left: 1px solid #666;
    width: 500px
}
#tabs ul li {
   float: left;
   margin: 0;
   padding: 0;
   height: 29px;
   line-height: 29px;
   border-left: none;
   margin-bottom: -1px;
   overflow: hidden;
   position: relative;
   background: #ddd
}
#tabs ul li a {
   text-decoration: none;
   color: #888;
   display: block;
   font-family: "Trebuchet MS";
   font-size: 14px;
   padding: 0 20px
}
#tabs ul li a:hover {
   background: #ccc;
   color: #666
}

Voir le résultat

Les onglets ne sont pas encore fonctionnels mais le style est là :-). Vous noterez que tous les contenus sont visibles dans le premier onglet. Nous allons corriger cela grâce à JQuery et un peu de CSS.

Dans le fichier index.php, après

<link type="text/css" rel="stylesheet" href="css/style.css" />

Ajouter

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.ui.js"></script>

Nous venons d’ajouter les deux scripts téléchargés précédemment. Ajoutons l’appel de la fonction JQuery juste en dessous :

<script type="text/javascript">
$(document).ready(function() {
    $("#tabs").tabs();
});
</script>

Nous terminons maintenant la partie CSS en ajoutant les styles propres à JQuery. Afin de différencier un onglet actif des autre, ajouter en bas du fichier style.css

.ui-tabs {
   position: relative
}
.ui-tabs .ui-tabs-nav {
   margin: 0
}
.ui-tabs .ui-tabs-nav li {
   float: left;
   margin: 0;
   padding: 0;
   border: 1px solid #ccc;
   border-left: none;
   margin-bottom: -1px;
   overflow: hidden;
   position: relative;
   background: #ddd
}
.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
   float: left;
   padding: 0;
   text-decoration: none;
   padding: 0 10px
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
   margin-bottom: -1px;
   padding-bottom: 1px;
   border-bottom: 1px solid #fff
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor {
   cursor: text;
   color: #666;
   background: #fff
}
.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor {
   cursor: pointer
}

Ensuite, il faut donner un style au contenu des onglets en ajoutant

.ui-tabs .ui-tabs-panel {
   display: block;
   border: 1px solid #ccc;
   border-top: none;
   overflow: hidden;
   clear: both;
   float: left;
   width: 479px;
   background: #fff;
   margin: 0;
   padding: 10px
}

Voir le résultat

Comme vous pouvez le constater, le système d’onglets est à présent fonctionnel.

Pour terminer ce tutoriel, nous allons ajouter dans le contenu des infos issues d’une base de données MySQL.

Ouvrez de nouveau le fichier index.php.

A la première ligne, ajouter les informations de connexion à la BDD.

<?php
$bdd = "nom_bdd";
$hote = "nom_hote";
$user = "nom_user";
$password = "mot_de_passe";
$db = mysqli_connect ($hote, $user, $password, $bdd);
?>

N’oubliez pas de remplacer les informations ci-dessous par vos codes d’accès :-)

Créer votre table ou copiez dans MySQL l’exemple ci-dessous

DROP TABLE IF EXISTS `onglets`;
CREATE TABLE IF NOT EXISTS `onglets` (
  `id` int(11) NOT NULL auto_increment,
  `titre` varchar(100) NOT NULL,
  `texte` varchar(250) NOT NULL,
  `type` tinyint(1) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAMDEFAULT CHARSET=utf8 AUTO_INCREMENT=13;
INSERT INTO `tutos_onglets` (`id`, `titre`, `texte`, `type`) VALUES 
(1, 'Donnée 1', 'Zone de texte de la donnée 1', 2),
(2, 'Donnée 2', 'Zone de texte de la donnée 2', 1),
(3, 'Donnée 3', 'Zone de texte de la donnée 3', 3),
(4, 'Donnée 4', 'Zone de texte de la donnée 4', 1),
(5, 'Donnée 5', 'Zone de texte de la donnée 5', 2),
(6, 'Donnée 6', 'Zone de texte de la donnée 6', 3),
(7, 'Donnée 7', 'Zone de texte de la donnée 7', 1),
(8, 'Donnée 8', 'Zone de texte de la donnée 8', 3),
(9, 'Donnée 9', 'Zone de texte de la donnée 9', 2),
(10, 'Donnée 10', 'Zone de texte de la donnée 10', 3),
(11, 'Donnée 11', 'Zone de texte de la donnée 11', 2),
(12, 'Donnée 12', 'Zone de texte de la donnée 12', 1);

Remplacer

Contenu de l'onglet 1

Par

<?php
$req = "SELECT titre, texte FROM onglets WHERE type=1";
$rep = mysqli_query($db, $req);
while ($row = mysqli_fetch_array($rep)) {
    echo "<strong>".$row['titre']."</strong><br />".$row['texte']."<br />";
}
?>

Remplacer

Contenu de l'onglet 2

Par

<?php$req = "SELECT titre, texte FROM onglets WHERE type=2";
$rep = mysqli_query($db, $req);
while ($row = mysqli_fetch_array($rep)) {
    echo "<strong>".$row['titre']."</strong><br />".$row['texte']."<br />";
}
?>

Remplacer

Contenu de l'onglet 3

Par

<?php$req = "SELECT titre, texte FROM onglets WHERE type=3";
$rep = mysqli_query($db, $req);
while ($row = mysqli_fetch_array($rep)) {
    echo "<strong>".$row['titre']."</strong><br />".$row['texte']."<br />";
}
?>

Voir le résultat

Ce tutoriel est terminé et si vous avez des questions, n’hésitez pas à poster un commentaire.

NB : Article mis à jour le 9/07/2014 suite aux différentes évolutions de JQuery. Il est désormais compatible avec les versions suivantes :

  • JQuery - V1.11.1
  • JQuery UI - V1.10.4
Catégorie Tutoriels - Écrit par le 23/08/2010 - Article lu 24 678 fois - 7 commentaires

7 réflexions sur ce billet

Écrit par cunimb
Le 04/05/2011 à 13h54

Bonjour et merci pour ce tuto que je trouve très clair et très bien construit.
La preuve, j'ai réussi à réaliser facilement mes onglets en étant full débutant avec jquery et très peu familiarisé avec javascript.

Je trouve le résultat très satisfaisant, mais je ne comprends pas pourquoi il n'est pas centré horizontalement.
Avec #content {margin: 0 auto; dans le CSS ce devrait être le cas, non ? J'ai beau chercher et essayer, je ne trouve pas de solution pour y arriver.


Écrit par Hervé
Le 04/05/2011 à 14h02

Il ne faut pas oublier de définir la largeur du #content avec le width comme ceci :

#content { margin: 0 auto; width: 1000px; }

Écrit par cunimb
Le 04/05/2011 à 14h17

Tout d'abord, désolé d'avoir posté une deuxième fois, je croyais que mon premier message n'était pas parti :(

Ensuite, merci d'avoir répondu si vite :)

J'ai bien saisi width: 1000px;} après #content { margin: 0 auto; mais le bloc n'est pas centré, il est très à gauche de l'écran. C'est aussi ce que je vois quand je visualise l'exemple donné par le site. J'utilise Firefox avec un écran de 1320px.

Merci beaucoup.

Écrit par graphismoweb
Le 27/12/2012 à 10h43

Merci pour ce tuto très clair.

J'ai toutefois un soucis lorsque je teste la navigation sous mac avec firefox (10.0.1) le contenu des onglets est décalé sur la droite de la fenêtre d'environ 1000px. Je n'arrive pas à cibler cette erreur avec firebug. Savez vous d'où cela peut provenir ?

Le code que j'ai réalisé est un peu modifié car je l'ai adapté pour un développement de site dans un CMS, mais les grandes lignes restent les mêmes

Sur chrome je n'ai pas de soucis. Sur safari, les onglets ne fonctionnent pas.

Merci

Écrit par Hervé
Le 27/12/2012 à 11h29

@Graphismoweb : je viens de tester sous FF, Safari et Chrome (Mac) et les onglets fonctionnent sous ces 3 navigateurs.

A propos du décalage de 1000px, il faudrait que je vois le code modifié pour me faire une idée.

Écrit par graphismoweb
Le 27/12/2012 à 13h32

Merci de votre réponse. J'ai un conflit avec une autre css un overflow hidden :

div.cck-f100 {
overflow: hidden;
position: relative;
width: 100%;
}

que je suis obligé de laisser. Il faut que je trouve une astuce pour combiner les deux.

Si vous avez une idée, merci.

Écrit par Hervé
Le 28/12/2012 à 14h27

Il faudrait que je vois le css + une page pour simuler le bug et tenter de le corriger.

Écrire un commentaire

Pseudo

E-mail (non publié)

Votre commentaire

Recevoir une notification par e-mail lorsqu'une réponse est postée

Veuillez recopier le code de sécurité : fgrueym6xs

Haut de page