Creare pannelli in Javascript con jsPanel
Ho trovato un plugin per jQuery che permette di creare pannelli dentro una pagina web in maniera veramente easy: jsPanel!
Se guardate gli esempi e la documentazione, potete notare che le possibilità sono veramente tante.
C'è anche l'integrazione con la prossima versione di Bootstrap, ed è possibile creare pannelli espandibili, finestre modali, toolbar, menu contestuali, ecc.
Insomma tanta roba.
Qua vi posto una pagina con due esempi, uno standard ed uno con finestra modale:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jsPanel</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jspanel3/3.7.0/jquery.jspanel.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspanel3/3.7.0/jquery.jspanel-compiled.min.js"></script>
<script>
$(document).ready(function () {
$('#jsp').click(function () {
$.jsPanel({
position: {my: "center-top", at: "center-top", offsetY: 15},
theme: "orange",
contentSize: {width: 600, height: 350},
headerTitle: "jsPanel standard",
content: "<p>Qui ci va il contenuto</p>",
callback: function () {
this.content.css("padding", "15px");
}
});
});
$('#jsp_modal').click(function () {
$.jsPanel({
paneltype: 'modal',
headerTitle: 'jsPanel modal',
theme: 'red',
show: 'animated fadeInDownBig',
content: "<p>Qui ci va il contenuto</p>",
callback: function (panel) {
$("input:first", this).focus();
$("button", this.content).click(function () {
panel.close()
});
}
});
});
});
</script>
</head>
<body>
<button id="jsp" type="button">Standard</button>
<br><br>
<button id="jsp_modal" type="button">Modal</button>
</body>
</html>
In entrambi i casi ho impostato un pò di opzioni, in modo da personalizzarli un pò.
Per il resto vi consiglio di guardare il sito ufficiale.
Enjoy!
javascript jquery jspanel
Commentami!