Créer une boîte d’onglets à la mode Web avec CSS et jQuery

Cours créer une boîte d’onglets à la mode Web avec CSS et jQuery, tutoriel & guide de travaux pratiques en pdf.

Étape 1

Tout d’abord, un voyage rapide dans Photoshop afin de créer un petit design Web 2.0 et le tour est joué. Nous avons une belle maquette de ce que notre boîte à onglets devrait ressembler. C’est assez simple ! Vous pouvez récupérer les fichiers Photoshop PSD pour cette image si vous souhaitez.

Étape 2

La première chose à faire lors de la construction est d’obtenir une idée d’ensemble de ce que vous allez faire. Cela devient plus facile par la suite de générer votre boîte à onglets. En regardant cette image, je dirais que la meilleure chose à faire est :
1 Avoir un conteneur principal <div> qui contiendra tout le reste. De cette façon, si l’on désire déplacer notre boîte à onglets, il sera facile de le faire. Il sera aussi plus facile de mettre en forme cette boîte par la suite. 2 Ensuite, nous aurons la zone d’en-tête, probablement avec un tag <h> 3 Ensuite, juste en dessous, nous aurons un second conteneur <div> qui contiendra les onglets et le contenu. C’est la boîte gris foncé dans l’image. 4 A l’intérieur, nous allons utiliser une liste à puces <ul> où chaque élément est un lien pour les onglets. Cela nous permettra d’utiliser le <li> et d’obtenir une mise en forme plus flexible. 5 Puis en dessous, nous allons créer un dernier conteneur <div> qui contiendra le contenu de chaque onglet. Nous aurons besoin d’un conteneur pour chaque onglet et nous allons les afficher ou les masquer en fonction de l’onglet sur lequel on a cliqué.
Donc, pour résumer, cela ressemblera à ceci :
<div>
Créer une boîte d’onglets à la mode Web 2.0 avec CSS et jQuery Partie 1 : Le code HTML/CSS par Dave Lizotte (PcKULT.NET)
– 4 Copyright © 06/11/2008 – Dave Lizotte. Aucune reproduction, même partielle, ne peut être faite de ce site et de l’ensemble de son contenu : textes, documents, images, etc sans l’autorisation expresse de l’auteur. Sinon vous encourez selon la loi jusqu’à 3 ans de prison et jusqu’à 300 000 E de dommages et intérêts. http://pckult.developpez.com/tutoriels/css/boite-onglet-web2/
<h4>Entête</h4> <div> <ul> <li><a>Tab 1</a></li> <li><a>Tab 2</a></li> <li><a>Tab 3</a></li> </ul> <div>Contenu de la Tab 1</div> <div>Contenu de la Tab 2</div> <div>Contenu de la Tab 3</div> </div> </div>
Ne vous inquiétez pas si, en regardant cette portion de code, vous ne voyez pas immédiatement le rendu final. En outre, il est bon de réfléchir à la structure de ce type avant d’avoir beaucoup trop de classes, de noms et d’identifiants, car il peut devenir difficile de voir l’ensemble clairement lorsque tout est terminé. Le squelette de votre boîte est plus facile à lire que son rendu final.