Konfigurasi jQuery UI Dialog

Tabel Konten
  1. Dasar Penggunaan 
    1. HTML 
    2. jQuery UI 
  2. Konfigurasi jQuery UI Dialog 
  3. Contoh Penerapan 
    1. autoOpen:false 
      1. HTML 
      2. jQuery UI 
    2. title:"Kotak Dialog", width:250, height:200 
    3. show:"blind", hide:"puff" 
      1. HTML 
      2. jQuery UI 
    4. modal:true 
    5. draggable:false, resizable:false 
  4. Menghidupkan Kotak Dialog 
    1. HTML 
    2. CSS 
    3. jQuery UI 
  • Modal Konfirmasi 
    1. HTML 
    2. CSS 
    3. jQuery UI 
  • 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 

    OpsiNilaiDeskripsi
    title"Judul Dialog"Menentukan judul kotak dialog.
    autoOpentrueJika 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
    width100, 200, 300, …Menentukan lebar kotak dialog (default: 300)
    height100, 200, 300, …Menentukan tinggi kotak dialog (default: "auto")
    maxWidth100, 200, 300, …Menentukan lebar maksimal kotak dialog (default: false)
    maxHeight100, 200, 300, …Menentukan tinggi maksimal kotak dialog (default: false)
    minWidth100, 200, 300, …Menentukan lebar minimal kotak dialog (default: 150)
    minHeight100, 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")
    modaltruePilihan untuk menampilkan tabir transparan saat kotak dialog muncul. (default: false)
    false
    draggabletruePilihan untuk menentukan apakah kotak dialog dapat diseret (drag) atau tidak. (default: true)
    false
    resizabletruePilihan 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

    14 Komentar

    • Anonim

      mas nih membutuhkan jQuery level atw versi berapa...?

    • Anonim

      gmana cara nerapin di post homepage mas? :Ozz

    • Anonim

      kayak gini kah ?
      <script type='text/CSS'>
      $(&#39;.post-outer&#39;).post-outer({
      draggable:true,
      resizable:false
      });
      </script>

    • Taufik Nurrohman

      Pertama-tama pasang dulu library JQuery UI setelah JQuery - Pelajari di sini, setelah itu baru kita bisa bekerja. Untuk kasusmu mungkin seperti ini:

      <script type='text/javascript'>
      $('.post-outer').dialog({
      draggable:true,
      resizable:false
      });
      </script>

      Sampel lain: http://jsfiddle.net/tovic/2WLCU/20/

    • Anonim

      mas fungsi itu buat tv gmn ?

    • Anonim

      kulo mboten ngertos iki kang ah, kode yang siap pakai lah kang biar lebih mudah dipahami, gatot soalnya

    • Taufik Nurrohman

    • Anonim

      Komentar ini telah dihapus oleh administrator blog.

    • Unknown

      mas , source "Modal Konfirmasi" itu hanya untuk menghidden images ya,

    • Unknown

      Gan kok ngga jalan yaa Konfigurasi Jquery ui dialog nyaa ? why ?
      saya coba pasang di Layer windown ini
      DISINI GAN

      dan script nya saya ikutin ini

      $('#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 delete diklik
      $('button#delete').button({
      icons:{primary:"ui-icon-trash"}
      }).click(function() {
      $('#confirm-box').dialog("open");
      });

    • Taufik Nurrohman

      JQuery UI belum dipasang.

    • Unknown

      Semua harus dipasang ?
      di jquery UI nyaa ?

    • Taufik Nurrohman

      Urutannya adalah CSS JQuery UI » JQuery » JQuery UI » Deklarasi Skrip:

      <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css" rel="stylesheet"/>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
      <script>
      $(document).ready(function() {
      $('#confirm-box').dialog({
      modal: true,
      autoOpen: false,
      title: "Konfirmasi",
      buttons: {
      "Ya": function() {},
      "Batal": function() {}
      }
      });
      });
      </script>

      Kode baris ke dua, kalau sudah ada tidak perlu disertakan lagi. Pindahkan posisinya supaya tampak seperti urutan skrip di atas. Lebih baik pelajari dulu dasarnya di sini.

    • Unknown

      Your The best Taufik ...
      oh iyaa Nama DTE nie udah saya pasang di blog saya
      click disini

    Komentar telah ditutup.