Pada artikel sebelumnya Blogger Tune-Up pernah membahas tentang Konfirmasi Klik Link dengan jQuery, namun tampilan kotak dialog konfirmasi tampak klasik, sehingga terasa kurang menarik untuk digunakan. Nah, artikel kali ini kita akan menggunakan plugin jQuery dan CSS untuk mengubah tampilan kotak dialog konfirmasi agar tampil lebih menarik. Plugin untuk pengganti kotak dialog konfirmasi ini sebenarnya di tulis oleh TutorialZine, saya hanya melakukan modifikasi kecil pada bagian centering elemen. Pada script plugin aslinya, memposisikan elemen agar tepat berada di tengah halaman masih menggunakan CSS, kemudian saya sisipkan jQuery Centering Elemen agar posisi elemen kotak dialog tepat berada ditengah secara otomatis tanpa pengaturan melalui CSS-nya. Hanya sebuah perubahan kecil... (Untuk mempelajarinya, lebih baik unduh terlebih dahulu paket jQuery Confirm Plugin)
Skenario HTML
Kode HTML di bawah ini berisi class item yang berisi anchor dan gambar. Ketika halaman di load maka gambar yang ada didalam img akan di tampilkan untuk memanipulasi link anchor. Ketika gambar di klik maka kotak dialog konfirmasi akan tampil dan halaman akan ditutup dengan warna overlay. Ketika kita klik tombol "Ya" maka link didalam tag anchor akan ditampilkan. Ketika klik tombol "Batal" maka halaman semula akan ditampilkan. Maka skenario HTML ditulis seperti dibawah ini:
<div class="item">Jangan lupa sertakan kode-kode dibawah ini diantara tag <head>:
<a href="http://modification-blog.blogspot.com/">
<img src="http://modification-blog.blogspot.com/gambar.png" width="630" height="250" />
</a>
</div>
<link rel="stylesheet" type="text/css" href="assets/jquery.confirm.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="assets/jquery.confirm.js"></script>
<script src="assets/script.js"></script>
Skenario CSS
Kode CSS ini diberi nama jquery.confirm.css yang disertakan pada file yang bisa anda unduh. Kode-kode dibawah ini digunakan untuk memanipulasi penampilan kotak dialog konfirmasi.
/* Latar Penutup Halaman */
#confirmOverlay {
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
background:url('ie.png');
background:-moz-linear-gradient(rgba(21,48,110,0.4), rgba(21,48,110,0.8)) repeat-x rgba(21,48,110,0.4);
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(21,48,110,0.4)), to(rgba(21,48,110,0.8))) repeat-x rgba(21,48,110,0.4);
z-index:100000;
}
/* Kotak Dialog Konfirmasi */
#confirmBox {
background: #142D69;
width:460px;
border: 1px solid #051950;
}
#confirmBox h1, #confirmBox p {
font:26px/1 'Open Sans Condensed','Lucida Sans Unicode', 'Lucida Grande', sans-serif;
padding:10px 20px;
text-shadow:0 1px 0 #000F2D;
color:#8AA5E1;
}
#confirmBox h1 {
letter-spacing:0.3px;
background:-webkit-linear-gradient(bottom, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 30px);
background:-moz-linear-gradient(bottom, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 30px);
border-bottom:1px solid #051950;
border-top:1px solid #143778;
font-weight:bold;
}
#confirmBox p {
border-top:1px solid #143778;
font-size:18px;
line-height:1.4;
padding-top:25px;
text-align:center;
color: #ffffff;
}
/* Tombol */
#confirmButtons {
padding:15px 0 25px;
text-align:center;
}
#confirmBox .button {
display:inline-block;
position:relative;
height:27px;
font:17px/26px 'Open Sans Condensed','Lucida Sans Unicode', 'Lucida Grande', sans-serif;
margin:0 5px;
padding:0;
text-decoration:none;
}
#confirmBox .button span {
text-align:center;
display:block;
position:absolute;
top:0;
left:0;
right:0;
cursor:pointer;
font-weight:bold;
}
#confirmBox .round-blue {
width:150px;
color:#8aa5e1;
cursor:default;
border:1px solid #04133D;
text-shadow:0 -1px 0 #000f2d;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
box-shadow:inset 0 1px 0 #1A428C, 0 1px 0 #173C82;
-moz-box-shadow:inset 0 1px 0 #1A428C, 0 1px 0 #173C82;
-webkit-box-shadow:inset 0 1px 0 #1A428C, 0 1px 0 #173C82;
background:#133573;
background:-moz-linear-gradient(top, #133573 0%, #132A65 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#133573), color-stop(100%,#132A65));
background:-webkit-linear-gradient(top, #133573 0%,#132A65 100%);
background:-o-linear-gradient(top, #133573 0%,#132A65 100%);
background:-ms-linear-gradient(top, #133573 0%,#132A65 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#133573', endColorstr='#132A65',GradientType=0 );
-ms-filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#133573', endColorstr='#132A65',GradientType=0 );
background:linear-gradient(top, #133573 0%,#132A65 100%);
}
#confirmBox .round-blue:hover {
box-shadow:inset 0 1px 0 #1c4593, 0 1px 0 #173C82;
-moz-box-shadow:inset 0 1px 0 #1c4593, 0 1px 0 #173C82;
-webkit-box-shadow:inset 0 1px 0 #1c4593, 0 1px 0 #173C82;
background:#1d3e60;
background:-moz-linear-gradient(top, #15306E 0%, #163B7F 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#15306E), color-stop(100%,#163B7F));
background:-webkit-linear-gradient(top, #15306E 0%,#163B7F 100%);
background:-o-linear-gradient(top, #15306E 0%,#163B7F 100%);
background:-ms-linear-gradient(top, #15306E 0%,#163B7F 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#15306E', endColorstr='#163B7F',GradientType=0 );
-ms-filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#15306E', endColorstr='#163B7F',GradientType=0 );
background:linear-gradient(top, #15306E 0%,#163B7F 100%);
}
#confirmBox .round-blue:active {
box-shadow:inset 0 1px 0 #173C82, 0 1px 0 #173C82;
-moz-box-shadow:inset 0 1px 0 #173C82, 0 1px 0 #173C82;
-webkit-box-shadow:inset 0 1px 0 #173C82, 0 1px 0 #173C82;
background:#1d3e60;
background:-moz-linear-gradient(top, #15306E 0%, #163B7F 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#15306E), color-stop(100%,#163B7F));
background:-webkit-linear-gradient(top, #15306E 0%,#163B7F 100%);
background:-o-linear-gradient(top, #15306E 0%,#163B7F 100%);
background:-ms-linear-gradient(top, #15306E 0%,#163B7F 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#15306E', endColorstr='#163B7F',GradientType=0 );
-ms-filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#15306E', endColorstr='#163B7F',GradientType=0 );
background:linear-gradient(top, #15306E 0%,#163B7F 100%);
}
#confirmOverlay ini digunakan untuk memanipulasi tampilan warna latar yang digunakan untuk menutupi halaman saat kotak dialog konfirmasi tampil. Di sini menggunakan CSS3 gradient dan tranparansi PNG khusus untuk browser IE. #confirmBox digunakan untuk memanipulasi kotak dialog dari mulai warna, jenis huruf (kebetulan menggunakan contoh ini menggunakan jenis huruf Open Sans Condensed), dan lebar tinggi kotak dialog. Silahkan berkreasi lebih mendalam dengan kode-kode CSS ini. Silahkan dicari pada folder assets dengan nama file jquery.confirm.css. round-blue digunakan untuk memanipulasi tombol konfirmasi "Ya" dan "Batal". Tombol ini menggunakan gradient yang cukup rumit, lebih rumit dari kode CSS aslinya...
Skenario jQuery
Script jQuery dibawah ini bukan script plugin, tapi script untuk melakukan setting pada beberapa bagian kotak dialog konfirmasi (lihat file script.js pada folder assets). Perhatikan baik-baik, jika masih bingung, baca penjelasan dibawah.
$(document).ready(function(){
$('.item a').click(function(event){
event.preventDefault();
var tujuan = $(this).attr('href');
$.confirm({
'title' : 'Konfirmasi',
'message' : 'Anda akan membuka halaman baru.
Apakah Anda yakin akan membuka halaman ini pada jendela baru?',
'buttons' : {
'Ya, Saya Yakin!' : {
'class' : 'round-blue',
'action': function(){
window.open(tujuan,'_blank');
}
},
'Tidak, Malas Baca' : {
'class' : 'round-blue',
'action': function(){
// Kosong tidak ada aksi
}
}
}
});
});
});
Penjelasan Setting jQuery Confirm
Script dibawah ini digunakan untuk mengeset tampilan kotak dialog konfirmasi. Script ini berhubungan langsung dengan jquery.confirm.js (lihat file ini pada folder assets).
$(document).ready(function(){
Pemuatan fungsi akan dimulai jika dokumen sudah siap...$('.item a').click(function(event){
Mencari dan menyeleksi achor yang ada di dalam kontener item. Ketika anchor di klik maka fungsi dimulai...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');
Membuat dan menentukan sebuah variabel tujuan yang berisi url tujuan...$.confirm({
Registrasi fungsi konfirmasi (berhubungan dengan plugin jquery.confirm.js)'title' : 'Konfirmasi',Judul kotak dialog. Ganti kata "Konfirmasi" sesuai keinginan anda.
'message' : 'Anda akan membuka halaman baru.Pesan yang akan tampil pada kotak dialog konfirmasi. Ubahlah sesuai keinginan anda.
Apakah Anda yakin akan membuka halaman ini pada jendela baru?',
'buttons' : {
Menentukan tombol...'Ya, Saya Yakin!' : {
Keterangan nama tombol "Ya". Ubahlah sesuai keinginan...'class' : 'round-blue',
Menentukan bentuk tombol. Perhatikan kode CSS, jika anda memiliki bentuk lain, silahkan registrasikan disini...
'action': function(){
Aksi akan dilakukan ketika tombol "Ya, Saya Yakin!" di klik, dan fungsi dimulai...window.open(tujuan,'_blank');
Jendela akan terbuka sesuai dengan URL yang ada pada tujuan (lihat var tujuan) dan halaman dibukan pada jendela baru (_blank)
}Aksi ditutup
},Aksi klik tombol "Ya, Saya Yakin!" ditutup
'Tidak, Malas Baca' : {
Keterangan nama tombol "Batal". Ubahlah sesuai keinginan...'class' : 'round-blue',Menentukan bentuk tombol. Perhatikan kode CSS.
'action': function(){
Aksi akan dilakukan ketika tombol "Tidak, Malas Baca" di klik. Jika di kosongkan maka tombol tidak akan bereaksi apa-apa dan kotak dialog konfirmasi akan ditutup.
}Aksi ditutup
}Aksi klik tombol "Tidak, Malas Baca" ditutup
}Setting tombol ditutup
});Registasi fungsi confirm ditutup
});Fungsi klik anchor pada kontener item ditutup
});Fungsi jQuery ditutup...
Plugin jQuery Confirm
Script-script dibawah ini jika di jelaskan cukup menarik, namun sayang, sepertinya saya harus membuat halaman khusus untuk membahasnya (lihat file jquery.confirm.js pada folder assets).
/* ------------------------------------------------------------------------
jQuery Confirm Plugin
Version: 1.0.1
Description: jQuery Confirm Dialog Replacement
Original Script: TutorialZine (http://www.tutorialzine.com/)
Modify Script: Hendriono (http://modification-blog.blogspot.com/)
------------------------------------------------------------------------- */
(function($){
$.confirm = function(params){
if($('#confirmOverlay').length){
// Sebuah konfirmasi siap untuk ditampilkan pada halaman
return false;
}
var buttonHTML = '';
$.each(params.buttons,function(name,obj){
// Membuat markup tombol
buttonHTML += '<a href="#" class="button '+obj['class']+'"><span>'+name+'</span></a>';
if(!obj.action){
obj.action = function(){};
}
});
var markup = [
'<div id="confirmOverlay">',
'<div id="confirmBox">',
'<h1>',params.title,'</h1>',
'<p>',params.message,'</p>',
'<div id="confirmButtons">',
buttonHTML,
'</div></div></div>'
].join('');
$(markup).hide().appendTo('body').fadeIn();
var buttons = $('#confirmBox .button'),
i = 0;
$.each(params.buttons,function(name,obj){
buttons.eq(i++).click(function(){
// Memanggil aksi atribut ketika klik dilakukan
// dan menyembunyikan kotak dialog
obj.action();
$.confirm.hide();
return false;
});
});
//Centering elemen
$(window).resize(function(){
$('#confirmBox').css({
position: 'fixed',
left: ($(window).width() - $('#confirmBox').outerWidth()) / 2,
top: ($(window).height() - $('#confirmBox').outerHeight()) / 2
});
});
$(window).resize();
}
$.confirm.hide = function(){
$('#confirmOverlay').fadeOut(function(){
$(this).remove();
});
}
})(jQuery);
Kesimpulan
Silahkan berkreasi dengan memanfaatkan plugin ini. Anda bisa mengubah tampilan kotak dialog melalui file jquery.confirm.css. Anda bisa menyisipkan gambar pada kotak dialog, mengganti latar kotak dialog dan menambahkan icon pada kotak dialog.
Anda bahkan bisa saja hanya menampilkan satu tombol konfirmasi tanpa pilihan lain. Jadi silahkan berkreasi dalam menggunakan plugin jQuery Confirm ini untuk keperluan-keperluan lainnya.
Special thanks to TutorialZine for Plugin jQuery Confirm. Selamat mencoba dan semoga berhasil. Happy Blogging :)
