Bismillah. Alhamdulillah. Satu plugin jQuery selesai ditulis walau dalam kondisi masih banyak sekali kekurangan. Plugin jQuery ini digunakan untuk mengubah menu browser saat melakukan klik kanan mouse pada suatu halaman. Pada mulanya fungsi ini digunakan untuk men-non-aktikan klik kanan dengan tujuan meminimalisir tindakan Copy Paste artikel. Namun sepertinya sangat disayangkan kalau hanya sebuah alert (peringatan) yang muncul pada saat klik kanan di area halaman. Lalu munculah ide untuk mengganti alert tersebut dengan menu. Script ini merupakan comotan dari berbagai script jQuery yang ada, yah maklumlah, saya hanya blogger bodoh yang tidak lebih pintar dari pembacanya.
Deskripsi
Plugin jQuery Right-Click Menu atau Plugin jQuery Menu Klik Kanan berfungsi untuk mengganti menu bawaan browser dengan menu baru yang bisa kita tentukan. Menu ini akan muncul ketika kita klik kanan pada mouse disuatu area halaman web tertentu yang sudah kita tentukan. Jadi kita bisa menentukan area-area tertentu untuk menampilkan menu buatan sendiri, sedangkan diarea yang tidak kita tentukan, ketika dilakukan klik kanan mouse maka menu default browser-lah yang akan ditampilkan. Plugin ini ditulis mengikuti kaidah framework jQuery versi 1.7, ini berarti pula bahwa plugin jQuery Right-Clik Menu tidak akan bekerja jika kita memasang framework jQuery dibawah versi 1.7 pada halaman situs. Script Plugin jQuery ini tidak lagi menggunakan .bind() tapi sudah menggunakan .on() sebagai penggantinya sesuai dengan perubahan yang dilakukan sejak jQuery versi 1.7. Memanfaatkan "contextmenu" untuk mengganti menu default bawaan browser.
Ingatlah! Plugin jQuery Right-Click tidak bekerja pada framework jQuery dibawah versi 1.7Skenario HTML
Pada dasarnya menu yang ditampilkan ditempatkan dalam posisi bebas saja. Anda mau menempatkan pada widget, atau ditempatkan diatas tag </body> atau dibawah tag <body> menu tersebut akan tetap bisa di tampilkan. Jadi tidak ada lokasi khusus untuk menempatkan menu tersebut. Perhatikan kode HTML dibawah ini:
Kode HTML untuk Area Klik Kanan
Dibawah ini hanyalah kode penjelasan tentang area yang akan di-set sebagai area yang menampilkan menu saat di-klik kanan.
<div id="areaKlik" class="item">
<p>Area widget, artikel atau apalah disini...<p/>
</div>
Kode diatas tidak usah dimasukan kedalam blog anda. Kode HTML ini berhubungan dengan penentuan area pada Skenario jQuery. Lebih baik baca dulu hingga tuntas artikel ini.
Kode HTML untuk Menu Klik Kanan
Dibawah ini adalah kode yang digunakan untuk membuat menu yang akan ditampilkan.
<div id="menuKanan">
<ul>
<li><a class="facebook" href="#">Share on Facebook</a></li>
<li><a class="twitter" href="#">Share on Twitter</a></li>
<li><a class="delicious" href="#">Share on Delicious</a></li>
<li><a class="stumble" href="#">Share on StumbleUpon</a></li>
<li><a class="reddit" href="#">Share on ReddIt</a></li>
<li><a class="digg" href="#">Share on Digg</a></li>
</ul>
</div>
<div id="latarMenu"></div>
Area ini adalah area wajib yang harus dimasukan kedalam halaman blog anda (baik didalam template maupun didalam widget). Perhatikan dengan baik kode diatas yang terdiri dari 2 id, yaitu:
- <div id="menuKanan">...</div> : Ini adalah area menu yang akan ditampilkan ketika melakukan klik kanan pada area yang sudah ditentukan. Silahkan ubah dan atur-atur sesuai kebutuhan namun jangan membuang id-nya, karena id="menuKanan" merupakan yang diintegrasikan kedalam plugin jQuery. ID ini hilang maka hilang pula menu klik kanan.
- <div id="latarMenu"></div> : Ini adalah area latar, area yang bisa kita set untuk ditampilkan atau dibuat transparan saja. id="latarMenu" tidak boleh dibuang karena area ini digunakan untuk menutup menu saat mouse kiri di klik pada area diluar menu. Saat menu aktif maka area diluar menu adalah area id="latarMenu".
Skenario CSS
Kode CSS dibawah ini tidak akan dijelaskan secara detail, silahkan unduh file yang telah sediakan kemudian modifikasi file CSS ini sesuai dengan kebutuhan dan imajinasi anda. Namun yang terpenting pada kode CSS dibawah ini adalah properti #latarMenu dan #menuKanan (lebih baik tidak diubah jika belum paham tentang CSS).
#latarMenu {
position:absolute;
left:0;
top:0;
z-index:9000;
display:block;
background-color:#000000; /* Warna Latar Dibelakang Menu */
opacity:0;
}
#menuKanan {
position:absolute;
display:none;
z-index:9999;
background:#212121; /* Warna Latar Menu */
border:1px solid #302F2F;
width:220px; /* Lebar Menu */
height:215px; /* Tinggi Menu */
-moz-border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
border-radius:5px;
-moz-box-shadow:0 0 2px #000;
-webkit-box-shadow:0 0 2px #000;
-o-box-shadow:0 0 2px #000;
border-box-shadow:0 0 2px #000;
}Skenario jQuery
Kode dibawah ini untuk mengaktifkan fungsi Plugin jQuery Right-Click. Untuk menggunakan plugin ini, pastikan website anda (periksa diantara tag head) menggunakan framework jQuery versi 1.7 keatas seperti dibawah ini:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
Masukan plugin Plugin jQuery Right-Click dibawah framework jQuery, misal seperti dibawah ini:
<script src=".../jquery.klikanan.min.js"></script>
Sampai disini plugin masih belum aktif, kita perlu melakukan beberapa settingan. Silahkan teruskan membaca...
Setting jQuery Right-Click
Untuk mengaktifkan plugin jQuery Klik Kanan, secara default settingan ditulis seperti dibawah ini:
$('#areaKlik').klikanan();Atau lebih detailnya:<script type="text/javascript">
$(function () {
$('#areaKlik').klikanan();
});
</script>
Berikut fungsi yang bisa kita gunakan untuk mengeset jQuery Menu Klik Kanan, yaitu:
$('#areaKlik').klikanan({
speed: 400,
overlay: false
});- speed: 400 = speed digunakan untuk menentukan seberapa cepat menu klik kanan ditampilkan. Secara default bernilai 400.
- overlay: false = overlay digunakan untuk menentukan latar dari menu, jika bernilai "false" maka latar (overlay) tidak diaktifkan. Secara default bernilai "true" berarti overlay diaktifkan.
- #areaKlik = ini adalah id dari area yang akan digunakan untuk menampilkan menu saat halaman di klik kanan. Sangat berhubungan erat dengan Skenario HTML (Lihat Skenario HTML). #areaKlik merupakan id yang menunjuk langsung kepada id="areaKlik", itu berarti anda diperbolehkan mengubah target area menu klik kanan.
Misal; Blogger secara default memiliki area artikel dengan class entry-content (silahkan cek pada template blogger dan cari kode class='post-body entry-content'). Jika anda ingin area artikel tersebut merupakan area menu klik kanan maka tulislah fungsi plugin-nya seperti dibawah ini:
$('.entry-content').klikanan({
speed: 400,
overlay: false
});atau lebih lengkapnya:<script type="text/javascript">
$(function () {
$('.entry-content').klikanan({
speed: 400,
overlay: false
});
});
</script>
Kesimpulan
Plugin jQuery Right-Click Menu mungkin saja mengandung bug karena kesalahan fungsi atau kesalahan penulisan, maka dari itu kontribusi, kritik, dan saran anda setelah penggunaan plugin ini sangat diharapkan untuk perbaikan lebih lanjut. Plugin ini baru dites pada browser Firefox 12 (Win), Chrome 19.0.1084.52 m (Win), dan Safari 5.1.4 (Win). Plugin ini bersifat bebas untuk digunakan, dimodifikasi dan dikembangkan baik untuk kepentingan eksperimen atau untuk digunakan pada situs komersil.
Selamat mencoba, berkarya dan semoga berhasil. Happy Blogging :)
