Accueil >> Articles

Des onglets en CSS avec JQuery

Catégorie Tutoriels - Ecrit par Hervé le 23/08/2010 - Article lu 8 691 fois - 7 commentaires

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

ul { margin: 0; padding: 0; float: left; list-style: none; height: 30px;
border-bottom: 1px solid #666; border-left: 1px solid #666; width: 500px; }
ul li { float: left; margin: 0; padding: 0; height: 29px; line-height: 29px;
border: 1px solid #666; border-left: none; margin-bottom: -1px;
overflow: hidden; position: relative; background: #ddd; }
ul li a { text-decoration: none; color: #888; display: block; 
font-family: "Trebuchet MS"; font-size: 14px; padding: 0 20px; }
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-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.4.custom.min.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 .ui-tabs-nav li.ui-state-active { cursor: text; color: #666;
border-bottom: 1px solid #fff; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a { position: relative;
background: #fff; }
.ui-tabs .ui-tabs-nav li a,
.ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a {
cursor: pointer; }

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

.ui-tabs .ui-tabs-panel { display: block; border: 1px solid #666; 
border-top: none; overflow: hidden; clear: both; float: left; 
width: 480px; background: #fff; margin: 0; padding: 10px 10px 0; 
font-family: "Trebuchet MS"; font-size: 14px; }

Et pour finir ne pas oublier de masquer le contenu des onglets inactifs en ajoutant

.ui-tabs .ui-tabs-hide { display: none !important; }

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";
$connect = mysql_connect ($hote, $user, $password);
mysql_select_db($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=MyISAM
DEFAULT CHARSET=utf8 AUTO_INCREMENT=13 ;

INSERT INTO `tutos_onglets` (`id`, `titre`, `texte`, `type`) VALUES 
(1, 'Donn&eacute;e 1', 'Zone de texte de la donn&eacute;e 1', 2),
(2, 'Donn&eacute;e 2', 'Zone de texte de la donn&eacute;e 2', 1),
(3, 'Donn&eacute;e 3', 'Zone de texte de la donn&eacute;e 3', 3),
(4, 'Donn&eacute;e 4', 'Zone de texte de la donn&eacute;e 4', 1),
(5, 'Donn&eacute;e 5', 'Zone de texte de la donn&eacute;e 5', 2),
(6, 'Donn&eacute;e 6', 'Zone de texte de la donn&eacute;e 6', 3),
(7, 'Donn&eacute;e 7', 'Zone de texte de la donn&eacute;e 7', 1),
(8, 'Donn&eacute;e 8', 'Zone de texte de la donn&eacute;e 8', 3),
(9, 'Donn&eacute;e 9', 'Zone de texte de la donn&eacute;e 9', 2),
(10, 'Donn&eacute;e 10', 'Zone de texte de la donn&eacute;e 10', 3),
(11, 'Donn&eacute;e 11', 'Zone de texte de la donn&eacute;e 11', 2),
(12, 'Donn&eacute;e 12', 'Zone de texte de la donn&eacute;e 12', 1);

Remplacer

Contenu de l'onglet 1

Par

<?php
$req = "SELECT titre, texte FROM onglets WHERE type=1";
$rep = mysql_query($req);
while ($row = mysql_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 = mysql_query($req);
while ($row = mysql_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 = mysql_query($req);
while ($row = mysql_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.

Relayer cet article sur les réseaux sociaux

7 commentaires :

Ecrit 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.

Ecrit 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; }

Ecrit 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.

Ecrit 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

Ecrit 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.

Ecrit 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.

Ecrit 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.

Dream Seychelles le 07/05/2013 à 08:08
Merci pour le tutoriel je finirai sans doute...
accessformation le 07/05/2013 à 07:40
Très intéressant cet article, merci ! Cela me...
Qfla le 03/05/2013 à 23:18
Merci pour ce billet, il n’est pas évident...
Vide-grenier le 03/05/2013 à 00:34
De la chicoré, c’est pas du café. La...
François le 02/05/2013 à 14:27
J’avoue qu’en voyant le titre de l’article je...
julie le 02/05/2013 à 11:46
Je comprends ta frustration mais comme le juge,...