CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2010 08 01 01:12:59

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

ONGLETS

Information sur la source

Note :

2,73 / 10

Catégorie :Menu & Co Classé sous :menu, onglets Niveau :Expert Date de création :18/08/2005 Date de mise à jour :30/11/2005 13:40:08 Vu :38 982

Auteur : coucou747

Ecrire un message privé

Site perso

Ce membre participe au partage de revenus publicitaires

Commentaire sur cette source (16)

Ajouter un commentaire et/ou une note

Description

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

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

<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.

Historique

30 novembre 2005 13:40:11 :: ajouts de mots clefs

Sources du même auteur

NOTATION CLASSIQUE VERS NOTATION NPI

LIST.ML D'OCAML EN JAVASCRIPT

UN CHRONOMETRE EN SVG+JAVASCRIPT

WYSIWYG TOTALEMENT OO

DU DOM EN SVG : UNE HORLOGE ANALOGIQUE

Toutes les sources de coucou747

Sources de la même categorie

MENU CIRCULAIRE par adelmonis

MENU TASKBAR WINDOWSXP HOME par micking

MENU ANIMER HORIZONTALE OU VERTICAL , ACCÈSSIBLE SANS JS (SA... par Kimjoa

WAVEBOX V1.1, LA SLIDEBAR SEXY par flashdumpf

MENU VERTICALE GAUCHE ET DROIT DEROULANT par kazma

Toutes les sources de la catégorie Menu & Co

Sources en rapport avec celle ci

MENU CIRCULAIRE par adelmonis

MENU ANIMER HORIZONTALE OU VERTICAL , ACCÈSSIBLE SANS JS (SA... par Kimjoa

WAVEBOX V1.1, LA SLIDEBAR SEXY par flashdumpf

MENU DÉROULANT EN IMAGES par dlvains

MENU CONTEXTUEL GRÂCE AU CLICK DROIT DE LA SOURIS AVEC DES M... par OB1_12

Commentaires et avis

Commentaire de quicest le 19/08/2005 07:15:37

° Niveau de la source : Expert
° ...rares sont ceux...
° que je trouves plutot réussie comparée
aux autres menus
...etc...etc... quelle modestie !

Commentaire de JPR le 19/08/2005 07:33:26

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

Commentaire de ze_fred le 19/08/2005 10:02:18

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

Commentaire de coucou747 le 19/08/2005 12:00:01

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...

Commentaire de ze_fred le 19/08/2005 12:09:28

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('<a href="'+this.liens[i]+'"></this.nombre;i++){>'+this.texte[i]+'</a> / ');
--------------------------------------------- là
    }

Commentaire de coucou747 le 19/08/2005 12:11:54

pourquoi ???

Commentaire de ze_fred le 19/08/2005 12:17:20

mais parceque ca veut rien dire...
ca va ecrire
<a href="liens_x"></this.nombre;i++){>text_x</a>/
tu voudrais pas plutot que ca ecrive
<a href="liens_x">text_x</a> ?

Commentaire de coucou747 le 19/08/2005 12:24:04

oulala, exact, j'ai eu comme qui dirait une grosse erreur d'inatention, je corgerais ça dans quelques jours...

Commentaire de jesusonline le 20/08/2005 12:28:10 administrateur CS

Il existe beaucoup plus simple pour faire quelque chose de ce genre ...

pourquoi ne pas utiliser html :) ainsi google pourra lui aussi naviguer dans le menu.

Voila quelque chose de rapidement fait

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Menu sous forme d'onglets</title>
<style type="text/css">
* {margin:0; padding:0; border:0; list-style-type:none;}
dl#menu {list-style-type:none;}
dl#menu dt { float:left; width:200px;}
dl#menu dd { display:none; position:relative;}
dl#menu dd ul {list-style-type:none; position:absolute; top:2em;}
dl#menu dd ul li { float:left; width:150px;}
</style>
<script type="text/javascript">
window.onload = function(e)
{
loadMenu();
}

function loadMenu()
{
var elmtMenu = document.getElementById('menu');
var elmtTitre = elmtMenu.getElementsByTagName('dt');

for ( i = 0; i < elmtTitre.length; i++ )
{
elmtTitre[i].onclick = function(e)
{
var elmtSousMenu = document.getElementById('menu').getElementsByTagName('dd');
for ( j = 0; j < elmtSousMenu.length; j++ )
{
elmtSousMenu[j].style.display = 'none';
}
var node = this.nextSibling;
while (node.nodeType != 1)
node = node.nextSibling;
node.style.display = 'block';
}
}

}
</script>
</head>
<body>
<dl id="menu">
<dt>Titre I</dt>
<dd>
<ul>
<li><a href="#">I.1</a></li>
<li><a href="#">I.2</a></li>
<li><a href="#">I.3</a></li>
<li><a href="#">I.4</a></li>
</ul>
</dd>
<dt>Titre II</dt>
<dd>
<ul>
<li><a href="#">II.1</a></li>
<li><a href="#">II.2</a></li>
<li><a href="#">II.3</a></li>
<li><a href="#">II.4</a></li>
</ul>
</dd>
<dt>Titre III</dt>
<dd>
<ul>
<li><a href="#">III.1</a></li>
<li><a href="#">III.2</a></li>
<li><a href="#">III.3</a></li>
<li><a href="#">III.4</a></li>
</ul>
</dd>
</dl>
</body>
</html>

(j'espere que la présentation sera correcte)

Les avantages, beaucoup plus leger que ce que tu as fait ! google pourra lui aussi aller voir le menu !!! beaucoup plus simple que toi pour gerer le menu etc ...

:)

Commentaire de coucou747 le 20/08/2005 12:34:51

le but était la simplicitée, pas l'accès ou non de google aux pages...

google a ses sitesmaps pour ça...

Commentaire de jesusonline le 20/08/2005 12:41:25 administrateur CS

Parce que mon code est plus compliqué que le tient ?

et tu crois vraiment que les sitesmaps de google suffisent ? un lien ne remplacera pas un lien ! et puis pour les aveugles :) eux aussi doivent aller lire dans le sitemap pour naviguer sur ton site ;)

et enfin j'ai oublié de citer un autre avantage de mon code, j'utilise CSS, donc ce sera beaucoup plus facile de changer l'allure de menu que ton bout de javascript :)

Commentaire de meh le 22/08/2005 02:54:28

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)

Commentaire de jesusonline le 22/08/2005 08:56:58 administrateur CS

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

Commentaire de xriou le 28/06/2006 01:00:12

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>
<a href="#" onClick="ajouter();" >MON LIEN</a>

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.

Commentaire de coucou747 le 28/06/2006 01:29:53

quand on fait du document.write, c'est impossible d'ajouter un onglet en cours d'utilisation...

Commentaire de younes371 le 19/09/2006 18:33:15

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

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

Problème "menu onglets" déconnexion [ par jvergoby ] Bonjour à tous,j'ai un petit soucis avec un code que j'ai pris ici :http://www.javascriptfr.com/codes/MENU-ONGLETS-AVEC-SCROLLB Menu avec onglets (tous à gauche) [ par lineb76 ] Bonjour,J'aurais voulu savoir si vous saviez comment faire un menu avec onglets mais où ils apparaitraient tous à gauche (vous voyez ce que Ajax et Send [ par syndrael ] Bonjour, J'ai un souci avec Ajax et IE. Mon code fonctionne très bien sous Firefox. Voila le problème: J'ai un menu déroulant qui fait Onglets [ par elevira ] Je refais acutellement un site web qui est composé de multiples frames. La contrainte que j'ai, est qu'il faut que plusieurs pages puissent &#234 Menu deroulant horizontal [ par flow92220 ] J'ai donc un menu déroulant qui deroule les differents onglets quand la souris passe dessus.Mais, mon probleme c'est que le menu ne se "ré-e menu [ par loubaba ] slt tt le mondevoila je suis en train de cree un site sur ma region et j'ai besoin des menus que j'ai trouver sur ce site:http://www.isaip.orget si qq Récupérer une valeur passée en paramètre <script src="menu.js?id=5" …></script> [ par marieline01 ] Bonjour, Descriptif : Dans ma page index.html, jinsère un menu qui est défini dans ma page de code menu.js&#14 Menu type mac [ par kk8ete ] Bonjour j'ai trouvé cette source : http://www.javascriptfr.com/code.aspx?ID=26334 et je voudrais faire exactement le meme type de menu mais en chang double ouverture de pages : calque css et onclick [ par minao06 ] J'ai un souci concernant un menu horizontal et le lancement d'une fenetre d'une taille predéfini. Lorsque je clique sur un lien du sous-menu css, besoin d'un code pr un menu qui affichent des sous-menus que lorque l'on clique sur la rubrique du menu souhaité [ par galdakilla ] bonjour,je souhaitais savoir si quelqu'un connaissaist  un code qui permet d'afficher un menu mais que les sous-menus n'apparaissent que lorsque

Nos sponsors

Derniers Blogs

WP7 5K BELGIUM CHALLENGE par junarnoalg

LES MONADES POUR LES NULS par mdufourneaudravel

[WP7] AJOUTER DES IMAGES DANS LA MEDIA LIBRARY D'UN WINDOWS PHONE 7 par Audrey

VIVE LES MOCKS ET LES POCOS par vLabz

[WF4] WORKFLOW AND CUSTOM ACTIVITIES - BEST PRACTICES (4/5) par JeremyJeanson

Forum

RE : PROBLEME ENCHAINEMENT DE FONCTION par loicseg

PROBLEME ENCHAINEMENT DE FONCTION par loicseg

RE : MODéLISATION FILE D'ATTENTE DE COMMANDE AVEC HTML/AJAX/MYSQL par PetoleTeam

RE : CHANGER LA VALEUR D'UNE VARIABLE PAR UNE FONCTION par PetoleTeam

RE : SUBMIT AVEC UNE IMAGE EN AJAX : ENVOI DE FORMULAIRE par romi36

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Logiciels

Crystal Report (11)
CRYSTAL REPORT (11)

Crystal Reports est un outil de reporting souple et puissant, vous pouvez très facilement consult...

Cliquez pour télécharger Crystal Report
Academy System (12.0.2.0)
ACADEMY SYSTEM (12.0.2.0)

Logiciel de gestion des établissements. - élèves/étudiants (inscription, dossier, absence...) -...

Cliquez pour télécharger Academy System
Xilisoft iPod Vidéo Convertisseur 6 (6.0.3.0419)
XILISOFT IPOD VIDéO CONVERTISSEUR 6 (6.0.3.0419)

Xilisoft iPod Vidéo Convertisseur est un outil puissant de conversion d'iPod, facile à utiliser. ...

Cliquez pour télécharger Xilisoft iPod Vidéo Convertisseur 6
Xilisoft iPhone Vidéo Convertisseur 6 (6.0.3.0419)
XILISOFT IPHONE VIDéO CONVERTISSEUR 6 (6.0.3.0419)

Xilisoft iPhone Vidéo Convertisseur est le meilleur logiciel de conversion iPhone qui peut facile...

Cliquez pour télécharger Xilisoft iPhone Vidéo Convertisseur 6
Xilisoft iPad Vidéo Convertisseur 6 (6.0.3.0419)
XILISOFT IPAD VIDéO CONVERTISSEUR 6 (6.0.3.0419)

Il s'agit d'un logiciel polyvalent pour convertir les formats vidéo/audio populaires en formats p...

Cliquez pour télécharger Xilisoft iPad Vidéo Convertisseur 6