Materi Kuliah Pemrograman: JQuery : Membuat dialog Box

Senin, 07 November 2011

JQuery : Membuat dialog Box

Halo, kali ini kita mencoba membuat dialog box menggunakan jquery ui. Apa itu jquery UI ? , jquery UI adalah User Interface (UI) yang dibuat sebagai plugin jquery, sehingga cara penggunaannya sama seperti menggunakan plugin jquery yang lain.

Berikut ini contoh tampilan dialog sederhana yang saya gunakan dalam aplikasi yang saya buat.

Berikut ini langkah - langkah pembuatan dialog :

Buat sebuah tag dalam body (boleh dimanapun) div yang berisi kontent html table seperti pada form diatas. Jangan lupa beri id untuk div yang kita buat ini. saya memberi nama "dialog_harga". Id ini penting , agar kita dapat dengan mudah men-select dari jquery , nih maksudnya seperti ini --> $("#dialog_harga")
Buat Inisialisasi kode.

Ya, cukup demikian langkah - langkahnya. Untuk langkah lain yang sudah pasti, seperti : include semua file jquery dan jquery-ui kedalam body. Mari kita lihat kodenya :

<html>
<head>

<!-- jquery -->
<script language="javascript" src="jquery.js"></script>

<!-- jquery ui core, dialog  dan draggable -->
<script language="javascript" src="ui.core.js"></script>
<script language="javascript" src="ui.dialog.js"></script>
<script language="javascript" src="ui.draggable.js"></script>


</head>

<body>
<!-- kita set agar bisa diklik -->
<span id='latihan' style='cursor:pointer'>Latihan jquery dialog makkul.com</span>

<!-- kita sembunyikan dialognya dengan mengeset atrribute css display menjadi none -->
<div id='dialog_harga' style='display:none' title="Input Harga">
<table>
<tr>
<td>Jenis SPB</td>
<td>
<?php echo form_dropdown("jenis_spb", $all_jenisspb,array(1)); ?>
</td>
</tr>
<tr>
<td>Jenis Bayar</td>
<td>
<div id="div_jb">
<?php echo form_dropdown("h_jenis_pembayaran", $all_jenisbayar,array(1)); ?>
</div>
</td>
</tr>
<tr>
<td>Tgl Awal</td>
<td>
<input type='text' id='tgl_awal' name='tgl_awal' value="<?php echo date("d/m/Y"); ?>">
<input type='hidden' id='h_tgl_awal' name='h_tgl_awal' value="<?php echo date("Y-m-d"); ?>">
</td>
</tr>
<tr>
<td>Tgl Akhir</td>
<td>
<input type='text' id='tgl_akhir' name='tgl_akhir' value="<?php echo date("d/m/Y"); ?>">
<input type='hidden' id='h_tgl_akhir' name='h_tgl_akhir' value="<?php echo date("Y-m-d"); ?>">
</td>
</tr>
<tr>
<td>Harga Jual</td>
<td><input type='text' id='harga_jual' name='harga_jual'></td>
</tr>
<tr>
<td>Harga Dasar</td>
<td><input type='text' id='harga_dasar' name='harga_dasar'></td>
</tr>
<tr>
<td>Uang Muka</td>
<td><input type='text' id='uang_muka' name='uang_muka'></td>
</tr>
<tr>
<td>Cicilan</td>
<td><input type='text' id='cicilan' name='cicilan'></td>
</tr>
<tr>
<td>Keterangan</td>
<td>
<textarea id='h_keterangan' name='h_keterangan' cols='35'></textarea>
<input id="id_hargaproduk" type="hidden" value="0">
</td>
</tr>
</table>
</div>

</body>


<script>

$(document).ready(function(){

<!-- set klik function -->
$("#latihan").click(function(){
//open
$("#dialog_harga").dialog("open");
});

<!-- kode untuk inisialisasi dialog -->
$("#dialog_harga").dialog({
width:400,
autoOpen:false,
resizable:false,
modal:true,
draggable:true,
buttons: {
 Ok: function() {
  save_harga();
  $("#dialog_harga").dialog("close");
 }
},
close:function(){
}
});

});

function save_harga()
{
//disini kita tulis kode untuk save harga
alert("Save harga demo");
}
</script>
</html>