Menu fichier xp de windows

Soyez le premier à donner votre avis sur cette source.

Vue 18 370 fois - Téléchargée 2 020 fois

Description

Ce codes est identique à celui de TheOnly, je l'ai juste corriger et maintenant il fonctionne.

Voila, Bonne Prog :-)

Source / Exemple :


VOILA LA SOURCE AVANT
==================
/* auteur: TheOnly */
/* Date de création: 7/12/02 */

/*-----------------------------------------------------------------|
|		Menu déroulant											   |
|	   ================											   |
|																   |
|	Menu déroulant genre Explorateur Windows XP.                   |
|																   |
|	Gestion du fader et du mouvement des menus.					   |
|																   |
|	AUTEUR:	TheOnly												   |
|----------------------------------------------------------------*/

// -= Variables globales =-
//==========================
var Interval = 50;
var SumInt = 0;
var imgOButton = "OButton.jpg";
var imgFButton = "FButton.jpg";

var PosXStart = 0;
var PosYStart = 0;
var intSepar = 20;
var bFader = false;

var strFader = "filter: alpha(opacity=0);";

var arrListMenu = new Array();

// -= Fonctions =-
//=================
function DoNothing() {}

function StartMenu(){
	for( var i = 0; i < arrListMenu.length; i++ )  fctWrite(i);			
}

function InitMenu( StartX, StartY, Separ, Fader ){
	PosXStart = StartX;
	PosYStart = StartY;
	intSepar = Separ;
	bFader = Fader;
}

function getObject( id ){
	for( var Cpt = 0; Cpt < arrListMenu.length; Cpt++ ){
	 	if( id == arrListMenu[Cpt].Name ) return arrListMenu[Cpt];
		for( var Cpt2 = 0; Cpt2 < arrListMenu[Cpt].Option.length; Cpt2++ ){
	 		if( id == arrListMenu[Cpt].Option[Cpt2].Name ) return arrListMenu[Cpt].Option[Cpt2];
		}
	}
}

function fctMove( strObj, intTo, intVitesse ){
	// But:		Bouger le menu de sa position 'Y' actuelle vers la position 'Y' "intTo".
	// Event:	/
	// Param.:	- Index = Numéro du menu. 
	//			- intTo = Position 'Y' finale du menu ou de l'option.
	//			- intVitesse = Vitesse de mouvement.
	
	var Obj = getObject( strObj );
	
	if( parseInt(intTo) != Obj.PosY ){
		if( parseInt(intTo) < Obj.PosY ){
			Obj.PosY -= 5 * intVitesse;
			if( Obj.PosY <= parseInt(intTo) ) Obj.PosY = parseInt(intTo);
		}
		else {
			Obj.PosY += 5 * intVitesse;
			if( Obj.PosY >= parseInt(intTo) ) Obj.PosY = parseInt(intTo);
		}
		document.getElementById( Obj.Name ).style.top = Obj.PosY;
		setTimeout("fctMove('" + Obj.Name + "', " + intTo + ", " + intVitesse + ")", Interval);
	}
}

function fctAnim( Index ){
	// But:		Animation du menu
	// Event:	Qd on clique sur l'en-tête du menu.
	// Param.:	- Index = Numéro du menu.
	
	var Menu = arrListMenu[Index];
	
	var To = 0;
	var intCpt = 0;
	
	if( !Menu.isShowed ){
		document.getElementById( Menu.ImageName ).src = "images/FButton.jpg";
		if( bFader ) fctSetOpacity(Index, "+");
		else document.getElementById( Menu.OptionName ).style.display = "";
		for( intCpt = 0; intCpt < Menu.Option.length; intCpt++){
			fctMove(Menu.Option[intCpt].Name, 0, intCpt);
			To += 30;
		}
		for( intCpt = Menu.Index + 1; intCpt < arrListMenu.length; intCpt++ ){
			fctMove(arrListMenu[intCpt].Name, To + arrListMenu[intCpt].PosY, Menu.Option.length + 1 );
		}
		Menu.isShowed = true;
	}
	else {
		document.getElementById( Menu.ImageName ).src = "images/OButton.jpg";
		if( bFader ) fctSetOpacity(Index, "-");
		for( intCpt = 0; intCpt < Menu.Option.length; intCpt++){
			fctMove(Menu.Option[intCpt].Name,-30*(intCpt), intCpt + 1);
			To += 30;
			SumInt += Interval/2;
		}
		for( intCpt = Index + 1; intCpt < arrListMenu.length; intCpt++ ){
			fctMove(arrListMenu[intCpt].Name, arrListMenu[intCpt].PosY - To, Menu.Option.length + 1 );
			SumInt += Interval/2;
		}
		Menu.isShowed = false;
		if( !bFader ) setTimeout("document.getElementById('" + Menu.OptionName + "').style.display = 'none'", SumInt);
		SumInt = 0;
	}
}

function fctSetOpacity( Index, strOp ){
	// But:		Initialisé l'opacité du menu.
	// Event:	/
	// Param.:	- Index = Numéro du menu.
	//			- strOp = Opération à effectuer sur l'opcaté du menu
	
	var Menu = arrListMenu[Index];
	
	if( Menu.Opac <= 101 && Menu.Opac >= -1 ){
		if( strOp == "+" ){
			Menu.Opac = Menu.Opac + 20;	
		}
		else {
			Menu.Opac = Menu.Opac - 20;
		}
		for( var i = 0; i < Menu.Option.length; i++ ) document.getElementById( Menu.Option[i].Name).filters.alpha.opacity = Menu.Opac;
		document.getElementById( Menu.OptionName).style.display = "";
		setTimeout("fctSetOpacity(" + Index + ", '" + strOp + "')", Interval);
	}
	else {
		if( strOp == "+" ){
			Menu.Opac = 100;	
		}
		else {
			Menu.Opac = 0;
			document.getElementById( Menu.OptionName).style.display = "none";
		}
		for( var i = 0; i < Menu.Option.length; i++ ) document.getElementById( Menu.Option[i].Name ).filters.alpha.opacity = Menu.Opac;
	}
}

function fctWrite( Index ){
	// But:		Ecriture du menu dans le browser.
	// Event:	/
	var strRBorder = "solid";
	var strLBorder = "solid";
	var strBBorder = "none";
	var strReturn = "";
	
	var Menu = arrListMenu[Index];
	
	strReturn += "<table border='0' width = '235' summary='' cellpadding = '0' cellspacing = '0' style='Position:absolute;top:" + Menu.PosY + ";left:" + Menu.PosX + ";' id = '" + Menu.Name + "'>"
	strReturn += "<tr style='z-index:1'><td><table border='0' summary='' cellpadding = '0' cellspacing = '0' style=''><tr onClick = \"fctAnim(" + Index + ")\" style='cursor:hand;'>";
	strReturn += "<td height = '35' width = '20'><img src='images/LBorder.jpg' border='0' width='31' height='35' alt=''></td>";
	strReturn += "<td height = '35' width = '25' background='images/bgHeader.jpg'><img src='" + Menu.Image + "' border='0' width='32' height='32' align='right'></td>";
	strReturn += "<td height = '35' width='150' background='images/bgHeader.jpg' style='color: #3399FF;font: bold  Tahoma;'>" + Menu.Caption + "</td>";
	strReturn += "<td height = '35' width = '25' background='images/bgHeader.jpg'><img id='" + Menu.ImageName + "' src='images/OButton.jpg' border='0' width='25' height='25' alt=''></td>";
	strReturn += "<td height = '35' width = '20'><img src='images/RBorder.jpg' border='0' width='31' height='35' alt=''></td>";
	strReturn += "</tr></table></td></tr><tr style=''><td>";
	strReturn += "<table border='0' width='100%' cellpadding='0' cellspacing='0'  id='" + Menu.OptionName + "' style=';z-index:0;display: none'>";
	for( var intCpt = 0; intCpt < Menu.Option.length; intCpt++ ){
		if( Menu.Option.length-1 == intCpt ){
			strBBorder = "solid";
		}
		strReturn += "<tr id='" + Menu.Option[intCpt].Name + "' style='position: relative; top:" + Menu.Option[intCpt].PosY + "; left:" + Menu.Option[intCpt].PosX + ";z-index: 0;" + ((bFader)? strFader : "")  + "'>";
		strReturn += "<td height = '30' width = '10%' style = 'border-style: none none " + strBBorder + " " + strLBorder + "; border-color: #E6F6F2; border-width: 1; color: #E6F6F2; background: #0000FF;'>&nbsp;</td>";
		strReturn += "<td height = '30' style = 'border-style: none none " + strBBorder + " none; border-color: #E6F6F2; border-width: 1; color: #E6F6F2; background: #0000FF;'><img src='" + Menu.Option[intCpt].Image + "' border='0' width='25' height='25' align='right'></td>";
		strReturn += "<td height = '30' style = 'border-style: none none " + strBBorder + " none; border-color: #E6F6F2; border-width: 1; color: #E6F6F2; background: #0000FF;'><a href = '" + Menu.Option[intCpt].Links + Menu.Option[intCpt].Param + "' Target = '" + Menu.Option[intCpt].Target + "' style='color:#E6F6F2'>&nbsp;" + Menu.Option[intCpt].Caption + "&nbsp;</a></td>";
		strReturn += "<td height = '30' width = '10%' style = 'border-style: none " + strRBorder + " " + strBBorder + " none; border-color: #E6F6F2; border-width: 1; color: #E6F6F2; background: #0000FF;'>&nbsp;</td>";
	}
	strReturn += "</tr></Table></td></tr></table>";
	document.write( strReturn );
}

function fctCreateOption( strName, strTitre, strHref, strParam, strTarget, strImage){
	this.Option[this.Option.length] = new OptionObject(strName, strTitre, strHref, strParam, strTarget, strImage, 0, -30*(this.Option.length));
}

// -= Objet "Menu" =-
//====================
function MenuObject( strMenuName, strImage, strImageName, strTitre, intPosX, intPosY ){
	this.Name = strMenuName;
	this.Image = strImage;
	this.ImageName = strImageName;
	this.Caption = strTitre;
	this.PosX = PosXStart;
	this.PosY = PosYStart + arrListMenu.length * (35 + intSepar);
	this.OptionName = strMenuName + "Option";
	this.isShowed = false;
	
	this.Opac = 0;
	this.Index = arrListMenu.length;
	arrListMenu[arrListMenu.length] = this;
	this.Option = new Array();
	
	this.CreateOption = fctCreateOption;
}

// -= Objet "Option " =-
//======================
function OptionObject( strName, strTitre, strHref, strParam, strTarget, strImage, intPosX, intPosY){
	this.PosX = intPosX;
	this.PosY = intPosY;
	this.Name = strName;
	this.Image = strImage;
	this.Caption = strTitre;
	this.Param = strParam;
	this.Target = strTarget;
	this.Links = strHref;
}
VOILA LA SOURCE APRES
==================

/* auteur: TheOnly */
/* Date de création: 7/12/02 */

/*-----------------------------------------------------------------|
|		Menu déroulant											   |
|	   ================											   |
|																   |
|	Menu déroulant genre Explorateur Windows XP.                   |
|																   |
|	Gestion du fader et du mouvement des menus.					   |
|																   |
|	AUTEUR:	TheOnly												   |
|----------------------------------------------------------------*/

// -= Variables globales =-
//==========================
var Interval = 50;
var SumInt = 0;
var imgOButton = "Img/OButton.jpg";
var imgFButton = "Img/FButton.jpg";

var PosXStart = 0;
var PosYStart = 0;
var intSepar = 20;
var bFader = false;

var strFader = "filter: alpha(opacity=0);";

var arrListMenu = new Array();

// -= Fonctions =-
//=================
function DoNothing() {}

function StartMenu(){
	for( var i = 0; i < arrListMenu.length; i++ )  fctWrite(i);			
}

function InitMenu( StartX, StartY, Separ, Fader ){
	PosXStart = StartX;
	PosYStart = StartY;
	intSepar = Separ;
	bFader = Fader;
}

function getObject( id ){
	for( var Cpt = 0; Cpt < arrListMenu.length; Cpt++ ){
	 	if( id == arrListMenu[Cpt].Name ) return arrListMenu[Cpt];
		for( var Cpt2 = 0; Cpt2 < arrListMenu[Cpt].Option.length; Cpt2++ ){
	 		if( id == arrListMenu[Cpt].Option[Cpt2].Name ) return arrListMenu[Cpt].Option[Cpt2];
		}
	}
}

function fctMove( strObj, intTo, intVitesse ){
	// But:		Bouger le menu de sa position 'Y' actuelle vers la position 'Y' "intTo".
	// Event:	/
	// Param.:	- Index = Numéro du menu. 
	//			- intTo = Position 'Y' finale du menu ou de l'option.
	//			- intVitesse = Vitesse de mouvement.
	
	var Obj = getObject( strObj );
	
	if( parseInt(intTo) != Obj.PosY ){
		if( parseInt(intTo) < Obj.PosY ){
			Obj.PosY -= 5 * intVitesse;
			if( Obj.PosY <= parseInt(intTo) ) Obj.PosY = parseInt(intTo);
		}
		else {
			Obj.PosY += 5 * intVitesse;
			if( Obj.PosY >= parseInt(intTo) ) Obj.PosY = parseInt(intTo);
		}
		document.getElementById( Obj.Name ).style.top = Obj.PosY;
		setTimeout("fctMove('" + Obj.Name + "', " + intTo + ", " + intVitesse + ")", Interval);
	}
}

function fctAnim( Index ){
	// But:		Animation du menu
	// Event:	Qd on clique sur l'en-tête du menu.
	// Param.:	- Index = Numéro du menu.
	
	var Menu = arrListMenu[Index];
	
	var To = 0;
	var intCpt = 0;
	
	if( !Menu.isShowed ){
		document.getElementById( Menu.ImageName ).src = "Img/FButton.jpg";
		if( bFader ) fctSetOpacity(Index, "+");
		else document.getElementById( Menu.OptionName ).style.display = "";
		for( intCpt = 0; intCpt < Menu.Option.length; intCpt++){
			fctMove(Menu.Option[intCpt].Name, 0, intCpt);
			To += 30;
		}
		for( intCpt = Menu.Index + 1; intCpt < arrListMenu.length; intCpt++ ){
			fctMove(arrListMenu[intCpt].Name, To + arrListMenu[intCpt].PosY, Menu.Option.length + 1 );
		}
		Menu.isShowed = true;
	}
	else {
		document.getElementById( Menu.ImageName ).src = "Img/OButton.jpg";
		if( bFader ) fctSetOpacity(Index, "-");
		for( intCpt = 0; intCpt < Menu.Option.length; intCpt++){
			fctMove(Menu.Option[intCpt].Name,-30*(intCpt), intCpt + 1);
			To += 30;
			SumInt += Interval/2;
		}
		for( intCpt = Index + 1; intCpt < arrListMenu.length; intCpt++ ){
			fctMove(arrListMenu[intCpt].Name, arrListMenu[intCpt].PosY - To, Menu.Option.length + 1 );
			SumInt += Interval/2;
		}
		Menu.isShowed = false;
		if( !bFader ) setTimeout("document.getElementById('" + Menu.OptionName + "').style.display = 'none'", SumInt);
		SumInt = 0;
	}
}

function fctSetOpacity( Index, strOp ){
	// But:		Initialisé l'opacité du menu.
	// Event:	/
	// Param.:	- Index = Numéro du menu.
	//			- strOp = Opération à effectuer sur l'opcaté du menu
	
	var Menu = arrListMenu[Index];
	
	if( Menu.Opac <= 101 && Menu.Opac >= -1 ){
		if( strOp == "+" ){
			Menu.Opac = Menu.Opac + 20;	
		}
		else {
			Menu.Opac = Menu.Opac - 20;
		}
		for( var i = 0; i < Menu.Option.length; i++ ) document.getElementById( Menu.Option[i].Name).filters.alpha.opacity = Menu.Opac;
		document.getElementById( Menu.OptionName).style.display = "";
		setTimeout("fctSetOpacity(" + Index + ", '" + strOp + "')", Interval);
	}
	else {
		if( strOp == "+" ){
			Menu.Opac = 100;	
		}
		else {
			Menu.Opac = 0;
			document.getElementById( Menu.OptionName).style.display = "none";
		}
		for( var i = 0; i < Menu.Option.length; i++ ) document.getElementById( Menu.Option[i].Name ).filters.alpha.opacity = Menu.Opac;
	}
}

function fctWrite( Index ){
	// But:		Ecriture du menu dans le browser.
	// Event:	/
	var strRBorder = "solid";
	var strLBorder = "solid";
	var strBBorder = "none";
	var strReturn = "";
	
	var Menu = arrListMenu[Index];
	
	strReturn += "<table border='0' width = '235' summary='' cellpadding = '0' cellspacing = '0' style='Position:absolute;top:" + Menu.PosY + ";left:" + Menu.PosX + ";' id = '" + Menu.Name + "'>"
	strReturn += "<tr style='z-index:1'><td><table border='0' summary='' cellpadding = '0' cellspacing = '0' style=''><tr onClick = \"fctAnim(" + Index + ")\" style='cursor:hand;'>";
	strReturn += "<td height = '35' width = '20'><img src='Img/LBorder.jpg' border='0' width='31' height='35' alt=''></td>";
	strReturn += "<td height = '35' width = '25' background='Img/bgHeader.jpg'><img src='" + Menu.Image + "' border='0' width='32' height='32' align='right'></td>";
	strReturn += "<td height = '35' width='150' background='Img/bgHeader.jpg' style='color: #3399FF;font: bold  Tahoma;'>" + Menu.Caption + "</td>";
	strReturn += "<td height = '35' width = '25' background='Img/bgHeader.jpg'><img id='" + Menu.ImageName + "' src='Img/OButton.jpg' border='0' width='25' height='25' alt=''></td>";
	strReturn += "<td height = '35' width = '20'><img src='Img/RBorder.jpg' border='0' width='31' height='35' alt=''></td>";
	strReturn += "</tr></table></td></tr><tr style=''><td>";
	strReturn += "<table border='0' width='100%' cellpadding='0' cellspacing='0'  id='" + Menu.OptionName + "' style=';z-index:0;display: none'>";
	for( var intCpt = 0; intCpt < Menu.Option.length; intCpt++ ){
		if( Menu.Option.length-1 == intCpt ){
			strBBorder = "solid";
		}
		strReturn += "<tr id='" + Menu.Option[intCpt].Name + "' style='position: relative; top:" + Menu.Option[intCpt].PosY + "; left:" + Menu.Option[intCpt].PosX + ";z-index: 0;" + ((bFader)? strFader : "")  + "'>";
		strReturn += "<td height = '30' width = '10%' style = 'border-style: none none " + strBBorder + " " + strLBorder + "; border-color: #E6F6F2; border-width: 1; color: #E6F6F2; background: #0000FF;'>&nbsp;</td>";
		strReturn += "<td height = '30' style = 'border-style: none none " + strBBorder + " none; border-color: #E6F6F2; border-width: 1; color: #E6F6F2; background: #0000FF;'><img src='" + Menu.Option[intCpt].Image + "' border='0' width='25' height='25' align='right'></td>";
		strReturn += "<td height = '30' style = 'border-style: none none " + strBBorder + " none; border-color: #E6F6F2; border-width: 1; color: #E6F6F2; background: #0000FF;'><a href = '" + Menu.Option[intCpt].Links + Menu.Option[intCpt].Param + "' Target = '" + Menu.Option[intCpt].Target + "' style='color:#E6F6F2'>&nbsp;" + Menu.Option[intCpt].Caption + "&nbsp;</a></td>";
		strReturn += "<td height = '30' width = '10%' style = 'border-style: none " + strRBorder + " " + strBBorder + " none; border-color: #E6F6F2; border-width: 1; color: #E6F6F2; background: #0000FF;'>&nbsp;</td>";
	}
	strReturn += "</tr></Table></td></tr></table>";
	document.write( strReturn );
}

function fctCreateOption( strName, strTitre, strHref, strParam, strTarget, strImage){
	this.Option[this.Option.length] = new OptionObject(strName, strTitre, strHref, strParam, strTarget, strImage, 0, -30*(this.Option.length));
}

// -= Objet "Menu" =-
//====================
function MenuObject( strMenuName, strImage, strImageName, strTitre, intPosX, intPosY ){
	this.Name = strMenuName;
	this.Image = strImage;
	this.ImageName = strImageName;
	this.Caption = strTitre;
	this.PosX = PosXStart;
	this.PosY = PosYStart + arrListMenu.length * (35 + intSepar);
	this.OptionName = strMenuName + "Option";
	this.isShowed = false;
	
	this.Opac = 0;
	this.Index = arrListMenu.length;
	arrListMenu[arrListMenu.length] = this;
	this.Option = new Array();
	
	this.CreateOption = fctCreateOption;
}

// -= Objet "Option " =-
//======================
function OptionObject( strName, strTitre, strHref, strParam, strTarget, strImage, intPosX, intPosY){
	this.PosX = intPosX;
	this.PosY = intPosY;
	this.Name = strName;
	this.Image = strImage;
	this.Caption = strTitre;
	this.Param = strParam;
	this.Target = strTarget;
	this.Links = strHref;
}

Regarder au niveau des images.
il avait changer le nom du repertoire mais pas dans le fichier
Voila l'adresse de l'autre sources : 
http://www.javascriptfr.com/article.aspx?Val=356
Et puis il y a quelques modifications parsi par là.
A vous de les trouvées.

Conclusion :


JE N'AIS PAS VOULUE PIQUER LA SOURCES D'AILLEUR C'EST THEONLY QUI LA FAITE.

Codes Sources

A voir également

Ajouter un commentaire Commentaires
Messages postés
14
Date d'inscription
mardi 23 mars 2004
Statut
Membre
Dernière intervention
13 février 2007

Je le trouve assez sympa comment peut on faire pour que un menu se referme automatiquement lorsqu'on veut en ouvrir un autre ?
Messages postés
18
Date d'inscription
mardi 3 mai 2005
Statut
Membre
Dernière intervention
5 mars 2006

Pas mal, mais je ne voit pas l'utilité
Messages postés
48
Date d'inscription
dimanche 12 mai 2002
Statut
Membre
Dernière intervention
26 novembre 2003

Bon pour répondre à tout ça :

Si je dit que je l'ai réparé c que je l'ai reparé. cela fait trop longtemps que je l'ai fais et je ne veux pas m'y replonger.

Pour DARTHVADOR :

VA TE GRATTER LE CUL p'tit con et ne viens pas nous faire chier car sauf preuve du contraire ce n'est pas toi qu'il l'a faite cette sources. Alors tait toi.

Sur ceux bonne prog @ tous... :).
Messages postés
42
Date d'inscription
mercredi 12 juin 2002
Statut
Membre
Dernière intervention
6 octobre 2003

et je rajouterai si cela peut vous aider de voir sur le site wininfo.com ils ont vraisemblablement voulut faire dans la même idée !
Messages postés
42
Date d'inscription
mercredi 12 juin 2002
Statut
Membre
Dernière intervention
6 octobre 2003

bien hin hin hin, escuser mon apprenti la haine l'envahit moi je trouve qu'il y a un intérêt au script tout de même ! et je suis étonner par TheOnly et sa capacité à developper il feras, c'est sûr, de grandes choses.
Afficher les 9 commentaires

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.