Onglets

Soyez le premier à donner votre avis sur cette source.

Snippet vu 45 455 fois - Téléchargée 28 fois

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

Ajouter un commentaire Commentaires
cs_quicest Messages postés 32 Date d'inscription samedi 16 juillet 2005 Statut Membre Dernière intervention 17 avril 2013
19 août 2005 à 07:15
° Niveau de la source : Expert
° ...rares sont ceux...
° que je trouves plutot réussie comparée
aux autres menus
...etc...etc... quelle modestie !
cs_JPR Messages postés 37 Date d'inscription mercredi 3 juillet 2002 Statut Membre Dernière intervention 7 juin 2008
19 août 2005 à 07:33
Bonjour,

Pourquoi ne pas une URL pour voir et donner un aperçu de ton menu...
Ca serait tellement plus simple pour les visiteurs.
Merci si tu nous fais çà
Bonne journée
JPR
ze_fred Messages postés 15 Date d'inscription lundi 16 août 2004 Statut Membre Dernière intervention 14 septembre 2007
19 août 2005 à 10:02
je n'ai pas lancé ton code. Je l'ai juste lu ainsi que tes commentaires:
- Ton code ne marche pas (en tout cas en l'état) : " 11111111111" ou le copier/coller de la reste de la boucle fort dans ta fonction init_objet
- Il y a du code mort ("a=document.getElementById('div'+id); ", this.nombre ne sert a rien...)

Ensuite juste sur la forme:
- document.write est à éviter, je pense qu'il est preferable de passer par innerHTML
- pour les functions de ton objet, le code est plus lisible et les portées de fonctions plus explicites si tu fais
this.add_link= function (texte, lien){ .... } plutôt que d'affecter le pointeur sur ta fonction comme tu le fais.
- les tables ne sont pas faites pour ça, tout en div s'aurait été mieux.

Pour conclure, code sympa, mais certainement pas niveau expert.
Amicalement,
Fred
coucou747 Messages postés 12303 Date d'inscription mardi 10 février 2004 Statut Membre Dernière intervention 30 juillet 2012 44
19 août 2005 à 12:00
je ne vois pas ou j'ai une boucle infinie...
pour les pointeurs de fonction, c'est vrai que ça simplifierais les choses.

un table pour un onglet, moi je trouves ça plutot pas mal... un div aurait du avoir un display aproprié, pour la border, ça n'aurait pas été facile...

enfin voila, le div ne me plaisait pas...

innerHTML est efficace, j'y ai également pensé, mais il aurait fallu un div pour l'accrocher à la page, et je ne voulais pas forcer le webmaster a mettre du code html suplémentaire pour avoir ce menu.

si je ne propose pas d'exemples en ligne, c'est que je n'ai pas décidé d'utiliser ce menu sur mon site...


pour le niveau expert, je l'ai mis en référence à
http://www.javascriptfr.com/code.aspx?ID=32134 qui n'a qu'un objet, et qui n'est pas compatible firefox...
http://www.javascriptfr.com/code.aspx?ID=31293
celui ci qui peut simplement être remplacé par du css...

et nombre de menus médiocres, sans vrai avancée coté programmation...

le mien n'est pas super joli, mais coté prog, il les dépasse largement...
ze_fred Messages postés 15 Date d'inscription lundi 16 août 2004 Statut Membre Dernière intervention 14 septembre 2007
19 août 2005 à 12:09
il n'y a pas de boucles infinies, juste un soucis la :
for (i=0;i<this.nombre;i++){
/*
en ajoutant un target="leftframe" par exemple, on peut facilement choisir la destination du lien.
*/
document.write('['+this.liens[i]+' </this.nombre;i++){>'+this.texte[i]+'] / ');
--------------------------------------------- là
}
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)