Keistimewaan sistem keamanan ini dibandingkan dengan sistem keamanan pencegahan klik-kanan dengan alert yaitu sasarannya yang sanggup ditentukan sesuka hati. Sistem keamanan ini juga lebih mengandung unsur seni alasannya yaitu ketika agresi klik-kanan dilakukan, sebuah tabir/overlay akan muncul untuk menutupi semua halaman:
Dasar Ide
Ide dasar dari pembuatan sistem keamanan ini yaitu dari plugin jQuery klik-kanan yang sempat Saya dapatkan dari A Beautiful Site. Caranya sangat sederhana: Cukup dengan menyisipkan plugin tersebut ke dalam proyek, lalu kita jalankan fungsi .rightClick() untuk menampilkan overlay ketika agresi klik-kanan dilakukan:
/* jQuery Right-Click Plugin Version 1.01 Cory S.N. LaViska A Beautiful Site (http://abeautifulsite.net/) */ if(jQuery)(function(){$.extend($.fn,{rightClick:function(a){$(this).each(function(){$(this).mousedown(function(b){var c=b;$(this).mouseup(function(){$(this).unbind("mouseup");if(c.button==2){a.call($(this),c);return false}else{return true}})});$(this)[0].oncontextmenu=function(){return false}});return $(this)},rightMouseDown:function(a){$(this).each(function(){$(this).mousedown(function(b){if(b.button==2){a.call($(this),b);return false}else{return true}});$(this)[0].oncontextmenu=function(){return false}});return $(this)},rightMouseUp:function(a){$(this).each(function(){$(this).mouseup(function(b){if(b.button==2){a.call($(this),b);return false}else{return true}});$(this)[0].oncontextmenu=function(){return false}});return $(this)},noContext:function(){$(this).each(function(){$(this)[0].oncontextmenu=function(){return false}});return $(this)}})})(jQuery); // Jalankan fungsi... $(function() { $(document).rightClick(function(e) { $('#no-right-click-overlay').show(); //menampilkan overlay ketika agresi klik-kanan dilakukan }); $('#no-right-click-overlay').click(function() { $(this).fadeOut("fast"); //menghilangkan overlay ketika overlay diklik }); });Langkah Selengkapnya
Berikut ini yaitu langkah-langkah selengkapnya untuk membuat sistem keamanan ibarat pada halaman demo:
- Pertama-tama pastikan dulu bahwa temamu sudah dilengkapi dengan jQuery. Jika belum ada, kunjungi halaman ini terlebih dahulu lalu salin script jQuery-nya saja. Plugin easing tidak dibutuhkan dalam proyek ini.
-
Setelah itu salin aba-aba ini lalu letakkan sempurna di bawah jQuery tadi:
<script> /* jQuery Right-Click Plugin Version 1.01 Cory S.N. LaViska A Beautiful Site (http://abeautifulsite.net/) */ if(jQuery)(function(){$.extend($.fn,{rightClick:function(a){$(this).each(function(){$(this).mousedown(function(b){var c=b;$(this).mouseup(function(){$(this).unbind("mouseup");if(c.button==2){a.call($(this),c);return false}else{return true}})});$(this)[0].oncontextmenu=function(){return false}});return $(this)},rightMouseDown:function(a){$(this).each(function(){$(this).mousedown(function(b){if(b.button==2){a.call($(this),b);return false}else{return true}});$(this)[0].oncontextmenu=function(){return false}});return $(this)},rightMouseUp:function(a){$(this).each(function(){$(this).mouseup(function(b){if(b.button==2){a.call($(this),b);return false}else{return true}});$(this)[0].oncontextmenu=function(){return false}});return $(this)},noContext:function(){$(this).each(function(){$(this)[0].oncontextmenu=function(){return false}});return $(this)}})})(jQuery); // Jalankan fungsi... $(function() { $(document).rightClick(function(e) { $('#no-right-click-overlay').show(); //menampilkan overlay ketika agresi klik-kanan dilakukan }); $('#no-right-click-overlay').click(function() { $(this).fadeOut("fast"); //menghilangkan overlay ketika overlay diklik }); }); </script> -
Berikutnya letakkan elemen ini sempurna di atas tag
</body>:<div id='no-right-click-overlay'> Teks peringatan di sini... </div> -
Terakhir, Salin aba-aba CSS ini, lalu letakkan sempurna di atas aba-aba
]]></b:skin>atau</style>:#no-right-click-overlay { background:#000; font:bold 30px 'Comic Sans MS',Calibri,Arial,Sans-Serif; color:#f10c0c; position:fixed !important; position:absolute; top:0px; right:0px; bottom:0px; left:0px; width:90%; height:100%; text-align:center; padding:5%; display:none; } - Klik Simpan Tema.
Lebih Lanjut
Dalam script di atas Saya menerapkan fungsi .rightClick() pada $(document). Itu artinya bahwa Saya akan melarang orang lain melaksanakan agresi klik-kanan pada semua area dalam dokumen. Namun, jikalau Anda ingin menonaktifkan klik-kanan pada area/elemen tertentu saja, selektor $(document) sanggup Anda ganti dengan selektor lain. Misalnya ibarat ini:
$('#terlarang').rightClick(function(e) { $('#no-right-click-overlay').show(); });
Kode di atas akan melarang orang lain untuk melaksanakan agresi klik-kanan pada area #terlarang saja, sedangkan untuk area lainnya sanggup dikenai agresi klik-kanan: