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.
<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>
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.
[...] <div id="contain"> <div class="borderCol">Col 1</div> <div class="divider"> </div> <div class="centerCol">Col 2</div> <div class="divider"> </div> <div class="borderCol">Col 3</div> </div> [...]
on rajoute un petit CSS juste pour bien voir ce qu'il se passe :
[...] .divider { width:10px; background-color:#456 !important; cursor:pointer; } [...]
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”)
[...] <div id="contain"> <div class="borderCol">Col 1</div> <div onclick="togglePanel(this);" class="divider"> </div> <div class="centerCol">Col 2</div> <div onclick="togglePanel(this);" class="divider"> </div> <div class="borderCol">Col 3</div> </div> [...]
REste la fonction javascript elle même :
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"; } }
Discussion
Alut, lorsque l'on clique +sieurs fois sur le “toggle”, il arrive (avec FF) que l'on retrouve la 3° colonne sous la 1° (il semblerait que 'centerCol' prenne qlq px à chaque tour) . Atchao
Re, en rajoutant -2 (2 x 1px du border) dans les calculs des center.style.width, ce blême disparait (ou en supprimant le border :P )
et encore re, si on tient au border, on peut mettre border-top:1px solid #000; et border-bottom:1px solid #000; en remplacement du border unique et rajouter 1 class .gauche et .droite avec 1 border-left et 1 border-right (même valeur) ds les div extremes <div class=“borderCol gauche”>Col 1</div> et <div class=“borderCol droite”>Col 3</div>
devinez c'est qui !!! :P même pas besoin, juste sortir la class .centerCol : div.centerCol {