Kotak Dialog Dengan jQuery UI

Nah, pada artikel ini saya ingin berbagi tips bagaimana mendesain kotak dialog dengan berbagai variasi tampilan menggunakan library jQuery UI.

Langkah pertama, kita harus mendownload jQuery, jQuery UI dan salah satu theme-nya misalnya saja smoothness. Untuk jQuery UI, kita bisa memilih dan memodifikasi theme yang kita sukai menggunakan fasilitas yang tersedia pada situs tersebut.

Berikutnya ekstrak library tersebut pada salah satu folder di komputer kita. Di dalam paket library jQuery UI tersebut kita akan menemukan 3 buah folder dan satu file index.html dengan susunan sebagai berikut:

• css (berisi file theme)
• development-bundle (berisi library dalam format file kecil-kecil, demo serta dokumentasi)
• js (berisi library jQuery dan jQuery UI dalam format file tunggal dan terkompresi)
• index.html

Untuk membuat kotak dialog, file yang kita perlukan yaitu jquery-1.4.2.min.js dan jquery-ui-1.8.1.custom.min.js (keduanya ada dalam folder js) serta theme (misalnya smoothness) yang terdapat dalam folder css.

Langkah untuk membuat kotak dialog dengan jQuery UI yaitu sebagai berikut:

1. Buat folder (misalnya dialog) di komputer kita.
2. Kopikan folder js dan css yang terdapat pada paket library jQuery UI beserta isinya pada folder dialog yang kita buat tersebut.

Fungsi utama untuk membuat kotak dialog yaitu dialog(). Parameter yang dimiliki fungsi ini cukup banyak, saya tidak akan membahasnya satu persatu. Untuk lebih jelasnya silakan baca sendiri pada dokumentasinya.

Baca Lebih lengkap