JQuery.contextMenu adalah salah satu plugin JQuery yang dapat digunakan untuk membuat klik kanan. Dalam pembuatan aplikasi web terkadang diperlukan klik kanan agar aplikasi lebih berfungsi secara optimal. Beberapa plugin menyediakan fungsi untuk menampilkan klik kanan pada aplikasi web. Tetapi yang ingin saya dokumentasikan pertama kali ini adalah menggunakan JQuery.contextMenu. Langsungsaja praktek sederhananya menggunakan beberapa file .html, .js, dan .css. Yang terpenting silahkan download dulu pluginnya disini.
Pertama buat folder dengan nama klikkanan dan didalamnya buat folder lagi dengan nama js dan css.
Setelah itu ambil file jquery.contextMenu.js dan jquery.contextMenu.css dari plugin yang didownload. Taruhlah file jquery.contextMenu.js di folder js dan jquery.contextMenu.css di folder css. sertakan juga folder images dari plugin dan taruh di folder css.
Setelah plugin sudah terpasang selanjutnya membuat file latihan.html di folder klikkanan dan isikan script html dibawah ini :
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script></script>
<script type="text/javascript" src="js/jquery.contextMenu.js"></script>
<link href="css/jquery.contextMenu.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function(){
$.contextMenu({
selector: '.context-menu-one',
callback: function(key, options) {
var m = "clicked: " + key;
window.console && console.log(m) || alert(m);
},
items: {
"edit": {name: "Edit", icon: "edit"},
"cut": {name: "Cut", icon: "cut"},
"copy": {name: "Copy", icon: "copy"},
"paste": {name: "Paste", icon: "paste"},
"delete": {name: "Delete", icon: "delete"},
"sep1": "---------",
"quit": {name: "Quit", icon: "quit"}
}
});
$('.context-menu-one').on('click', function(e){
console.log('clicked', this);
})
});
</script>
<body>
<br/><br/>
<br/><br/>
<br/><br/>
<br/><br/>
<br/><br/>
<div class="context-menu-one box menu-1">
<strong>right click</strong>
</div>
</body>
Agar bisa menjalankan file diatas dengan baik masih harus terkoneksi dengan internet karena
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script></script>masih load dari server code.jquery.com. Jika ingin menggunakan di localhost maka download dulu scriptnya. Download dapat dilakukan dengan klik kanan di web page dan inspect element sehingga dibrowser muncul code diatas. Selanjutnya klik kanan pada link di inspect element code.jquery.com/jquery-latest.js dan open link in new tab.
Setelah terbuka di new tab dapat disave as dan taruh di folder js dan ubah script
src="http://code.jquery.com/jquery-latest.js"menjadisrc="js/jquery-latest.js"Untuk pengembangan selanjutnya dapat lihat dokumentasi yang lebih lengkap hasil download plugin tersebut, karena sudah disertakan dokumentasinya. Atau dokumentasinya secara online disini.
No comments:
Post a Comment