Suddivedere la pagina in più parti con jQuery Splitter
Nelle versioni precedenti alla 5, per suddividere la pagina in più parti, si usavano i frame.
Nella versione 5 dell'HTML, e con l'avvento dei CSS 3, i frame risultano deprecati.
In alcuni casi, però, può risultare comodo avere le stesse funzionalità dei frame, senza doverli usare.
Girovagando ho trovato un plugin per jQuery che fa proprio questo: Splitter!
Usarlo è veramente facile; scaricate il JS ed includetelo nel vostro progetto.
Questo un esempio di base che divide la pagina prima in due parti (sinistra e destra), e poi suddivide la destra in altre due parti (sopra e sotto):
<!DOCTYPE html>
<html>
<head>
<title>Page Splitter</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="jquery.splitter.js"></script>
<script>
$(function () {
$("#workspace").splitter({
"orientation": "horizontal",
"limit": 100
});
$("#rightPane").splitter({
"orientation": "vertical",
"limit": 100
});
});
</script>
<style>
body { margin: 0;padding: 0;background-color: #000000;color:#fff; }
body p { padding:20px; }
#leftPane { width: 200px; }
#topPane { height: 100px; }
</style>
</head>
<body>
<div id="workspace">
<div id="leftPane">
<p>Left</p>
</div>
<div id="rightPane">
<div id="topPane">
<p>Right Top</p>
</div>
<div id="bottomPane">
<p>Right Bottom</p>
</div>
</div>
</div>
</body>
</html>
Come vedete, la pagina risulta divisa in tre pannelli in stile frame.
E' anche possibile ridimensionare la varie parti.
Ed ovviamente è sempre possibile suddividere i riquadri in ulteriori parti.
Noi abbiamo usato solo due opzioni:
- orientation -> indica come deve essere suddiviso il riquadro o la pagina (orizzontale che il default o verticale)
- limit -> che indica la misura minima (0 per default) del primo elemento (in alto a sinistra)
Altre opzioni sono:
- keepLeft : true -> se mantenere la dimensione dell'elemento in altro a sinistra quando viene ridimensionata la finestra
- barwidth: 4 -> la dimensione dei divisori
- paneResized : null -> intercetta l'evento di ridimensionamento di un pannello
- windowResized : null -> intercetta l'evento di ridimensionamento della finestra
Fate qualche prova, può essere molto interessante.
Enjoy!
javascript jquery splitter frame html
Commentami!