Onglets

Commenter

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

S'inscrire maintenant

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.

Du même auteur (coucou747)