Fungsi ini ditulis ketika saya sedang mencoba mengembangkan sebuah plugin konfirmasi saat pengguna mengklik sebuah link. Berbagai metode sudah di coba namun hasilnya tetap saja tidak sesuai harapan. Ketika seorang pengguna mengklik salah satu link pada suatu halam website maka sebuah kotak dialog konfirmasi akan muncul untuk memastikan bahwa pengguna benar-benar ingin mengetahui isi dari link tersebut. Hal ini memang sederhana, namun saya tidak ingin menggunakan kode dari JavaSript murni, saya ingin melibatkan framework jQuery untuk membuat kotak dialog konfirmasi. Sedangkan sampai hari ini jQuery belum punya fungsi .confirm() pada perpustakaannya. Memang ada beberapa fungsi jQuery yang telah dikembangkan, namun link yang akan di tuju harus sudah didefiniskan di awal agar pengguna mengunjungi halaman yang tepat. Sedangkan saya tidak ingin mengdefinisikan link-nya terlebih dahulu, sederhananya kita tidak perlu tahu dan tidak perlu mendefiniskan dulu mana link yang akan dituju. Kita hanya perlu menentukan identitas link tanpa perlu menuliskan secara utuh link tersebut.
Skenario HTML
Saya memiliki sekumpulan link yang ditautkan pada halaman situs di luar website saya, maka biasanya saya memberikan tanda khusus pada link tersebut atau saya memberikan class khusus pada link eksternal tersebut. Misal seperti dibawah ini:
<a class="external" href="https://plus.google.com/117605316261414253716">Google +</a>
<a class="external" href="https://www.facebook.com/bloggertuneup">Facebook</a>
<a class="external" href="http://twitter.com/bloggertuneup">Twitter</a>
<a class="external" href="http://dribbble.com/hendriono">Dribbble</a>
Yang perlu diperhatikan disini adalah class="external" sebagai sebuah identitas pada link tersebut, walau identitasnya tidak unik dalam setiap link, namun ketika pengguna meng-klik link maka link yang ada pada attribut href (link tujuan) yang akan ditampilkan.
Skenario jQuery
Seperti dijelaskan diatas, bahwa jQuery digunakan untuk memanipulasi link (anchor) agar mampu menampilkan kotak dialog konfirmasi saat pengunjung meng-klik sebuah link tanpa langsung mengarah pada link yang dituju. Proses klik akan tertahan oleh kotak dialog konfirmasi dan kemudian akan muncul 2 tombol untuk meyakinkan pengunjung. Tombol "OK" jika yakin akan mengunjungi link yang dituju, tombol "Cancel" jika ingin membatalkannya. Maka script jQuery ditulis seperti dibawah ini:
$(document).ready(function(){
$('a.external').click(function(event){
event.preventDefault()
var tujuan = $(this).attr('href');
var konfirmasi = confirm('Apakah anda yakin akan mengunjungi link ini?');
if (konfirmasi){
window.location = tujuan;
}
});
});
Penjelasan Kode jQuery
Dibawah ini penjelasan mengenai masing-masing baris script jQuery yang digunakan.$(document).ready(function(){
Pemuatan akan dimulai jika dokumen sudah siap$('a.external').click(function(event){
Memilih dan menyeleksi semua anchor (link) yang memiliki class external. Jika anchor external di klik maka...event.preventDefault()
Jika metode ini dipanggil maka aksi default (asalnya) tidak akan dipicu (baca; aksi tertahan disini), klik hanya bereaksi pada aksi kode dibawah ini tanpa menuju sebuah halaman.
var tujuan = $(this).attr('href');
Mendefinisikan variabel tujuan yang berisi link tujuan. Link tujuan di ambil dari anchor yang memiliki class externalvar konfirmasi = confirm('Apakah anda yakin akan mengunjungi link ini?');
Mendefinisikan variabel konfirmasi yang akan menampilkan kotak dialog konfirmasi saat link di klik.if (konfirmasi) {
Jika tombol "OK" pada kotak dialog di eksekusi (di klik), maka...window.location = tujuan;Anchor (link) tujuan akan dibuka dengan menutup halaman yang sedang dibuka.
}Fungsi konfirmasi ditutup
});Fungsi klik ditutup
});Fungsi pemuatan jQuery ditutup
Jika anda ingin halaman semula tidak diganti dengan halaman tujuan, artinya; setiap pengunjung meng-klik sebuah link maka halaman tujuan akan dibuka pada jendela/tab baru maka ganti kode dibawah ini:
window.location = tujuan;dengan kode dibawah ini:
window.open(tujuan,'_blank');
Selamat mencoba dan semoga berhasil... Happy Blogging :)
Pranala Luar:
