Artikel kali ini saya akan coba membahas cara menggunakan jQueryUI dialog. Jadi bisa sebagai alternatif daripada menggunakan fungsi alertnya javascript. jQueryUI ini juga bisa dicustom sesuai dengan kebutuhan kalian sehingga lebih fleksibel juga untuk sebagai alat bantu mempercantik web yang anda bangun.

Untuk bisa memakai jQueryUI, anda harus mendownload librarynya terlebih dahulu di websitenya. Ketika posting ini ditulis versi yang terbaru saat itu adalah jQuery UI 1.9.1
Jika sudah maka bisa diload dihalaman mana anda mau memunculkan fitur dialog ini

<!-- Load jQuery + jQuery UI -->

< script src="js/jquery-1.8.2.min.js">< /script >

< script src="js/jquery-ui-1.9.1.custom.min.js">< /script >

 

<!-- Load jQuery UI CSS -->

<link rel="stylesheet" href="css/jquery-ui-1.9.1.custom.min.css">

jika sudah di load maka jQueryUI dialog ini siap digunakan.Semua kode untuk menjalankan jQueryUI harus berada didalam scope document ready seperti biasanya. Saya akan membahas beberapa variasi untuk memanggil jQueryUI dialog ini agar bisa lebih mudah dimengerti untuk cara memakainya


1. Pemanggilan Default
di bagian script anda. Script ini akan segera dijalankan ketika halaman sudah selesai diload. Jadi Dialog boxnya akan langsung muncul.

$("#dialogDefa").click(function(){

 $("#dialog").dialog();

});

 

dan dibagian html anda

<!-- isi content dialog --> 

<div style="display:none;" id="basicDialog" title="Basic modal dialog">

 Dialog ini merupakan Basic Dialog, yang akan otomatis terload saat halaman selesai terload semua.

</div>

 

2. Basic Dialog dengan tombol trigger
di bagian script anda.

$("#dialogDefa").click(function(){

 $("#dialog").dialog();

});

 

dan dibagian html anda

<!-- Tombol untuk trigger dialog --> 

<input type="button" id="dialogDefa" value="Open Dialog" />

<!-- isi content dialog --> 

<div style="display:none;" id="dialog" title="Basic dialog">

 

 Ini adalah dialog default yang biasanya berguna untuk menampilkan informasi. Dialow window ini bisa digeser, diresize, dan bisa ditutup dengan klik icon x

 

</div>

 

3. Dialog dengan animasi
di bagian script anda. Untuk opsi animasi pada contoh yang dipakai adalah "blind" ketemu tampil dan "explode" ketika ditutup dialognya. Untuk macam2 opsi animasi sendiri ada beberapa yang lain seperti bounce,clip,drop,fade,fold,highlight,puff,pulsate,scale,shake,size,slide, dan transfer

$("#dialogAnimasi").click(function(){

 $("#dialognyaAnimasi").dialog({

 autoOpen: false,

 show: "blind",

 hide: "explode"

 });

 $("#dialognyaAnimasi").dialog("open");

});

 

dan dibagian html anda

<!-- Tombol untuk trigger dialog --> 

<input type="button" id="dialogAnimasi" value="Open Dialog" /> 

<!-- isi content dialog --> 

<div style="display:none;" id="dialognyaAnimasi" title="Animasi Dialog">

 

 Ini adalah dialog window yang akan muncul dengan animasi, berguna untuk menampilkan informasi. Dialow window ini bisa digeser, diresize, dan bisa ditutup dengan klik icon x

 

</div> 

 

4. Dialog dengan konfirmasi
di bagian script anda. Untuk label2nya bisa diedit sendiri sesuai dengan keperluan.

$("#tmbDialogConfirm").click(function(){

 $( "#dialogConfirm" ).dialog({

 resizable: false, 

 modal: true,

 buttons: {

 "Confirm": function() {

 alert('Anda mengklik Confirm.');

 $( this ).dialog( "close" );

 },

 Cancel: function() {

 alert('Anda mengklik Cancel.'); 

 $( this ).dialog( "close" );

 }

 }

 });

});

 

dan dibagian html anda

<!-- Tombol untuk trigger dialog --> 

<input type="button" id="tmbDialogConfirm" value="Open Dialog" />

<!-- isi content dialog --> 

<div style="display:none;" id="dialogConfirm" title="Hapus semua data?">

 <span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>Data ini akan terhapus semua secara permanen, lanjutkan aksi?

</div>

 

5. Dialog Iframe
di bagian script anda.

//init iframenya

$urlDialogIframe = $("<div></div>") 

 .append($('<iframe />')

 .attr("src", "http://kaskus.co.id/")

 .attr("style","width: 535px;height: 475px;margin: 0px;padding: 0px;border: 0px;"))

 .dialog({ 

 autoOpen: false,

 modal:true,

 title: 'Dialog Iframe',

 width: 575,

 height: 550

 });



//tangkap event kliknya button

$("#tmbDialogIframe").click(function(){

 $urlDialogIframe.dialog('open');

 return false;

});

 

dan dibagian html anda

<!-- Tombol untuk trigger dialog --> 

<input type="button" id="tmbDialogIframe" value="Open Dialog" />

 

Begitulah kira2 untuk memakai jQueryUI Dialog dari jQueryUI ini, ini hanyalah beberapa contoh basic yang sering digunakan di aplikasi-aplikasi web based biasanya.
Jika dirasa postingnya berguna bisa posting komentar dibawah ini

Untuk melihat Demo Tutorial bisa ke blog saya saja langsung lewat link dibawah ini
View Demo