Template 3 colonnes

Faire un template 3 colonnes n'est pas difficile. 4 div, un petit CSS et c'est fait.
Je vous passerais les détails sur comment faire, beaucoup de tuto existe déjà sur le net.

html4strict
<html>
<head>
<style type="text/css">
	div.borderCol, div.divider {
		float:left;
		border:1px solid #000;
	}
	.borderCol {
		width:200px;
	}
	.centerCol {
		width : 500px;
	}
	div.centerCol {
		float:left;
		border-top:1px solid #000;
		border-bottom:1px solid #000;
	}
</style>
 
</head>
<body>
<div id="contain">
	<div class="borderCol">Col 1</div>
	<div class="centerCol">Col 2</div>
	<div class="borderCol">Col 3</div>	
</div>
</body>
</html>
Attention, la classe “borderCol” est importante pour la suite, ne la supprimer pas !

Rendre les panneaux gauche et droite escamotable

Nous voici donc avec un super template à 3 colonnes. Notre but est d'avoir la colonne de gauche et celle de droite escamotable.
Dans cet optique nous allons commencer par ajouter une div entre chaque colonne. Cette div servira de “bouton” pour afficher/masquer les colonnes de gauche et de droite.

html4strict
[...]
<div id="contain">
	<div class="borderCol">Col 1</div>
	<div class="divider">&nbsp;</div>	
	<div class="centerCol">Col 2</div>
	<div class="divider">&nbsp;</div>
	<div class="borderCol">Col 3</div>	
</div>
[...]

on rajoute un petit CSS juste pour bien voir ce qu'il se passe :

css
[...]
	.divider {
		width:10px;
		background-color:#456 !important;
		cursor:pointer;
	}
[...]

Le javascript

Evidement pour que tous cela fonctionne, il faut un petit bout de javascript qui va s'éxécuter lors d'un clic sur un des DIV de sépération (ceux qui comporte la classe “divider”)

html4strict
[...]
<div id="contain">
	<div class="borderCol">Col 1</div>
	<div onclick="togglePanel(this);" class="divider">&nbsp;</div>	
	<div class="centerCol">Col 2</div>
	<div onclick="togglePanel(this);" class="divider">&nbsp;</div>
	<div class="borderCol">Col 3</div>	
</div>
[...]

REste la fonction javascript elle même :

javascript
	function togglePanel(divider) {
                //explication de getPrevious/getNext voir : http://www.wikistuce.info/doku.php/javascript/obtenir_l_element_dom_suivant_ou_precedent
		var getPrevious = function (obj) {
			var prev=obj.previousSibling;
			while (prev.nodeType!=1 && prev.previousSibling != null)
				prev=prev.previousSibling;
			return prev;
		};
		var getNext = function (obj) {
			var next=obj.nextSibling;
			while (next.nodeType!=1 && next.nextSibling != null)
				next=next.nextSibling;
			return next;
		};
 
		var previous = getPrevious(divider);
		var next = getNext(divider);
		var center = null;
		var panel = null;
 
                //on détermine si c'est le panneau de gauche ou celui de droite qui doit disparaitre
		if (previous.className.indexOf("borderCol") != -1) {
			center=next;
			panel=previous;
		} else {
			center=previous;
			panel=next;
		}
		//Si le panneau est déja disparu, on le rend visible et on redimensionne le centre
		if (panel.style.display=="none") {
			panel.style.display="";
			center.style.width=(center.offsetWidth-panel.offsetWidth)+"px";				
		} else {
		//Sinon, on agrnadi le centre et on cache le panneau
			center.style.width=(panel.offsetWidth+center.offsetWidth)+"px";		
			panel.style.display="none";
		}
 
	}

Démo

Vous pouvez voir le résultat ici : demo_3_cols.htm



09/07/2007 09:00 -

iDo –