Manumanu
{ Membre }
Messages : 49
| Système d'onglets simple et personnalisableCodeVous devez poster un message à la suite pour afficher le code Vous n'avez rien de particulier à faire, le JavaScript s'en occupe pour vous. Il vous suffit de faire votre html avec quelques contraintes de classes et de balises que nous allons voir. Ensuite, vous n'aurez qu'à styliser l'ensemble vous-même. Le JavascriptIl y a deux façons de faire : 1 : Soit intégrer directement le code suivant directement dans votre site/forum : - Code:
-
<script type="text/javascript" src="http://cdn.infographizm.com/javascript/jquery/tabs.js"></script> 2 : Soit copier-coller le contenu du script (ci-après) pour l'utiliser vous-même : - Code:
-
/** * Système d'onglets automatisé * Version : 1.0 * Par Emmanuel "Manumanu" B. **/
$(document).ready(function() { var ongletActuel = null; ongletActuel = $('.tabs-onglets a:first').attr('href');
// Ajout de classe au premier onglet $('.tabs-onglets').find('a[href="'+ ongletActuel +'"]').addClass('selected');
// Afficher l'élément par défaut correspondant à celui de l'onglet par défaut $(ongletActuel).show().siblings().hide();
// Gestion de l'événement clic $('.tabs-onglets a').click(function(e) { idOnglet = $(this).attr('href');
// Si l'élément est déjà sélectionné, ne rien faire if (idOnglet == ongletActuel) e.preventDefault(); else { // Afficher le contenu demandé et masquer le contenu restant $(idOnglet).fadeIn().siblings().hide();
// Retirer la classe des autres onglets et l'ajouter sur l'élément sélectionné $(this).addClass('selected').siblings().removeClass('selected'); ongletActuel = idOnglet; }
// Empêche le déclenchement du lien e.preventDefault(); }); }); Ce script est libre, vous pouvez le réutiliser, le modifier... Sur ForumActif Pour ceux qui ne savent pas comment l'installer sur ForumActif, utilisez votre gestionnaire de javascript. Pour ça, rendez-vous dans votre Panneau d'Administration, puis dans Modules → Gestion des codes Javascript. Créez une nouvelle feuille, nommez-la systeme-onglets (par exemple) et collez-y le code ci-dessus. Hors ForumActif Si vous utilisez ce script en dehors de votre forum ForumActif (sur une page html par exemple), il vous faut d'abord inclure la librairie jQuery, comme ceci : - Code:
-
<script type=text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> Le HTMLVenons-en maintenant au html. Vous devez savoir utiliser des ancres HTML. Le principe est celui-ci :
- Un élément portant la classe "tabs-onglets" qui contiennent une liste de liens vers des ancres
- Des éléments de même niveau qui conntiennent le contenu de l'ancre (j'ai mis ici un ID "contenu", mais ce n'est pas obligatoire).
Voyons un exemple de code, similaire à l'exemple de rendu plus haut : - Code:
-
<div class="tabs-onglets"> <a href="#premier_onglet">Premier onglet</a> <a href="#deuxieme_onglet">Deuxième onglet</a> <a href="#troisieme_onglet">Troisième onglet</a> </div>
<div id="contenu"> <div id="premier_onglet"> <h1>Premier onglet</h1> </div> <div id="deuxieme_onglet"> <h1>Deuxième onglet</h1> </div> <div id="troisieme_onglet"> <h1>Troisième onglet</h1> </div> </div> Il est important que les onglets et les éléments de contenu soient au même niveau les uns par rapport aux autres. En revanche, vous pouvez séparer les onglets du contenu sans problème. Ce système peut-être utilisé n'importe où dans le forum : Dans les templates, dans les messages, dans la PA ou le QEEL... Le CSSPeu de choses à dire. L'onglet activé reçoit la classe .selected . Pour le reste, c'est à vous de faire ! Faites-en bon usage ! Informations généralesManumanu29/01/2013Firefox, Chrome, Safari, Opera, Internet ExplorerEspeonPas de mise à jour pour l'instant |
Dernière édition par Manumanu le Jeu 31 Jan 2013, 14:31, édité 1 fois | |
|
Xibition
{ Membre }
Messages : 115
| Veut voir Merci beaucoup Manumanu ! | | |
|
saia
{ Membre }
Messages : 85
| |
Miuu
{ Membre }
Messages : 16
| |
Espeon
Administrateur
Messages : 1819
| 06-02-2013 - Code validé par CSSActif | | |
|
Chiharu.
{ Membre }
Messages : 10
| Hoooo, intéressant, je veux voir! Merci beaucoup! | | |
|
senda95
{ Membre }
Messages : 31
| Tres intéressant merciii l'ami
| | |
|
SHAFT*
{ Membre }
Messages : 16
| |
Sara_y
{ Membre }
Messages : 15
| Bonjour ^^ Merci beaucoup | | |
|
Indie Rhapsody
{ Membre }
Messages : 11
| Merciiiii | | |
|
Tsukii__
{ Membre actif }
Messages : 578
| Exactement ce que je cherchais ! Merci beaucoup | | |
|
Miss Sherlock
{ Membre }
Messages : 51
| |
Jordi Alba.
{ Membre }
Messages : 26
| |
Gigi
{ Membre }
Messages : 108
| absolument génial ! merci beaucoup ! | | |
|
Chir0
{ Membre }
Messages : 14
| |
Elco
{ Membre }
Messages : 6
| |
Mortuus
{ Membre }
Messages : 28
| |
kazu-chan
{ Membre }
Messages : 35
| |
Eiffel
{ Membre }
Messages : 9
| |
Daniel Shepard
{ Membre }
Messages : 91
| |
Herendil Seregon
{ Membre }
Messages : 13
| |
ESPÉRANCE™
{ Membre }
Messages : 28
| |
Mlle Gwemx
{ Membre }
Messages : 38
| |
Mr Riz
{ Membre }
Messages : 58
| bring it on, baby! merci beaucoup | | |
|