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

Ce site au démarrage

begin process at 2012 02 12 00:31:02

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 :41 706

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

UN MENU EN CSS par Julien39

FLÈCHE CLIGNOTANTE AU SURVOL D'UN LIEN par lecurieux41

TREEMENU-2.3.6-MACNIP par neep

MENU CIRCULAIRE par adelmonis

MENU TASKBAR WINDOWSXP HOME par micking

Toutes les sources de la catégorie Menu & Co

Sources en rapport avec celle ci

ONGLETS ET CHANGEMENT INSTANTANÉ DE LA LANGUE par william voirol

UN MENU EN CSS par Julien39

TREEMENU-2.3.6-MACNIP par neep

MENU CIRCULAIRE par adelmonis

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

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

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

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

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

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 onglets style site NVIDIA [ par ju0123456789 ] Bonjour, J'aimerais utiliser un systeme d'onglets similaire à la page d'accueil du site nvidia http://www.nvidia.fr Quand on passe la souris sur un 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,

Nos sponsors

Derniers Blogs

SESSION SILVERLIGHT 5 3D : SLIDES ET DEMOS par Groc

[TECHDAYS 2012] SESSION WEBMATRIX 2 : LE COUTEAU SUISSE GRATUIT POUR VOS DéVELOPPEMENTS WEB - SLIDES par gpommier

[SHAREPOINT] LES SESSIONS TECHDAYS 2012. par Patrick Guimonet

TECHDAYS PARIS 2012 : SESSION PLEINIèRE JOUR 3 par ROMELARD Fabrice

MISHRA READER : UN LECTEUR RSS TRèS ZUNE STYLE EN OPEN SOURCE ! par Vko

Forum

RE : RéCUPéRER LA VALEUR D'UNE VARIABLE PHP POUR L'UTILISER EN JAVASCRIPT par stealone

RE : TRANSFARMATION DES VARIABLES par marlopremier

RE : ADAPTER UN SCRIPT POUR IE6 par Ewan83

ADAPTER UN SCRIPT POUR IE6 par Ewan83

RE : CREATION DE SCORING OU RATING par Alex16000

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Passerelle Pericles sur site Joomla 17
Budget : 499€
Infogerance Serveur Debian Linux
Budget : 2 400€
Developpeur applications iphone - ipad - android
Budget : 800€

Logiciels

Tribler (2012)
TRIBLER (2012)

Tribler est un client pair à pair (P2P/Peer-to-Peer) open source avec la capacité de regarder des...

Cliquez pour télécharger Tribler
OneSwarm (2012)
ONESWARM (2012)

Le peer-to-peer qui protège votre vie privée, c'est OneSwarm. Ce logiciel de peer-to-peer crypté...

Cliquez pour télécharger OneSwarm
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)

PONAMEDIA TV DEVIENS HELLLOOO FLASH LA TV SUR VOTRE ORDINATEUR. Toute une plateforme Multi...

Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO
Academy System (17.2.1.0)
ACADEMY SYSTEM (17.2.1.0)

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

Cliquez pour télécharger Academy System
Easy-Planning (1.0.0.1)
EASY-PLANNING (1.0.0.1)

Basé sur les mêmes principes que MyPlanning, Easy-Planning permet de créer des plannings sous la ...

Cliquez pour télécharger Easy-Planning