Menu fichier xp de windows

Télécharger le projet
Commenter

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.
Télécharger le projet

Codes Sources

A voir également

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 (Scooby1)