Menu fichier xp de windows

0/5 (9 avis)

Vue 18 498 fois - Téléchargée 2 050 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
yukhaa Messages postés 14 Date d'inscription mardi 23 mars 2004 Statut Membre Dernière intervention 13 février 2007
2 janv. 2006 à 13:38
Je le trouve assez sympa comment peut on faire pour que un menu se referme automatiquement lorsqu'on veut en ouvrir un autre ?
mobilicorpus Messages postés 18 Date d'inscription mardi 3 mai 2005 Statut Membre Dernière intervention 5 mars 2006
3 mai 2005 à 19:45
Pas mal, mais je ne voit pas l'utilité
Scooby1 Messages postés 48 Date d'inscription dimanche 12 mai 2002 Statut Membre Dernière intervention 26 novembre 2003
29 oct. 2003 à 22:15
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... :).
cs_Symbiote Messages postés 42 Date d'inscription mercredi 12 juin 2002 Statut Membre Dernière intervention 6 octobre 2003
13 févr. 2003 à 10:24
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 !
cs_Symbiote Messages postés 42 Date d'inscription mercredi 12 juin 2002 Statut Membre Dernière intervention 6 octobre 2003
13 févr. 2003 à 10:20
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.