Panel yang di maksud disini adalah sama halnya ketika teman-teman buka windows exploler dimana ketika kita mengklik dokumennya akan muncul panel dimana di dalam panel tersebut terdapat sebuah data-data dari myComputer dan data yang lain, teman-teman pasti taulah ya, jadi dimana tampilan panel itu adalah teman-teman bisa membuat tombol close, minimize, dan perbesar dan memperkecil kurang lebih seperti itu, oke tanpa menunggu lama simak terus ya teman-teman cara membuat tampilan panel.
Apakah teman-teman sudah dapat gambarannya, saya harap sudah ya, jika belum tidak apa nanti kita akan belajar cara membuat tampilan panel, manfaat dari membuat sebuah panel ini adalah dimana teman-teman bisa memasukan sebuah apa saja mau template HTML atau yang lainya, dimana seakan-akan kita mempunyai tampilan sendiri seperti windows exploler maupun seperti web browser, keren bukan.
Disini untuk membuat panel ini saya menggunakan dari jsPanel silahkan teman-teman search saja di google ada ko, nanti tinggal download lalu sesuaikan saja ya teman-teman. Dan disini saya akan membuatnya dengan kasus ketika saya mengklik maka panel itu akan muncul kurang lebih seperti itu.
<!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>Cara Membuat tampilan panel</title>
<!-- loading jsPanel css -->
<link rel="stylesheet" href="dist/jspanel.css">
</head>
<body>
<!-- Your HTML goes here -->
<button id="click">click</button>
<!-- loading jsPanel javascript -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="dist/jspanel.js"></script>
<!-- optionally load jsPanel extensions -->
<script src="dist/extensions/contextmenu/jspanel.contextmenu.js"></script>
<script src="dist/extensions/hint/jspanel.hint.js"></script>
<script src="dist/extensions/modal/jspanel.modal.js"></script>
<script src="dist/extensions/tooltip/jspanel.tooltip.js"></script>
<script src="dist/extensions/dock/jspanel.dock.js"></script>
<script>
$(document).ready(function(){
$("#click").click(function(){
jsPanel.create({
theme: 'primary',
headerTitle: 'my panel #1',
position: 'center-top 0 58',
contentSize: '450 250',
content: '<p>Hallo selamat datang</p><p>Sudah berhasil menampilkan panel</p>',
callback: function () {
this.content.style.padding = '20px';
},
onbeforeclose: function () {
return confirm('Do you really want to close the panel?');
}
});
})
})
</script>
</body>
</html>
Seperti yang teman-teman lihat saya banyak menggunakan library offline dimana berarti plugin panelnya saya buat offline ya teman-teman, oke sekarang kita lihat hasilnya
dan silahkan di samping kanan atas ada sebuah icon yang tidak asaing menurut saya, dimana icon itu mempunyai sifat masing-masing ya, dan semua itu pastinya berfungsi dengan baik, silahkan teman-teman coba sendiri. bagaimana sangat menarik bukan, saya rasa cukup sampai disini belajar kita tentang cara membuat tampilan panel semoga bermafaat dan sampai jumpa pada artikel berikutnya terimakasih.