Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.

Konfigurasi jQuery UI Dialog

jQuery UI Dialog

jQuery UI Dialog digunakan untuk menangani hal-hal yang berhubungan dengan komunikasi antarmuka antara aplikasi dengan pengguna. Karena tidak mungkin jika sebuah aplikasi bisa berbicara dan menyarankan sesuatu untuk dilakukan oleh pengguna, kotak dialog menjadi salah satu cara yang bisa digunakan untuk berkomunikasi.

Dasar Penggunaan

Buat sebuah elemen divisi sembarang, kemudian isi elemen tersebut dengan sesuatu. Seleksi elemen tersebut dengan jQuery, kemudian terapkan metode .dialog():

HTML

<div id="dialog">
    Konten di sini...
</div>

jQuery UI

$('#dialog').dialog();

Lihat Demo

Konfigurasi jQuery UI Dialog

Opsi Nilai Deskripsi
title "Judul Dialog" Menentukan judul kotak dialog.
autoOpen true Jika bernilai true, maka kotak dialog akan tampil pada saat halaman pertama kali diakses. Jika bernilai false, kotak dialog tidak akan tampil saat halaman diakses sampai sebuah pemicu memerintahkan kotak dialog tersebut untuk tampil. Pemicu biasanya berupa tombol atau suatu aksi (default: true)
false
width 100, 200, 300, … Menentukan lebar kotak dialog (default: 300)
height 100, 200, 300, … Menentukan tinggi kotak dialog (default: "auto")
maxWidth 100, 200, 300, … Menentukan lebar maksimal kotak dialog (default: false)
maxHeight 100, 200, 300, … Menentukan tinggi maksimal kotak dialog (default: false)
minWidth 100, 200, 300, … Menentukan lebar minimal kotak dialog (default: 150)
minHeight 100, 200, 300, … Menentukan tinggi minimal kotak dialog (default: 150)
show "fade", "slide", ... (efek jQuery UI) Menentukan efek khusus saat kotak dialog tampil (default: null)
hide "fade", "slide", ... (efek jQuery UI) Menentukan efek khusus saat kotak dialog ditutup (default: null)
closeText "close", "tutup", ... Menentukan teks pada tombol penutup kotak dialog di sebelah kanan atas. Secara umum tidak terlihat karena opsi ini memang tidak terlalu penting. Bahkan, dalam tema jQuery UI, teks ini juga tidak akan ditampilkan:.ui-dialog-titlebar-close span {display:none}(default: "close")
modal true Pilihan untuk menampilkan tabir transparan saat kotak dialog muncul. (default: false)
false
draggable true Pilihan untuk menentukan apakah kotak dialog dapat diseret (drag) atau tidak. (default: true)
false
resizable true Pilihan untuk menentukan apakah kotak dialog dapat diubah ukurannya atau tidak. (default: true)
false
buttons {
  "Tombol1": function() {},
  "Tombol2": function() {},
  "Tombol3": function() {}
}
Menambahkan tombol di dalam kotak dialog. Bagian ini biasanya yang sedikit rumit, karena selain menampilkan tombol, Anda juga harus bisa membuat tombol tersebut berfungsi sehingga kotak dialog bisa hidup.

Contoh Penerapan

autoOpen:false

Menentukan opsi autoOpen:false akan membuat kotak dialog tidak muncul pada saat pertama kali halaman diakses dan hanya akan muncul jika diperintah.

Kita buat sebuah elemen divisi sebagai kotak dialog dan sebuah tombol sebagai pemicunya:

HTML

<div id="dialog">
    Konten di sini...
</div>
<button id="open">Buka Dialog</button>

jQuery UI

$('#dialog').dialog({
    autoOpen: false
});

$('#open').button({
    icons: {
        primary: "ui-icon-folder-open"
    }
}).click(function() {
    $('#dialog').dialog("open");
});

Lihat Demo

.dialog("open") dan .dialog("close") adalah metode yang digunakan untuk menampilkan dan menyembunyikan kotak dialog. Selain menggunakan opsi autoOpen:false, menghilangkan kotak dialog juga bisa dilakukan dengan cara yang lebih sederhana yaitu dengan CSS atau dengan fungsi .hide():

#dialog {display:none}
$('#dialog').hide();

title:"Kotak Dialog", width:250, height:200

Menambahkan judul “Kotak Dialog” dan menentukan lebar kotak dialog sebesar 250 piksel dan tinggi kotak dialog sebesar 200 piksel:

$('#dialog').dialog({
    title: "Kotak Dialog",
    width: 250,
    height: 200
});

Lihat Demo

show:"blind", hide:"puff"

Menciptakan efek blind pada saat kotak dialog ditampilkan dan efek puff pada saat kotak dialog ditutup:

HTML

<div id="dialog" style="display:none;">
    Konten di sini...
</div>
<button id='open'>Buka Dialog</button>

jQuery UI

$('#open').button({
    icons: {
        primary: "ui-icon-folder-open"
    }
}).click(function() {
    $('#dialog').dialog({
        title: "Kotak Dialog",
        show: "blind",
        hide: "puff"
    });
});

Lihat Demo

modal:true

Menentukan opsi modal:true akan menciptakan tabir di belakang kotak dialog saat kotak dialog ditampilkan:

$('#dialog').dialog({
    title: "Kotak Dialog",
    modal: true
});

$('#open').button({
    icons: {
        primary: "ui-icon-folder-open"
    }
}).click(function() {
    $('#dialog').dialog("open");
});

Lihat Demo

draggable:false, resizable:false

Menentukan opsi draggable:false dan resizable:false akan menonaktifkan fitur draggable dan resizable pada kotak dialog:

$('#dialog').dialog({
    title: "Kotak Dialog",
    draggable: false,
    resizable: false
});
jQuery UI Dialog - Disable Resize & Draggable Features
draggable:true, resizable:true

Lihat Demo

Menghidupkan Kotak Dialog

Tombol dalam kotak dialog dengan kemampuan untuk menjalankan perintah akan menghidupkan kotak dialog dan tidak hanya sekedar berakhir sebagai kotak peringatan. Anda bisa menciptakan kotak dialog yang dapat memerintahkan elemen lain untuk melakukan sesuatu.

Pada dasarnya, opsi buttons dapat dituliskan seperti ini:

buttons: {
    "OK": function() {
        // Fungsi yang akan bekerja jika
        // tombol `OK` diklik dibuat di sini...
    },
    "Cancel": function() {
        // Fungsi yang akan bekerja jika
        // tombol `Cancel` diklik dibuat di sini...
    }
}

Sebagai contoh, kita akan membuat dua buah tombol dalam kotak dialog untuk mengendalikan elemen yang berada di luar kotak dialog:

HTML

<div id="dialog"></div>
<div id="kotak">Kendalikan Saya!</div>

CSS

#kotak {
  width:170px;
  height:200px;
  background:#4AB847;
  border:2px solid #369834;
  padding:10px;
  font-size:16px;
  font-weight:bold;
  color:white;
  cursor:pointer;
}

jQuery UI

$('#dialog').dialog({
    title: "Tombol dalam Dialog",
    autoOpen: false,
    buttons: {
        "SlideUp": function() {
            $('#kotak').slideUp(1000);
        },
        "SlideDown": function() {
            $('#kotak').slideDown(1000);
        }
    }
});

// Tampilkan kotak dialog saat `#kotak` didekati pointer
$('#kotak').mouseenter(function() {
    $('#dialog').dialog("open");
});

Lihat Demo

Modal Konfirmasi

Sebenarnya cara kerjanya sangat sederhana. Saat sebuah tombol diklik, itu akan memicu sebuah fungsi untuk menampilkan kotak konfirmasi. Salah satu tombol di dalam kotak konfirmasi merupakan perintah sebenarnya dari tombol yang diklik tadi. Sedangkan tombol yang Anda kira sebagai pemicu utama untuk menjalankan perintah sebenarnya hanyalah tombol untuk menampilkan kotak dialog konfirmasi:

Modal Konfirmasi jQuery UI Dialog
Modal konfirmasi dengan jQuery UI

HTML

<div class="separator">
    <img class="item" alt="" src="my-image.jpg">
    <button id="delete">Hapus Gambar!</button>
</div>

<div id="confirm-box">
    <span class="ui-icon ui-icon-alert" style="float:left;margin:0 10px 50px 0;"></span>Apakah Anda yakin akan menghapus gambar ini? Hal ini tidak bisa dibatalkan dan gambar ini akan terhapus selamanya.
</div>

CSS

.separator {
  position:relative;
  float:left;
}

.separator button {
  position:absolute;
  top:10px;
  left:10px;
}

jQuery UI

$('#confirm-box').dialog({
    modal: true,
    autoOpen: false,
    title: "Konfirmasi",
    buttons: {
        "Ya": function() {
            $('img.item').parent().hide("explode", {
                pieces: 36
            }, 1000);
            $(this).dialog("close");
        },
        "Batal": function() {
            $(this).dialog("close");
        }
    }
});

// Tampilkan kotak dialog konfirmasi saat tombol hapus diklik
$('#delete').button({
    icons: {
        primary: "ui-icon-trash"
    }
}).click(function() {
    $('#confirm-box').dialog("open");
});

Lihat Demo

  

Berlangganan

Berlangganan: Dapatkan berbagai materi dan informasi seputar dunia pemrograman yang tidak akan pernah bisa kalian dapatkan di buku dan di bangku kuliah.

 14 Komentar

Memuat…

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://example.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI…</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI…</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI…</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

:) :( ^_^ :D ;) :bd :'( :\ ;p B) :Q :Ozzz 7:( \o/ **p :* 0:) :a 7:O *fuck* x& x@ ~x( *yaya* =p*

Nama Saya Taufik Nurrohman. Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias. Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?
Ke atas!