jQuery Splitter est un plugin jQuery particulièrement intéressant pour diviser verticalement ou horizontalement une page web en plusieurs parties dont la largeur pourra être modifiée : avec la souris via un simple cliqué-glissé ; en définissant une accesskey
; ou encore en utilisant la touche tab
pour sélectionner la bordure et les flèches du clavier pour la déplacer.
Un zeste de html :
<div id="MySplitter"> <div> Left content goes here </div> <div> Right content goes here </div> </div>
Quelques gouttes de CSS :
#MySplitter { height: 200px; width: 500px; border: 5px solid #aaa; } #MySplitter div { overflow: auto; } .vsplitbar { width: 5px; background: #aaa; }
Et une pincée de jQuery :
$().ready(function(){ $("#MySplitter").splitter(); });