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

Ce site au démarrage

begin process at 2013 05 24 20:09:40

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

MENU DE GAUCHE WIN XP

Information sur la source

Note :
Aucune note

Catégorie :Navigation Classé sous :XPleftPANEL, navigationleft XP, XP navigation, menuXP Niveau :Initié Date de création :03/05/2010 Vu / téléchargé :3 996 / 385

Auteur : micking

Ecrire un message privé

Site perso

Commentaire sur cette source (1)

Ajouter un commentaire et/ou une note

Description

Cliquez pour voir la capture en taille normale

voici le menu de gauche d'une fenêtre Windows après avoir présenté l'arborescence et la taskBar voici le menu contextuel j'espère bien un jour voire un site web fonctionné comme un système d'exploitation

Source

Mettez-le dans votre <HEAD> section
<style type="text/css">
html{
height:100%;
}
body{
height:100%;
margin:0px;
padding:0px;
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
}
.ad{
margin-top:120px;
}
h1{
font-size:0.9em;
}
a{
color:red;
}
/* Entire pane */
#dhtmlgoodies_xpPane{
background-color:#7190e0;
float:left;
height:1200px;
width:200px;
}
#dhtmlgoodies_xpPane .dhtmlgoodies_panel{
margin-left:10px;
margin-right:10px;
margin-top:10px;
}
#dhtmlgoodies_xpPane .panelContent{
font-size:0.7em;
background-image:url('images/bg_pane_right.gif');
background-position:top right;
background-repeat:repeat-y;
border-left:1px solid #FFF;
border-bottom:1px solid #FFF;
padding-left:2px;
padding-right:2px;
overflow:hidden;
position:relative;
clear:both;
}
#dhtmlgoodies_xpPane .panelContent div{
position:relative;
}
#dhtmlgoodies_xpPane .dhtmlgoodies_panel .topBar{
background-image:url('images/bg_panel_top_right.gif');
background-repeat:no-repeat;
background-position:top right;
height:25px;
padding-right:5px;
cursor:pointer;
overflow:hidden;
}
#dhtmlgoodies_xpPane .dhtmlgoodies_panel .topBar span{
line-height:25px;
vertical-align:middle;
font-family:arial;
font-size:0.7em;
color:#215DC6;
font-weight:bold;
float:left;
padding-left:5px;
}
#dhtmlgoodies_xpPane .dhtmlgoodies_panel .topBar img{
float:right;
cursor:pointer;
}
#otherContent{ /* Normal text content */
float:left; /* Firefox - to avoid blank white space above panel */
padding-left:10px; /* A little space at the left */
}
</style>
<script type="text/javascript">
/************************************************************************************************************
@fileoverview
Floating window
Copyright (C) October, 2005 Alf Magne Kalleland(post@dhtmlgoodies.com)
This library is free software; you can redistribute it and/or
modify it under the terms of the GNU Lesser General Public
License as published by the Free Software Foundation; either
version 2.1 of the License, or (at your option) any later version.
This library is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
Lesser General Public License for more details.
You should have received a copy of the GNU Lesser General Public
License along with this library; if not, write to the Free Software
Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
www.dhtmlgoodies.com
Alf Magne Kalleland
/* Update LOG
January, 28th - Fixed problem when double clicking on a pane(i.e. expanding and collapsing).
*/
var xpPanel_slideActive = true; // Slide down/up active?
var xpPanel_slideSpeed = 20; // Speed of slide
var xpPanel_onlyOneExpandedPane = false; // Only one pane expanded at a time ?
var dhtmlgoodies_xpPane;
var dhtmlgoodies_paneIndex;
var savedActivePane = false;
var savedActiveSub = false;
var xpPanel_currentDirection = new Array();
var cookieNames = new Array();
var currentlyExpandedPane = false;
/*
These cookie functions are downloaded from
http://www.mach5.com/support/analyzer/manual/html/General/CookiesJavaScript.htm
*/
function Get_Cookie(name) {
var start = document.cookie.indexOf(name+"=");
var len = start+name.length+1;
if ((!start) && (name != document.cookie.substring(0,name.length))) return null;
if (start == -1) return null;
var end = document.cookie.indexOf(";",len);
if (end == -1) end = document.cookie.length;
return unescape(document.cookie.substring(len,end));
}
// This function has been slightly modified
function Set_Cookie(name,value,expires,path,domain,secure) {
expires = expires * 60*60*24*1000;
var today = new Date();
var expires_date = new Date( today.getTime() + (expires) );
var cookieString = name + "=" +escape(value) +
( (expires) ? ";expires=" + expires_date.toGMTString() : "") +
( (path) ? ";path=" + path : "") +
( (domain) ? ";domain=" + domain : "") +
( (secure) ? ";secure" : "");
document.cookie = cookieString;
}
function cancelXpWidgetEvent()
{
return false;
}
function showHidePaneContent(e,inputObj)
{
if(!inputObj)inputObj = this;
var img = inputObj.getElementsByTagName('IMG')[0];
var numericId = img.id.replace(/[^0-9]/g,'');
var obj = document.getElementById('paneContent' + numericId);
if(img.src.toLowerCase().indexOf('up')>=0){
currentlyExpandedPane = false;
img.src = img.src.replace('up','down');
if(xpPanel_slideActive){
obj.style.display='block';
xpPanel_currentDirection[obj.id] = (xpPanel_slideSpeed*-1);
slidePane((xpPanel_slideSpeed*-1), obj.id);
}else{
obj.style.display='none';
}
if(cookieNames[numericId])Set_Cookie(cookieNames[numericId],'0',100000);
}else{
if(this){
if(currentlyExpandedPane && xpPanel_onlyOneExpandedPane)showHidePaneContent(false,currentlyExpandedPane);
currentlyExpandedPane = this;
}else{
currentlyExpandedPane = false;
}
img.src = img.src.replace('down','up');
if(xpPanel_slideActive){
if(document.all){
obj.style.display='block';
//obj.style.height = '1px';
}
xpPanel_currentDirection[obj.id] = xpPanel_slideSpeed;
slidePane(xpPanel_slideSpeed,obj.id);
}else{
obj.style.display='block';
subDiv = obj.getElementsByTagName('DIV')[0];
obj.style.height = subDiv.offsetHeight + 'px';
}
if(cookieNames[numericId])Set_Cookie(cookieNames[numericId],'1',100000);
}
return true;
}
function slidePane(slideValue,id)
{
if(slideValue!=xpPanel_currentDirection[id]){
return false;
}
var activePane = document.getElementById(id);
if(activePane==savedActivePane){
var subDiv = savedActiveSub;
}else{
var subDiv = activePane.getElementsByTagName('DIV')[0];
}
savedActivePane = activePane;
savedActiveSub = subDiv;
var height = activePane.offsetHeight;
var innerHeight = subDiv.offsetHeight;
height+=slideValue;
if(height<0)height=0;
if(height>innerHeight)height = innerHeight;
if(document.all){
activePane.style.filter = 'alpha(opacity=' + Math.round((height / subDiv.offsetHeight)*100) + ')';
}else{
var opacity = (height / subDiv.offsetHeight);
if(opacity==0)opacity=0.01;
if(opacity==1)opacity = 0.99;
activePane.style.opacity = opacity;
}
if(slideValue<0){
activePane.style.height = height + 'px';
subDiv.style.top = height - subDiv.offsetHeight + 'px';
if(height>0){
setTimeout('slidePane(' + slideValue + ',"' + id + '")',10);
}else{
if(document.all)activePane.style.display='none';
}
}else{
subDiv.style.top = height - subDiv.offsetHeight + 'px';
activePane.style.height = height + 'px';
if(height<innerHeight){
setTimeout('slidePane(' + slideValue + ',"' + id + '")',10);
}
}
}
function mouseoverTopbar()
{
var img = this.getElementsByTagName('IMG')[0];
var src = img.src;
img.src = img.src.replace('.gif','_over.gif');
var span = this.getElementsByTagName('SPAN')[0];
span.style.color='#428EFF';
}
function mouseoutTopbar()
{
var img = this.getElementsByTagName('IMG')[0];
var src = img.src;
img.src = img.src.replace('_over.gif','.gif');
var span = this.getElementsByTagName('SPAN')[0];
span.style.color='';
}
function initDhtmlgoodies_xpPane(panelTitles,panelDisplayed,cookieArray)
{
dhtmlgoodies_xpPane = document.getElementById('dhtmlgoodies_xpPane');
var divs = dhtmlgoodies_xpPane.getElementsByTagName('DIV');
dhtmlgoodies_paneIndex=0;
cookieNames = cookieArray;
for(var no=0;no<divs.length;no++){
if(divs[no].className=='dhtmlgoodies_panel'){
var outerContentDiv = document.createElement('DIV');
var contentDiv = divs[no].getElementsByTagName('DIV')[0];
outerContentDiv.appendChild(contentDiv);
outerContentDiv.id = 'paneContent' + dhtmlgoodies_paneIndex;
outerContentDiv.className = 'panelContent';
var topBar = document.createElement('DIV');
topBar.onselectstart = cancelXpWidgetEvent;
var span = document.createElement('SPAN');
span.innerHTML = panelTitles[dhtmlgoodies_paneIndex];
topBar.appendChild(span);
topBar.onclick = showHidePaneContent;
if(document.all)topBar.ondblclick = showHidePaneContent;
topBar.onmouseover = mouseoverTopbar;
topBar.onmouseout = mouseoutTopbar;
topBar.style.position = 'relative';
var img = document.createElement('IMG');
img.id = 'showHideButton' + dhtmlgoodies_paneIndex;
img.src = 'images/arrow_up.gif';
topBar.appendChild(img);
if(cookieArray[dhtmlgoodies_paneIndex]){
cookieValue = Get_Cookie(cookieArray[dhtmlgoodies_paneIndex]);
if(cookieValue)panelDisplayed[dhtmlgoodies_paneIndex] = cookieValue==1?true:false;
}
if(!panelDisplayed[dhtmlgoodies_paneIndex]){
outerContentDiv.style.height = '0px';
contentDiv.style.top = 0 - contentDiv.offsetHeight + 'px';
if(document.all)outerContentDiv.style.display='none';
img.src = 'images/arrow_down.gif';
}
topBar.className='topBar';
divs[no].appendChild(topBar);
divs[no].appendChild(outerContentDiv);
dhtmlgoodies_paneIndex++;
}
}
}
</script>
Mettez-le dans votre <BODY> section
<div id="dhtmlgoodies_xpPane">
<div class="dhtmlgoodies_panel">
<div>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content
</div>
</div>
<div class="dhtmlgoodies_panel">
<div>
Content<br>
Content<br>
Content<br>
Content
</div>
</div>
<div class="dhtmlgoodies_panel">
<div>
Content<br>
Content<br>
Content<br>
Content
</div>
</div>
</div>
<script type="text/javascript">
/*
Arguments to function
1) Array of titles
2) Array indicating initial state of panels(true = expanded, false = not expanded )
*/
initDhtmlgoodies_xpPane(Array('Files','Information','Details'),Array(true,true,false));
</script>
<div id="otherContent">
Other content<br>
Other content<br>
Other content<br>
Other content<br>
Other content
</div>
Configuration
Vous utilisez la version HTML brut de définir le contenu de ces volets. Exemple:
id="dhtmlgoodies_xpPane"> <div
class="dhtmlgoodies_panel"> <div
<div>
<! - Contenu Début du volet ->
Contenu <br>
Contenu <br>
Contenu <br>
Contenu <br>
Contenu <br>
Contenu <br>
Contenu <br>
Contenu <br>
Contenu <br>
Contenu <br>
Teneur
<! - Fin secteur de contenu ->
</ Div>
</ Div>
class="dhtmlgoodies_panel"> <div
<div>
<! - Contenu Début du volet ->
Contenu <br>
Contenu <br>
Contenu <br>
Teneur
<! - Fin secteur de contenu ->
</ Div>
</ Div>
class="dhtmlgoodies_panel"> <div
<div>
<! - Contenu Début du volet ->
Contenu <br>
Contenu <br>
Contenu <br>
Teneur
<! - Fin secteur de contenu ->
</ Div>
</ Div>
</ Div>
id="dhtmlgoodies_xpPane"> <div représente le fond bleu. Vous utilisez l'une <div
class = "dhtmlgoodies_panel"> pour chacun de vos panneaux. Mettez le contenu de ces
panneaux entre les commentaires <! - contenu Début du volet -> et <! - Fin secteur de contenu ->
En dessous de ce HTML, appelez la fonction "initDhtmlgoodies_xpPane" pour initialiser le
vitres. Exemple:
<script type="text/javascript">
/ *
Arguments de la fonction
1) choix des titres
2) Array indiquant l'état initial de panneaux (true = élargi, faux = non expansé)
3) tableau de noms de cookie utilisés pour mémoriser l'état des panneaux
* /
initDhtmlgoodies_xpPane (array ('Gestion des fichiers »,« Autres
lieux »,« Détails »), Array (vrai, vrai, faux), array ('pane1', 'pane2', 'pane3'));
</ Script>
Cette fonction prend trois tableaux comme arguments. Le premier tableau contient le titre
de vos panneaux. Le deuxième tableau précise si les panneaux doivent être d'abord
élargi ou non.
Le troisième tableau est le nom de certains cookies, si vous voulez que le script de se rappeler
États panel, à savoir développer ou réduire. Cette valeur du cookie remplace l'
tableau précédent. Si vous ne souhaitez pas utiliser les cookies, il suffit de remplacer
Array ('pane1', 'pane2', 'pane3)
avec un tableau vide (
Array ()
.
Vous avez également deux variables que vous pouvez utiliser pour contrôler le glisser / effet jusqu'à. Ces
sont les suivants:
xpPanel_slideActive var = true; / / Slide down / up active?
var xpPanel_slideSpeed = 15; / / Vitesse de la lame
xpPanel_slideActive est utilisé pour spécifier si décalée est activée ou non.
xpPanel_slideSpeed est utilisé pour contrôler la vitesse de diapositives. Supérieur = valeur plus rapidement.
LGPL license
The LGPL license agreement can be found http://www.dhtmlgoodies.com/scripts/xp-info-pane/lgpl.txt

Mettez-le dans votre <HEAD> section


	<style type="text/css">
	html{
		height:100%;
	}
	body{	
		height:100%;
		margin:0px;
		padding:0px;
		font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
	}
	.ad{
		margin-top:120px;
	}
	h1{
		font-size:0.9em;
	}

	a{
		color:red;
	}
	/* Entire pane */
	
	#dhtmlgoodies_xpPane{
		background-color:#7190e0;
		float:left;
		height:1200px;
		width:200px;
	}
	#dhtmlgoodies_xpPane .dhtmlgoodies_panel{
		margin-left:10px;
		margin-right:10px;
		margin-top:10px;	
	}
	#dhtmlgoodies_xpPane .panelContent{
		font-size:0.7em;
		background-image:url('images/bg_pane_right.gif');
		background-position:top right;
		background-repeat:repeat-y;
		border-left:1px solid #FFF;
		border-bottom:1px solid #FFF;	
		padding-left:2px;
		padding-right:2px;	
		overflow:hidden;
		position:relative;
		clear:both;
	}
	#dhtmlgoodies_xpPane .panelContent div{
		position:relative;
	}
	#dhtmlgoodies_xpPane .dhtmlgoodies_panel .topBar{
		background-image:url('images/bg_panel_top_right.gif');
		background-repeat:no-repeat;
		background-position:top right;
		height:25px;
		padding-right:5px;
		cursor:pointer;
		overflow:hidden;
	
	}
	#dhtmlgoodies_xpPane .dhtmlgoodies_panel .topBar span{
		line-height:25px;
		vertical-align:middle;
		font-family:arial;
		font-size:0.7em;
		color:#215DC6;
		font-weight:bold;
		float:left;
		padding-left:5px;
	}
	#dhtmlgoodies_xpPane .dhtmlgoodies_panel .topBar img{
		float:right;
		cursor:pointer;
	}
	#otherContent{	/* Normal text content */
		float:left;	/* Firefox - to avoid blank white space above panel */
		padding-left:10px;	/* A little space at the left */
	}	
	</style>
	<script type="text/javascript">
	/************************************************************************************************************
	@fileoverview
	Floating window
	
	Copyright (C) October, 2005  Alf Magne Kalleland(post@dhtmlgoodies.com)
	
	This library is free software; you can redistribute it and/or
	modify it under the terms of the GNU Lesser General Public
	License as published by the Free Software Foundation; either
	version 2.1 of the License, or (at your option) any later version.
	
	This library is distributed in the hope that it will be useful,
	but WITHOUT ANY WARRANTY; without even the implied warranty of
	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
	Lesser General Public License for more details.
	
	You should have received a copy of the GNU Lesser General Public
	License along with this library; if not, write to the Free Software
	Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA
	
	
	www.dhtmlgoodies.com 
	Alf Magne Kalleland

	/* Update LOG 
	
	January, 28th - Fixed problem when double clicking on a pane(i.e. expanding and collapsing).
	
	*/
	var xpPanel_slideActive = true;	// Slide down/up active?
	var xpPanel_slideSpeed = 20;	// Speed of slide
	var xpPanel_onlyOneExpandedPane = false;	// Only one pane expanded at a time ?
	
	var dhtmlgoodies_xpPane;
	var dhtmlgoodies_paneIndex;
	
	var savedActivePane = false;
	var savedActiveSub = false;

	var xpPanel_currentDirection = new Array();
	
	var cookieNames = new Array();
	
	
	var currentlyExpandedPane = false;
	
	/*
	These cookie functions are downloaded from 
	http://www.mach5.com/support/analyzer/manual/html/General/CookiesJavaScript.htm
	*/	
	function Get_Cookie(name) { 
	   var start = document.cookie.indexOf(name+"="); 
	   var len = start+name.length+1; 
	   if ((!start) && (name != document.cookie.substring(0,name.length))) return null; 
	   if (start == -1) return null; 
	   var end = document.cookie.indexOf(";",len); 
	   if (end == -1) end = document.cookie.length; 
	   return unescape(document.cookie.substring(len,end)); 
	} 
	// This function has been slightly modified
	function Set_Cookie(name,value,expires,path,domain,secure) { 
		expires = expires * 60*60*24*1000;
		var today = new Date();
		var expires_date = new Date( today.getTime() + (expires) );
	    var cookieString = name + "=" +escape(value) + 
	       ( (expires) ? ";expires=" + expires_date.toGMTString() : "") + 
	       ( (path) ? ";path=" + path : "") + 
	       ( (domain) ? ";domain=" + domain : "") + 
	       ( (secure) ? ";secure" : ""); 
	    document.cookie = cookieString; 
	}

	function cancelXpWidgetEvent()
	{
		return false;	
		
	}
	
	function showHidePaneContent(e,inputObj)
	{
		if(!inputObj)inputObj = this;
		
		var img = inputObj.getElementsByTagName('IMG')[0];
		var numericId = img.id.replace(/[^0-9]/g,'');
		var obj = document.getElementById('paneContent' + numericId);
		if(img.src.toLowerCase().indexOf('up')>=0){
			currentlyExpandedPane = false;
			img.src = img.src.replace('up','down');
			if(xpPanel_slideActive){
				obj.style.display='block';
				xpPanel_currentDirection[obj.id] = (xpPanel_slideSpeed*-1);
				slidePane((xpPanel_slideSpeed*-1), obj.id);
			}else{
				obj.style.display='none';
			}
			if(cookieNames[numericId])Set_Cookie(cookieNames[numericId],'0',100000);
		}else{
			if(this){
				if(currentlyExpandedPane && xpPanel_onlyOneExpandedPane)showHidePaneContent(false,currentlyExpandedPane);
				currentlyExpandedPane = this;	
			}else{
				currentlyExpandedPane = false;
			}
			img.src = img.src.replace('down','up');
			if(xpPanel_slideActive){
				if(document.all){
					obj.style.display='block';
					//obj.style.height = '1px';
				}
				xpPanel_currentDirection[obj.id] = xpPanel_slideSpeed;
				slidePane(xpPanel_slideSpeed,obj.id);
			}else{
				obj.style.display='block';
				subDiv = obj.getElementsByTagName('DIV')[0];
				obj.style.height = subDiv.offsetHeight + 'px';
			}
			if(cookieNames[numericId])Set_Cookie(cookieNames[numericId],'1',100000);
		}	
		return true;	
	}
	
	
	
	function slidePane(slideValue,id)
	{
		if(slideValue!=xpPanel_currentDirection[id]){
			return false;
		}
		var activePane = document.getElementById(id);
		if(activePane==savedActivePane){
			var subDiv = savedActiveSub;
		}else{
			var subDiv = activePane.getElementsByTagName('DIV')[0];
		}
		savedActivePane = activePane;
		savedActiveSub = subDiv;
		
		var height = activePane.offsetHeight;
		var innerHeight = subDiv.offsetHeight;
		height+=slideValue;
		if(height<0)height=0;
		if(height>innerHeight)height = innerHeight;
		
		if(document.all){
			activePane.style.filter = 'alpha(opacity=' + Math.round((height / subDiv.offsetHeight)*100) + ')';
		}else{
			var opacity = (height / subDiv.offsetHeight);
			if(opacity==0)opacity=0.01;
			if(opacity==1)opacity = 0.99;
			activePane.style.opacity = opacity;
		}			
		
					
		if(slideValue<0){			
			activePane.style.height = height + 'px';
			subDiv.style.top = height - subDiv.offsetHeight + 'px';
			if(height>0){
				setTimeout('slidePane(' + slideValue + ',"' + id + '")',10);
			}else{
				if(document.all)activePane.style.display='none';
			}
		}else{			
			subDiv.style.top = height - subDiv.offsetHeight + 'px';
			activePane.style.height = height + 'px';
			if(height<innerHeight){
				setTimeout('slidePane(' + slideValue + ',"' + id + '")',10);				
			}		
		}
		
		
		
		
	}
	
	function mouseoverTopbar()
	{
		var img = this.getElementsByTagName('IMG')[0];
		var src = img.src;
		img.src = img.src.replace('.gif','_over.gif');
		
		var span = this.getElementsByTagName('SPAN')[0];
		span.style.color='#428EFF';		
		
	}
	function mouseoutTopbar()
	{
		var img = this.getElementsByTagName('IMG')[0];
		var src = img.src;
		img.src = img.src.replace('_over.gif','.gif');		
		
		var span = this.getElementsByTagName('SPAN')[0];
		span.style.color='';
		
		
		
	}
	
	
	function initDhtmlgoodies_xpPane(panelTitles,panelDisplayed,cookieArray)
	{
		dhtmlgoodies_xpPane = document.getElementById('dhtmlgoodies_xpPane');
		var divs = dhtmlgoodies_xpPane.getElementsByTagName('DIV');
		dhtmlgoodies_paneIndex=0;
		cookieNames = cookieArray;
		for(var no=0;no<divs.length;no++){
			if(divs[no].className=='dhtmlgoodies_panel'){
				
				var outerContentDiv = document.createElement('DIV');	
				var contentDiv = divs[no].getElementsByTagName('DIV')[0];
				outerContentDiv.appendChild(contentDiv);	
			
				outerContentDiv.id = 'paneContent' + dhtmlgoodies_paneIndex;
				outerContentDiv.className = 'panelContent';
				var topBar = document.createElement('DIV');
				topBar.onselectstart = cancelXpWidgetEvent;
				var span = document.createElement('SPAN');				
				span.innerHTML = panelTitles[dhtmlgoodies_paneIndex];
				topBar.appendChild(span);
				topBar.onclick = showHidePaneContent;
				if(document.all)topBar.ondblclick = showHidePaneContent;
				topBar.onmouseover = mouseoverTopbar;
				topBar.onmouseout = mouseoutTopbar;
				topBar.style.position = 'relative';

				var img = document.createElement('IMG');
				img.id = 'showHideButton' + dhtmlgoodies_paneIndex;
				img.src = 'images/arrow_up.gif';				
				topBar.appendChild(img);
				
				if(cookieArray[dhtmlgoodies_paneIndex]){
					cookieValue = Get_Cookie(cookieArray[dhtmlgoodies_paneIndex]);
					if(cookieValue)panelDisplayed[dhtmlgoodies_paneIndex] = cookieValue==1?true:false;
					
				}
				
				if(!panelDisplayed[dhtmlgoodies_paneIndex]){
					outerContentDiv.style.height = '0px';
					contentDiv.style.top = 0 - contentDiv.offsetHeight + 'px';
					if(document.all)outerContentDiv.style.display='none';
					img.src = 'images/arrow_down.gif';
				}
								
				topBar.className='topBar';
				divs[no].appendChild(topBar);				
				divs[no].appendChild(outerContentDiv);	
				dhtmlgoodies_paneIndex++;			
			}			
		}
	}
	
	</script>



Mettez-le dans votre <BODY> section

<!-- START OF PANE CODE -->
<div id="dhtmlgoodies_xpPane">
	<div class="dhtmlgoodies_panel">
		<div>
			<!-- Start content of pane -->
			Content<br>
			Content<br>
			Content<br>
			Content<br>
			Content<br>
			Content<br>
			Content<br>
			Content<br>
			Content<br>
			Content<br>
			Content
			<!-- End content -->
		</div>	
	</div>
	<div class="dhtmlgoodies_panel">
		<div>
			<!-- Start content of pane -->
			Content<br>
			Content<br>
			Content<br>
			Content			
			<!-- End content -->
		</div>		
	</div>
	<div class="dhtmlgoodies_panel">
		<div>
			<!-- Start content of pane -->
			Content<br>
			Content<br>
			Content<br>
			Content			
			<!-- End content -->
		</div>		
	</div>
</div>
<script type="text/javascript">
/*
Arguments to function
1) Array of titles
2) Array indicating initial state of panels(true = expanded, false = not expanded )
*/
initDhtmlgoodies_xpPane(Array('Files','Information','Details'),Array(true,true,false));
</script>
<!-- END OF PANE CONTENT -->
<div id="otherContent">
	Other content<br>
	Other content<br>
	Other content<br>
	Other content<br>
	Other content
</div>

Configuration 
Vous utilisez la version HTML brut de définir le contenu de ces volets. Exemple: 
id="dhtmlgoodies_xpPane"> <div 
  class="dhtmlgoodies_panel"> <div 
    <div> 
      <! - Contenu Début du volet -> 
      Contenu <br> 
      Contenu <br> 
      Contenu <br> 
      Contenu <br> 
      Contenu <br> 
      Contenu <br> 
      Contenu <br> 
      Contenu <br> 
      Contenu <br> 
      Contenu <br> 
      Teneur 
      <! - Fin secteur de contenu -> 
    </ Div> 
  </ Div> 
  class="dhtmlgoodies_panel"> <div 
    <div> 
      <! - Contenu Début du volet -> 
      Contenu <br> 
      Contenu <br> 
      Contenu <br> 
      Teneur 
      <! - Fin secteur de contenu -> 
    </ Div> 
  </ Div> 
  class="dhtmlgoodies_panel"> <div 
    <div> 
      <! - Contenu Début du volet -> 
      Contenu <br> 
      Contenu <br> 
      Contenu <br> 
      Teneur 
      <! - Fin secteur de contenu -> 
    </ Div> 
  </ Div> 
</ Div> 
id="dhtmlgoodies_xpPane"> <div représente le fond bleu. Vous utilisez l'une <div 
class = "dhtmlgoodies_panel"> pour chacun de vos panneaux. Mettez le contenu de ces 
panneaux entre les commentaires <! - contenu Début du volet -> et <! - Fin secteur de contenu -> 

En dessous de ce HTML, appelez la fonction "initDhtmlgoodies_xpPane" pour initialiser le 
vitres. Exemple: 
<script type="text/javascript"> 
/ * 
Arguments de la fonction 
1) choix des titres 
2) Array indiquant l'état initial de panneaux (true = élargi, faux = non expansé) 
3) tableau de noms de cookie utilisés pour mémoriser l'état des panneaux 
* / 
initDhtmlgoodies_xpPane (array ('Gestion des fichiers »,« Autres 
lieux »,« Détails »), Array (vrai, vrai, faux), array ('pane1', 'pane2', 'pane3')); 
</ Script> 
Cette fonction prend trois tableaux comme arguments. Le premier tableau contient le titre 
de vos panneaux. Le deuxième tableau précise si les panneaux doivent être d'abord 
élargi ou non. 

Le troisième tableau est le nom de certains cookies, si vous voulez que le script de se rappeler 
États panel, à savoir développer ou réduire. Cette valeur du cookie remplace l' 
tableau précédent. Si vous ne souhaitez pas utiliser les cookies, il suffit de remplacer 
Array ('pane1', 'pane2', 'pane3) 
avec un tableau vide ( 
Array () 
. 

Vous avez également deux variables que vous pouvez utiliser pour contrôler le glisser / effet jusqu'à. Ces 
sont les suivants: 
xpPanel_slideActive var = true; / / Slide down / up active? 
var xpPanel_slideSpeed = 15; / / Vitesse de la lame 
xpPanel_slideActive est utilisé pour spécifier si décalée est activée ou non. 
xpPanel_slideSpeed est utilisé pour contrôler la vitesse de diapositives. Supérieur = valeur plus rapidement.



LGPL license
The LGPL license agreement can be found http://www.dhtmlgoodies.com/scripts/xp-info-pane/lgpl.txt

Conclusion

ce petit bout de code et la cheminement FreeWin OpenSource jusqu'a la mort :)

Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

arrow_down.gif 1 207 octets
arrow_down_over.gif 1 207 octets
arrow_up.gif 1 202 octets
arrow_up_over.gif 1 202 octets
bg_pane_right.gif 76 octets
bg_panel_top_right.gif 1 288 octets
xpbarre panel.html 12 829 octets

Télécharger le zip

Sources du même auteur

ARBORECENCE XP DRAG-ON-DROP

MENU TASKBAR WINDOWSXP HOME

Toutes les sources de micking

Sources de la même categorie

INTERDIRE CERTAINE TOUCHE ET CLIQUE DROIT par michael33512

ANTI-ROBOTS V 1.0 par MacGaliver

PRÉSENTOIR PAGE/SUJET par tiranus

NAVIGATEUR INTERNET HAVRET par HAVRETos

WMANAGER.JS : GÉRER LES FICHIERS WMA AVEC WINDOWS MEDIA PLAY... par jdmcreator

Toutes les sources de la catégorie Navigation

Commentaires et avis

Commentaire de latifa755 le 19/09/2011 14:58:25

je trouve que ce menu est très professionnel.
en fait je l'ai utilisé ds mon site par contre je voudrais que le contenu du sous menu exple:(  <! - Contenu Début du volet ->
402.      Contenu <br>
403.      Contenu <br
411.      Contenu <br>
412.      Teneur
413.      <! - Fin secteur de contenu -> )

soit changé en parallèle avec ce qu'ont met à jour comme infos sur notre site vue que c'est un site qui se change chaque jour celon les infos .
comment faire?
prière de m'aider

Ajouter un commentaire

Nos sponsors

Derniers Blogs

ETENDRE LE TEAM WEB ACCESS DE TFS 2012 - STEP 0 par Philess

SIMULER FACILEMENT L'ENVOI DE MAIL par JeremyJeanson

PROCDUMP 6.0 : SUPPORT DU FILTRAGE SUR MESSAGES D'EXCEPTIONS .NET, DES FILTRES MULTIPLES ET DU CIBLAGE PAR NOM DE SERVICE par coq

VOTEZ POUR LE TOP 10 DES INFLUENCEURS SHAREPOINT FRANCOPHONES ! par Patrick Guimonet

[CONF'SHAREPOINT] DERNIER RAPPEL ! :-) par Patrick Guimonet

Forum

RE : BIRT : GéNéRATION D'UNE NOMBRE ALéATOIRE UNIQUE EN JAVASCRIPT par AlexN

RE : BIRT : GéNéRATION D'UNE NOMBRE ALéATOIRE UNIQUE EN JAVASCRIPT par joponta

RE : BIRT : GéNéRATION D'UNE NOMBRE ALéATOIRE UNIQUE EN JAVASCRIPT par AlexN

RE : MENU SSCENSEUR à BOUTONS DANS UNE PAGE UNIQUE par legaub

RE : MENU SSCENSEUR à BOUTONS DANS UNE PAGE UNIQUE par kazma

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Espace membre personnel a chaque membre sur WP
Budget : 300€
Module produit pour site marchand
Budget : 900€
Site web - Allobaguette
Budget : 3 000€

Logiciels

Easy-Planning (4.5.0.11)
EASY-PLANNING (4.5.0.11)

Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté a...

Cliquez pour télécharger Easy-Planning
CVEasy (3.1.0.51)
CVEASY (3.1.0.51)

PHMSD-CVEasy est un logiciel d'aide à la rédaction de CV d'une simplicité déconcertante. PHMSD-C...

Cliquez pour télécharger CVEasy
LettresFaciles 2011 (8.6.0.31)
LETTRESFACILES 2011 (8.6.0.31)

LettresFaciles est un logiciel facilitant la création et la rédaction de lettres types. Son inte...

Cliquez pour télécharger LettresFaciles 2011
sDEVIS-FACTURES vlPRO (8.4.2.62)
SDEVIS-FACTURES VLPRO (8.4.2.62)

sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa...

Cliquez pour télécharger sDEVIS-FACTURES vlPRO
Devis-Factures PHMSD (2.1.0.11)
DEVIS-FACTURES PHMSD (2.1.0.11)

Configuration minimale Nécessite Windows™ 2000, XP, Windows 7, 8, Vista (Service Pack à...

Cliquez pour télécharger Devis-Factures PHMSD