Onglets

Soyez le premier à donner votre avis sur cette source.

Snippet vu 44 628 fois - Téléchargée 27 fois

Contenu du snippet

un menu avec onglets.
Il y en a beaucoups, mais rares sont ceux qui sont aussi simples à mettre en place que le mien, ceux qui utilisent des méthodes objets, et ceux qui proposent une interface d'ajout / supression d'onglets aussi simple...

Source / Exemple :


<html>
<head>
<title>menu à onglets</title>
<script type="text/javascript">

function Onglet(titre){
	this.titre=titre;
	this.nombre=0;
	this.liens=new Array();
	this.texte=new Array();

	this.add_link=Onglet_add_link;
	this.afficher=Onglet_afficher;
}
function Onglet_add_link(texte, lien){
	this.liens[this.nombre]=lien;
	this.texte[this.nombre]=texte;
	this.nombre++;
}
function Onglet_afficher(){
	var i;
	for (i=0;i<this.nombre;i++){
		/*
		en ajoutant un target="leftframe" par exemple, on peut facilement choisir la destination du lien.

  • /
document.write('<a href="'+this.liens[i]+'"></this.nombre;i++){>'+this.texte[i]+'</a> / '); } } function Onglet_box(){ this.nombre=0; this.onglets=new Array(); this.ajouter_onglet=Onglet_box_ajouter_onglet; this.afficher=Onglet_box_afficher; } function Onglet_box_ajouter_onglet(titre){ this.onglets[this.nombre]=new Onglet(titre); this.nombre++; } function Onglet_box_afficher(){ 11111111111 document.write('<table width="100%"><tr>'); for (i=0;i<this.nombre;i++){ /* Ici, on peut modifier le style des entêtes
  • /
document.write('<td id="header'+i+'" style="background-color:#07F"><a href="javascript:ouvre(\''+i+'\')" >'+this.onglets[i].titre+'</a></td>'); } document.write('</tr><tr><td colspan="'+this.nombre+'">'); for (i=0;i<this.nombre;i++){ /* et ici, le style des onglets
  • /
document.write('<div id="div'+i+'" style="display:none;background-color:#0AF;">'); this.onglets[i].afficher(); document.write('</div>'); } document.write('</td></tr></table>'); nombre=this.nombre; } function ouvre(id){ a=document.getElementById('div'+id); for (i=0;i<nombre;i++){ document.getElementById('div'+i).style.display="none"; document.getElementById('header'+i).style.background="#07F"; } document.getElementById('header'+id).style.background="#7AF" document.getElementById('div'+id).style.display="block"; } </script> </head> <body> <script type="text/javascript"> a=new Onglet_box(); a.ajouter_onglet('acceuil'); a.onglets[0].add_link('index','index.php'); a.onglets[0].add_link('index2','index.php'); a.onglets[0].add_link('index1','index.php'); a.ajouter_onglet('acceuil1'); a.onglets[1].add_link('1indeezx','index.php'); a.onglets[1].add_link('1indeszetxqz2','index.php'); a.onglets[1].add_link('1indeztex1','index.php'); a.ajouter_onglet('acceuil3'); a.onglets[2].add_link('2index','index.php'); a.onglets[2].add_link('2index2','index.php'); a.onglets[2].add_link('2index1','index.php'); a.ajouter_onglet('acceuil2'); a.onglets[3].add_link('3index','index.php'); a.onglets[3].add_link('3index2','index.php'); a.onglets[3].add_link('3index1','index.php'); a.afficher(); ouvre(0); </script> </body> </html>

Conclusion :


C'est un menu Orienté Objet, je l'ai fait à l'origine pour quelqu'un d'autre, mais comme c'est aussi une de mes création (que je trouves plutot réussie comparée aux autres menus), je l'exposes...
L'orientation objet permet de faire bien plus de choses qu'on ne le penses... On peut grace à ça faire des menus cohérents, bien plus simples à mettre à jour que les menus classiques.

A voir également

Ajouter un commentaire

Commentaires

younes371
Messages postés
505
Date d'inscription
mercredi 29 décembre 2004
Statut
Membre
Dernière intervention
20 mars 2012

Bonjour,
Je travail sur un projet,oû je dois mettre des onglets automatique, ou des images deplaçables => vous m avez pa compris!! ??.
Alors j explique :
L'utilisateur lui meme peut créer ces onglet personnel et deplacer les images ds le site. vous pouvez m aider et m envoyer au moins un script de ça, soit pour les onglets soit pour le drag and drop
Pour bien me comprendre, je vous demande d aller voir ce site : www.netvibes.com ou www.google.com/ig
Si vous pouvez m'aider a trouver le script ou on le developpe ensemble ça serait gentil de votre part . Merci
coucou747
Messages postés
12303
Date d'inscription
mardi 10 février 2004
Statut
Modérateur
Dernière intervention
30 juillet 2012
30
quand on fait du document.write, c'est impossible d'ajouter un onglet en cours d'utilisation...
xriou
Messages postés
8
Date d'inscription
lundi 1 mai 2006
Statut
Membre
Dernière intervention
1 juillet 2006

Bonjour,

Bonjour comment ajouter un onglet et qu'il s'affiche ?

Aujourd'hui quand j'invoque ajouter_onglet je vois apparaître mon onglet rapidement puis je reviens sur ma page

exemple : <script type="text/javascript">
function ajouter(){
a=new Onglet_box();
a.ajouter_onglet('ONGLET A');
a.onglets[0].add_link('X4','index.php');
a.afficher();
ouvre(0);
}
</script>
[# MON LIEN]


Certains me diront pourquoi révinventer la router avec cette fonction qui sert à rien. C'est juste pour mes tests. C'est aussi parceque je n'ai pas réussi à ajouter correctement un onglet en cliquant sur un lien a href.
jesusonline
Messages postés
6827
Date d'inscription
dimanche 15 décembre 2002
Statut
Modérateur
Dernière intervention
13 octobre 2010
17
J'ai fait le bout de CSS vite fait sans vraiment chercher à le rendre joli ... :)

Si tu veux le meme comportement sous IE et FF :

* {margin:0; padding:0; border:0; list-style-type:none;}
dl#menu {list-style-type:none;position:relative;width:100%}
dl#menu dt { float:left; width:200px;}
dl#menu dd { display:none;position:absolute;left:0;top:2em;}
dl#menu dd ul {list-style-type:none;}
dl#menu dd ul li { float:left; width:150px;}

Cyril
cs_meh
Messages postés
66
Date d'inscription
dimanche 18 août 2002
Statut
Membre
Dernière intervention
9 juillet 2007

Salut JESUSONLINE, en effet moi je préfère aussi les css et la simplicité+accessibilité. Ton script ne déconne t'il pas un peu sur MIE, où les sous-menus sont décalés à droite (parfait par contre sur Moz/FF)

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.