Système d'onglets simple et personnalisable Bouton_activeSystème d'onglets simple et personnalisable Bouton_hoverSystème d'onglets simple et personnalisable Fb-hoverSystème d'onglets simple et personnalisable Fb-active
CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur:

Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus!

Derniers sujets
» Structure de Qui Est En Ligne (1)
Système d'onglets simple et personnalisable EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
Système d'onglets simple et personnalisable EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
Système d'onglets simple et personnalisable EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
Système d'onglets simple et personnalisable EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
Système d'onglets simple et personnalisable EmptySam 11 Fév 2023, 06:04 par Krager

» Vos partenaires dans le footer
Système d'onglets simple et personnalisable EmptyMar 07 Fév 2023, 08:40 par Oxtran

» Mettre votre © Copyright dans le footer de votre forum
Système d'onglets simple et personnalisable EmptyMar 07 Fév 2023, 07:35 par Oxtran

» Barre(s) Hitskinienne
Système d'onglets simple et personnalisable EmptyVen 03 Fév 2023, 17:22 par Krager

-15%
Le deal à ne pas rater :
(Adhérents Fnac) LEGO® Star Wars™ 75367 Le croiseur d’assaut de ...
552.49 € 649.99 €
Voir le deal

Partagez
 

Système d'onglets simple et personnalisable

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Aller à la page : 1, 2, 3 ... 13 ... 26  Suivant
http://www.infographizm.com
Manumanu
Manumanu
{ Membre }
{ Membre }

Masculin Messages : 49



Système d'onglets simple et personnalisable Empty

Système d'onglets simple et personnalisable

Description

Vous trouverez ici un système d'onglets très simples à mettre en place et très facilement personnalisable.

Notez bien qu'il n'y aura pas de CSS fourni, ce sera à vous de mettre en forme comme vous le souhaiterez. Ici, il n'y a que le javascript à insérer dans votre Template, et l'explication sur la mise en place du HTML.

Vous devez connaître le principe des ancres HTML.

Demo

Testez la démo

Code


Vous 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 Javascript


Il 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 ModulesGestion 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 HTML


Venons-en maintenant au html. Vous devez savoir utiliser des ancres HTML. Le principe est celui-ci :


  1. Un élément portant la classe "tabs-onglets" qui contiennent une liste de liens vers des ancres
  2. 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 CSS


Peu de choses à dire.
L'onglet activé reçoit la classe .selected. Pour le reste, c'est à vous de faire ! Wink

Faites-en bon usage !

Informations générales

Manumanu29/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
MessageSujet: Système d'onglets simple et personnalisable   Système d'onglets simple et personnalisable EmptyMar 29 Jan 2013, 12:49
Revenir en haut Aller en bas
Xibition
Xibition
{ Membre }
{ Membre }

Féminin Messages : 115



Système d'onglets simple et personnalisable Empty
Veut voir Système d'onglets simple et personnalisable 1440637669
Merci beaucoup Manumanu !
MessageSujet: Re: Système d'onglets simple et personnalisable   Système d'onglets simple et personnalisable EmptyMar 29 Jan 2013, 14:50
Revenir en haut Aller en bas
http://neko-folie.forumactif.org/
saia
saia
{ Membre }
{ Membre }

Féminin Messages : 85



Système d'onglets simple et personnalisable Empty
Merci o/
MessageSujet: Re: Système d'onglets simple et personnalisable   Système d'onglets simple et personnalisable EmptyMer 30 Jan 2013, 10:12
Revenir en haut Aller en bas
http://fandub-fr.forumactif.org/
Miuu
Miuu
{ Membre }
{ Membre }

Féminin Messages : 16



Système d'onglets simple et personnalisable Empty
Mercii
MessageSujet: Re: Système d'onglets simple et personnalisable   Système d'onglets simple et personnalisable EmptyMar 05 Fév 2013, 17:45
Revenir en haut Aller en bas
Espeon
Espeon
Administrateur
Administrateur

Masculin Messages : 1819



Système d'onglets simple et personnalisable Empty
06-02-2013 - Code validé par CSSActif
MessageSujet: Re: Système d'onglets simple et personnalisable   Système d'onglets simple et personnalisable EmptyMer 06 Fév 2013, 09:08
Revenir en haut Aller en bas
Chiharu.
{ Membre }
{ Membre }

Féminin Messages : 10



Système d'onglets simple et personnalisable Empty
Hoooo, intéressant, je veux voir!
Merci beaucoup!
MessageSujet: Re: Système d'onglets simple et personnalisable   Système d'onglets simple et personnalisable EmptyMer 06 Fév 2013, 09:25
Revenir en haut Aller en bas
http://gips.xooit.fr/t28-The-Unit-Of-Airsoft.htm
senda95
{ Membre }
{ Membre }

Masculin Messages : 31



Système d'onglets simple et personnalisable Empty
Tres intéressant merciii l'ami
MessageSujet: Re: Système d'onglets simple et personnalisable   Système d'onglets simple et personnalisable EmptyMer 06 Fév 2013, 18:17
Revenir en haut Aller en bas
SHAFT*
SHAFT*
{ Membre }
{ Membre }

Féminin Messages : 16



Système d'onglets simple et personnalisable Empty
Merci *-*
MessageSujet: Re: Système d'onglets simple et personnalisable   Système d'onglets simple et personnalisable EmptyMer 06 Fév 2013, 18:56
Revenir en haut Aller en bas
http://actif-help.probb.fr
Sara_y
Sara_y
{ Membre }
{ Membre }

Féminin Messages : 15



Système d'onglets simple et personnalisable Empty
Bonjour ^^
Merci beaucoup Very Happy
MessageSujet: Re: Système d'onglets simple et personnalisable   Système d'onglets simple et personnalisable EmptyJeu 07 Fév 2013, 08:05
Revenir en haut Aller en bas
http://help-in-design.1fr1.net
Indie Rhapsody
Indie Rhapsody
{ Membre }
{ Membre }

Féminin Messages : 11



Système d'onglets simple et personnalisable Empty
Merciiiii Système d'onglets simple et personnalisable 1001172573
MessageSujet: Re: Système d'onglets simple et personnalisable   Système d'onglets simple et personnalisable EmptyJeu 07 Fév 2013, 13:31
Revenir en haut Aller en bas
http://black-or-white.skyforum.net/
Tsukii__
Tsukii__
{ Membre actif }
{ Membre actif }

Féminin Messages : 578



Système d'onglets simple et personnalisable Empty
Exactement ce que je cherchais ! Merci beaucoup
MessageSujet: Re: Système d'onglets simple et personnalisable   Système d'onglets simple et personnalisable EmptyJeu 07 Fév 2013, 13:57
Revenir en haut Aller en bas
http://daggerhorn.bbactif.com
Miss Sherlock
Miss Sherlock
{ Membre }
{ Membre }

Féminin Messages : 51



Système d'onglets simple et personnalisable Empty
Merci beaucoup !
MessageSujet: Re: Système d'onglets simple et personnalisable   Système d'onglets simple et personnalisable EmptyVen 08 Fév 2013, 05:20
Revenir en haut Aller en bas
http://managercommunity.forumactif.com/
Jordi Alba.
{ Membre }
{ Membre }

Masculin Messages : 26



Système d'onglets simple et personnalisable Empty
Merci beaucoup !
MessageSujet: Re: Système d'onglets simple et personnalisable   Système d'onglets simple et personnalisable EmptyVen 08 Fév 2013, 15:29
Revenir en haut Aller en bas
http://unigraph.forum-canada.net/index.htm
Gigi
Gigi
{ Membre }
{ Membre }

Féminin Messages : 108



Système d'onglets simple et personnalisable Empty
absolument génial ! merci beaucoup !
MessageSujet: Re: Système d'onglets simple et personnalisable   Système d'onglets simple et personnalisable EmptyLun 11 Fév 2013, 09:40
Revenir en haut Aller en bas
http://x-sims-stories-x.skyrock.com/
Chir0
{ Membre }
{ Membre }

Féminin Messages : 14



Système d'onglets simple et personnalisable Empty
Magnifique ! Merci !
MessageSujet: Re: Système d'onglets simple et personnalisable   Système d'onglets simple et personnalisable EmptyMer 13 Fév 2013, 10:25
Revenir en haut Aller en bas
Elco
{ Membre }
{ Membre }

Féminin Messages : 6



Système d'onglets simple et personnalisable Empty
Merci beaucoup !
MessageSujet: Re: Système d'onglets simple et personnalisable   Système d'onglets simple et personnalisable EmptyMer 13 Fév 2013, 12:42
Revenir en haut Aller en bas
http://star-bricks-rpg.forum-canada.com
Mortuus
{ Membre }
{ Membre }

Masculin Messages : 28



Système d'onglets simple et personnalisable Empty
oh
MessageSujet: Re: Système d'onglets simple et personnalisable   Système d'onglets simple et personnalisable EmptyMer 13 Fév 2013, 13:19
Revenir en haut Aller en bas
Invité
Invité




Système d'onglets simple et personnalisable Empty
i live you
MessageSujet: Re: Système d'onglets simple et personnalisable   Système d'onglets simple et personnalisable EmptyMer 13 Fév 2013, 15:06
Revenir en haut Aller en bas
http://sliverxmoon.forumactif.com
kazu-chan
kazu-chan
{ Membre }
{ Membre }

Féminin Messages : 35



Système d'onglets simple et personnalisable Empty
;_; merciiii.
MessageSujet: Re: Système d'onglets simple et personnalisable   Système d'onglets simple et personnalisable EmptyJeu 14 Fév 2013, 05:02
Revenir en haut Aller en bas
http://graph-style.lebonforum.com/forum
Eiffel
{ Membre }
{ Membre }

Masculin Messages : 9



Système d'onglets simple et personnalisable Empty
Jolie !
MessageSujet: Re: Système d'onglets simple et personnalisable   Système d'onglets simple et personnalisable EmptyJeu 14 Fév 2013, 12:22
Revenir en haut Aller en bas
http://laforcedelunion-alli.superforum.fr/
Daniel Shepard
Daniel Shepard
{ Membre }
{ Membre }

Masculin Messages : 91



Système d'onglets simple et personnalisable Empty
thx
MessageSujet: Re: Système d'onglets simple et personnalisable   Système d'onglets simple et personnalisable EmptyJeu 14 Fév 2013, 14:30
Revenir en haut Aller en bas
http://geki-geki.skyrock.com
Herendil Seregon
Herendil Seregon
{ Membre }
{ Membre }

Masculin Messages : 13



Système d'onglets simple et personnalisable Empty
Merci .
MessageSujet: Re: Système d'onglets simple et personnalisable   Système d'onglets simple et personnalisable EmptySam 16 Fév 2013, 11:25
Revenir en haut Aller en bas
http://strangepeople.forumactif.ws
ESPÉRANCE™
ESPÉRANCE™
{ Membre }
{ Membre }

Féminin Messages : 28



Système d'onglets simple et personnalisable Empty
Merci (;
MessageSujet: Re: Système d'onglets simple et personnalisable   Système d'onglets simple et personnalisable EmptySam 16 Fév 2013, 14:55
Revenir en haut Aller en bas
http://www.fear-and-co.com/
Mlle Gwemx
{ Membre }
{ Membre }

Féminin Messages : 38



Système d'onglets simple et personnalisable Empty
Merci
MessageSujet: Re: Système d'onglets simple et personnalisable   Système d'onglets simple et personnalisable EmptySam 16 Fév 2013, 15:45
Revenir en haut Aller en bas
http://blacks-and-whites.monally.com
Mr Riz
Mr Riz
{ Membre }
{ Membre }

Féminin Messages : 58



Système d'onglets simple et personnalisable Empty
bring it on, baby! merci beaucoup Système d'onglets simple et personnalisable 3933776953
MessageSujet: Re: Système d'onglets simple et personnalisable   Système d'onglets simple et personnalisable EmptyDim 17 Fév 2013, 13:17
Revenir en haut Aller en bas
Contenu sponsorisé




Système d'onglets simple et personnalisable Empty
MessageSujet: Re: Système d'onglets simple et personnalisable   Système d'onglets simple et personnalisable Empty
Revenir en haut Aller en bas
 

Système d'onglets simple et personnalisable

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 26Aller à la page : 1, 2, 3 ... 13 ... 26  Suivant

 Sujets similaires

-
» Validation code : Système d'onglets simple et personnalisable
» QEEL personnalisable
» Système de donation de badge.
» Un système d'onglets pour la PA
» [RESOLU] Système d'onglets pour la P.A

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: Codes Directement Exploitables :: Codes à Copier/Coller :: Mise en forme-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | ©phpBB | Forum gratuit d'entraide | Signaler un abus | Forum gratuit | Informatique et Internet | Internet