Cara Menggunakan Modal Dialog Dengan jQuery UI

Selamat Datang pada tips dan trik Dumet School, Halo teman – teman apakabar semua. Berjumpa kembali dengan saya di atikel hari ini, pada latihan kemarin kita sudah belajar beberapa fungsi dari jQuery. Dan kali ini kita akan belajar tentang Cara Menggunakan Modal Dialog Dengan jQuery UI, dimana di dalam jQuery UI sudah di sediakan beberapa diantaranya adalah jQueryUI CSS, jQueryUI Komponen Layout dan jQueryUI Plugins. Dengan kita memanggil fungsinya maka dengan otomatis tampilan akan tampil dengan sendirinya, ini sama dengan kita belajar bootstrap hanya tinggal memanggil class atau id nya saja. Pada latihan kali ini kita akan praktekkan dengan studi case sederhana, baru nanti teman – teman bisa kembangkan lagi untuk hasil yang maksimal.

Baik, saatnya kita implementasikan Cara Menggunakan Modal Dialog Dengan jQuery UI teman – teman siapkan text editornya. Pertama – tama yang harus kita lakukan adalah load terlebih dahulu library jQuery UI nya kalian bisa copy di bawah ini atau bisa kunjungi langsung website resminya di www.jQuery.com

http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css

untuk link jQuery UI css

http://code.jquery.com/jquery-1.10.2.js
http://code.jquery.com/ui/1.10.4/jquery-ui.js

Dan yang ini untuk link jQuery dan jQuery UI nya, untuk menggunakan teman – teman cukup letakkan di dalam tag head

Lalu teman – teman ketikkan script seperti gambar di bawah ini

Dan save dengan nama index.html, baru berikutnya kita berikan script jQuery UI nya untuk menampilkan modal kotak dialog

<script>
 $(function() {
    $("#dialog").dialog({
     autoOpen: false, 
    });
    $("#buka").click(function(){
     $("#dialog") .dialog("open");
    });
 });
 </script>

Jika sudah save dan jalankan pada browsernya, maka hasilnya seperti gambar di bawah ini

Klik button, maka kotak dialog akan tampil

Jika ingin mengcostum kita tinggal inspect element pada browser, caranya klik kanan pada mouse dan pilih inspect elemen

Jika berhasil maka script nya berada diantara borwser dan kita tinggal arahkan

Klik pic atau yang saya beri kotak merah pada gambar di atas ini, kemudian klik pada judul dialog yang mempunyai background orange, maka akan muncul script

Kemudian kita copy dan letakkan pada text editornya, lalu saya berikan background berwarna merah

Jika sudah save dan refresh pada browsernya, jika belum berhasil beckground berwarna merah kita kita custum lagi pada title dialog

Kita tambahkan pada css nya dengan beckground transparent

Maka hasilnya backgorunt head title dialog berwarna merah

Bagaimana, cukup mudah bukan..?? Baik, mungkin sekian pada artikel kali ini tentang Cara Menggunakan Modal Dialog Dengan jQuery UI kita berjumpa kembali pada artikel yang akan datang. Semoga bermanfaat dan semakin tahu bagaimana cara custom untuk jQuery UI nya khususnya kalian yang baru belajar jQuery UI. Terimakasih dan Sampai Jumpa.

Cara Menggunakan Modal Dialog Dengan jQuery UI

Kategori