7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Web Development

Membuat Windows-like antarmuka dengan jQuery UI

Read Time: 12 mins

Indonesian (Bahasa Indonesia) translation by Yusuf Samin (you can also view the original English article)

Apakah Anda pernah ingin membuat user interface interaktif untuk aplikasi Anda, tapi tidak tahu bagaimana? Dalam tutorial ini, kita akan membuat Windows-like antarmuka dengan cepat dan mudah, dengan mendapatkan kotor dengan jQuery UI, antarmuka pengguna perpustakaan yang dibangun di atas jQuery.


Ap itu sebenarnya jQuery UI?

jQuery UI

jQuery UI menyediakan abstraksi untuk low level interaksi dan animasi, efek lanjutan dan tingkat tinggi, themeable widget.

jQuery UI selalu menjadi alat yang hebat dalam setiap pengembang front-end. Ini memiliki banyak widget yang berbeda dan efek yang indah dibuat untuk bekerja dengan sebagian besar browser. Ingin cara cepat untuk membuat sebuah antarmuka tab? jQuery UI telah mendapat 'em! Ingin membuat sebuah kotak modal dialog? Ia memiliki mereka terlalu!

Dalam tutorial ini, kita akan belajar bagaimana untuk memanfaatkan jQuery UI untuk menciptakan sebuah antarmuka pengguna yang sangat fungsional tanpa menggunakan apa pun. Pada akhirnya, Anda harus akrab dengan jQuery UI, beberapa komponennya, dan pemahaman dasar tentang jQuery UI kustomisasi. Pada akhirnya, kami akan membangun antarmuka pengguna yang mirip dengan windows, dengan kotak dialog yang draggable, resizable, minimizable dan maximizable.

Catatan: Jika Anda benar-benar ingin untuk menyesuaikan setiap sudut-dan-celah jQuery UI tema, Anda harus memeriksa tutorial ini berjudul "Massive panduan untuk tema kustom jQuery UI widget". Ini adalah tutorial premium hanya, tapi saya jamin sangat bagus untuk dibeli.!


Tujuan kami: Untuk membuat dialog seperti windows draggable, resizable, minimizable dan maximizable kotak bahwa kita dapat menerapkan untuk berbagai macam aplikasi

windows-like interface example from Aralista!windows-like interface example from Aralista!windows-like interface example from Aralista!
Windows-like antarmuka contoh dari Aralista!

Gambar milik http://aralista.com


Langkah 1: Menyiapkan

Untuk memulai, men-download jQuery UI Perpustakaan dari situs mereka, http://jqueryui.com. Setelah Anda mengunjungi situs, Anda akan melihat beberapa pilihan untuk "menyesuaikan" download jQuery UI Anda.

The jQuery UI Download PageThe jQuery UI Download PageThe jQuery UI Download Page
JQuery UI Halaman Download

Untuk tujuan dari tutorial kami, pastikan bahwa semua komponen yang dipilih. Untuk tema, Pilih tema Flick. Periksa lagi bahwa Anda juga memilih 1.8.16 versi, sebagai halaman download jQuery UI menyediakan versi warisan untuk jQuery rilis yang sebelumnya.

JQuery UI download harus datang dengan 1.6.2 versi jQuery perpustakaan juga. Jika Anda menggunakan versi yang lebih terkini jQuery, Anda harus menggunakan itu sebagai gantinya. Ini adalah hanya versi minimum jQuery yang dibutuhkan oleh jQuery UI.

Ambil download ke folder publik proyek Anda. Download ini menunjukkan struktur untuk resource situs Anda:

Suggested file-structure for your site resourcesSuggested file-structure for your site resourcesSuggested file-structure for your site resources
Struktur file disarankan untuk resource situs Anda
  • folder js untuk file JavaScript (jQuery UI dan jQuery)
  • css folder untuk file CSS (jQuery UI tema CSS)

Merasa bebas untuk mengubah hal ini sesuai dengan kebutuhan Anda, meskipun dalam pengalaman saya, ini adalah cara yang bagus untuk mengatur resource situs Anda.

Setelah mengekstrak file Anda, membuat file index.html yang akan berisi HTML halaman kami. Isi dari HTML file harus sebagai berikut:


Langkah 2: Buat HTML untuk jendela Dialog kami

Sekarang, mari kita mulai dengan membuat HTML untuk jendela Dialog kami. Menurut Dialog dokumentasi halaman situs jQuery UI, kotak Dialog HTML hanyalah<div>. HTML apapun di dalam <div> menjadi isi dari kotak dialog. Mengetahui bahwa, membuat jendela kotak Dialog sederhana dan membukanya menggunakan jQuery UI.</div>

Salin kode berikut ke <body> file HTML:

Kemudian, memulai kotak Dialog dengan mengeksekusi JavaScript ini. Salin kode berikut di dalam<head>file HTML:

Setelah Anda me-refresh halaman, Anda harus melihat sesuatu seperti ini:

Hello World!Hello World!Hello World!

Halo dunia!

Inisialisasi kotak Dialog dapat dilakukan dengan hanya memanggil fungsi $(element_id).dialog()! Dan seperti yang Anda lihat, kami isi <div> akan dikonversi ke konten menjadi kotak dialog.</div>

Sekarang, membuat form sederhana untuk membuat kotak-kotak Dialog yang baru di dalam kotak Dialog. Menggantikan Hello world! kode dalam kotak Dialog kami awal dengan berikut:

Ketika Anda memperbarui halaman, seharusnya terlihat seperti ini:

Looks ugly :(Looks ugly :(Looks ugly :(

Kelihatannya jelek sekarang, tapi jangan khawatir, kami akan menambahkan beberapa penyesuaian untuk jendela Dialog untuk membuatnya terlihat lebih baik


Langkah 3: Menyesuaikan Windows Dialog kita melalui Dialog opsi dan CSS

Kotak Dialog kami saat ini tidak terlihat baik, tapi kami akan dapat menyesuaikan dengan menyediakan beberapa pilihan inisialisasi kode inisialisasi Dialog kami, dan tentu saja, beberapa CSS.

Mari kita ganti kode inisialisasi kami dengan berikut:

Mari kita juga menambahkan beberapa CSS di <head> HTML kami:

Much better!Much better!Much better!

Jauh lebih baik!

Mari kita memecah beberapa pilihan yang kita digunakan pada kode inisialisasi kami:

  • width - pilihan ini memungkinkan Anda mengatur lebar tertentu untuk kotak Dialog. Anda juga dapat mengatur untuk 'auto' untuk membiarkan jQuery UI mengatur lebar secara dinamis
  • height - tidak hampir sama dengan opsi width, tetapi melakukannya untuk height kotak Dialog bukan lebar

Ada lebih banyak pilihan untuk kotak Dialog, tetapi sebagian besar dari mereka menangani perilaku kotak Dialog. Kita akan pergi ke beberapa di langkah berikutnya dari tutorial.

Sekarang bahwa kita memiliki sebuah kotak Dialog yang tampak bagus dengan form di dalamnya, mari kita tambahkan beberapa Buttons ke kotak Dialog kami untuk membuatnya melakukan sesuatu!


Langkah 4: Menambahkan sebuah Button untuk membuka jendela Dialog kami

Salah satu hal besar mengenai jQuery UI adalah modularitas yang. Misalnya, kotak Dialog juga menggunakan komponen UI jQuery lain, seperti Draggable, Resizable, dan yang paling penting, komponen Button.

Button example from jQuery UI's documentation

Button contoh dari dokumentasi jQuery UI

Button komponen yang memungkinkan kita untuk membuat tombol dengan fungsi yang disesuaikan setelah mengklik. Dan pada saat yang sama, itu sesuai dengan tema kita diinstal dengan jQuery UI, sehingga mengubah tema juga akan mengubah tampilan tombol, sehingga menjaga desain yang seragam seluruh situs.

Sebagai permulaan, buat Button untuk membuka dan menutup kotak Dialog kami. Tambahkan <body> HTML:

Dan menginisialisasi dengan menambahkan ini ke fungsi $(document).ready():

Cool button broCool button broCool button bro

tombo keren bro

Karena kita melakukan hal-hal dengan tombol, mari kita mengubah kotak centang kami untuk tombol juga sehingga mereka akan terlihat lebih baik. jQuery UI Button komponen juga memungkinkan Anda menciptakan serangkaian kotak centang atau tombol radio ke Buttonset. Untuk melakukannya, hanya Salin kode kode berikut di blok JavaScript:

Sekarang, refresh halaman untuk melihat kotak centang cukup-keren baru:

Cool checkboxes broCool checkboxes broCool checkboxes bro

Sekarang bahwa kotak Dialog dan tombol dirender dengan baik, kita dapat mengubah perilaku mereka sehingga Button membuka dan menutup Dialog. Untuk melakukannya, memperbarui blok JavaScript sehingga ini akan terlihat seperti ini:

Mari kita pergi melalui kode baris demi baris:

  • Kami telah menambahkan fungsi click Button kami yang membuka kotak Dialog setiap kali kita klik di atasnya.
  • Selain itu, kami menggunakan $(dialog_id).dialog('isOpen') metode, yang mengembalikan true jika Dialog kami sudah terbuka, dan false jika tidak.
  • Jika Dialog ditutup, kami membuka jendela Dialog dengan memanggil metode $(dialog_id).dialog('open'), dan mengubah label Button "Close window" menggunakan metode $(button_id).button('option').
  • Jika sudah terbuka, kami melakukan sebaliknya menggunakan metode option yang sama pada Button dan metode $(dialog_id).dialog('close') untuk menutup kotak Dialog.
  • Kami juga telah mengambil keuntungan dari option Dialog yang lain, yang disebut autoOpen. Bila diatur ke true, hal ini memungkinkan jendela Dialog untuk membuka secara otomatis ketika diinisialisasi. Jika tidak, kemudian jendela Dialog hanya boleh dibuka dengan memanggil metode $(dialog_id).dialog('open'), yang merupakan apa tombol lakukan.
Functional buttons and checkboxes broFunctional buttons and checkboxes broFunctional buttons and checkboxes bro

Bro tombol dan kotak centang yang fungsional


Langkah 5: Menambahkan fungsionalitas ke jendela Dialog kami

Sekarang bahwa jendela Dialog sudah bangun dan berjalan, mari kita menambahkan fungsionalitas untuk itu untuk membuat jendela Dialog yang baru. Pertama, menambahkan beberapa tombol ke Dialog kami. Syukurlah, jQuery UI memiliki fungsi untuk menambahkan tombol ke setiap kotak Dialog dan menyesuaikan apa yang mereka lakukan ketika diklik. Untuk melakukannya, memodifikasi kode inisialisasi dengan menambahkan parameter buttons:

Seperti yang Anda lihat dari kode contoh, kami menambahkan tombol "Buat" dengan hanya menambahkan tombol pilihan untuk kode inisialisasi. Tombol pilihan adalah array JSON objek dalam format berikut:

Untuk menambahkan tombol, Anda hanya dapat menambahkan lebih JSON objek dalam format yang sama ke array buttons. Ketika Anda memperbarui halaman, seharusnya terlihat seperti:

Yay, clicked the button!Yay, clicked the button!Yay, clicked the button!

YAY, mengklik tombol!

Sekarang kami akan menambahkan beberapa fungsi button kami. Menghapus alert ('Yay, clicked the button!'); baris dan menggantinya dengan berikut:

Berikut adalah langkah-langkah kode kami hanya menambahkan di atas:

  • Pertama, mendapatkan jumlah jendela Dialog pada situs.
  • Dari ini, menghasilkan id unik baru yang akan digunakan untuk jendela Dialog yang baru.
  • Mendapatkan nilai window Content dan window Title dari bentuk "Create a new Dialog window" form.
  • Periksa apakah ALERT dan CLOSE kotak centang dicentang. Jika mereka, membuat sebuah objek JSON, mengikuti format button dari atas, dan mendorongnya ke dalam array buttons.
  • Menghasilkan dan menambahkan HTML jendela Dialog di dalam halaman yang<body>Tag
  • Terakhir, menginisialisasi jendela Dialog baru menggunakan kode inisialisasi seperti yang digunakan pada jendela Dialog yang asli.

Bermain-main dengan itu dan mencoba kombinasi yang berbeda untuk tombol. Berikut adalah screenshot dengan semua kemungkinan kombinasi:

Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Sekarang bahwa kita akan mampu membuat mutiple windows, mari kita tambahkan beberapa meminimalkan-memaksimalkan fungsi!


Langkah 6: Membuat jendela Dialog "Minimizable" dan "Maximizable"

Sayangnya, jQuery UI tidak memiliki built-in minimize dan maximize metode, tetapi kita dapat dengan mudah menambahkan dengan meng-override beberapa hal pada proses inisialisasi jQuery UI Dialog prototype. Pada dasarnya, kita akan menambahkan beberapa kode inisialisasi pasca yang akan secara otomatis membuat "minimized state", menambahkan minimize icon untuk jendela Dialog, serta menambahkan fungsi yang "maximize" jendela diminimalkan ketika minimized state diklik.

Mari kita mulai dengan menambahkan CSS untuk style button dan minimized state:

Kita juga perlu menambahkan sebuah "minimized state" wadah, dimana kami akan menambahkan semua jendela diminimalkan. tambahkanini dalam<body>Tag:

Sekarang, tambahkan codeblock JavaScript ini setelah tempat mana jQuery UI Perpustakaan dimuat. Hal ini penting karena tidak akan bekerja jika itu sebelum Perpustakaan di-load.

Berikut adalah kode ini yang dilakukan:

  • Biarkan original jQuery UI Dialog kode inisialisasi berjalan melalui _init.apply(this, arguments);
  • Append minimize icon ke kotak Dialog Title Bar
  • Append minimize state HTML dalam #dialog_window_minimized_container<div>
  • Menambahkan event hover minimize icon sehingga itu akan mendapatkan class ui-state-hover ketika mouse adalah hover di atas itu, yang akan menambah efek "mengubah warna latar belakang" yang kita lihat.
  • Membuat event klik untuk itu yang menutup jendela Dialog dan menunjukkan minimized state
  • Akhirnya, membuat event klik lainnya untuk minimized state yang menyembunyikan dirinya sendiri dan membuka kembali jendela Dialog

Dan sekarang, kami windows-seperti antarmuka lengkap!

windows-like interface, hurrah!windows-like interface, hurrah!windows-like interface, hurrah!

Windows-like antarmuka, hore!


Kesimpulan

Dalam artikel ini, kami telah menunjukkan betapa mudahnya untuk membuat indah dan sangat fungsional antarmuka pengguna menggunakan apa-apa tapi jQuery dan jQuery UI. Sekarang, Anda harus sudah tahu bagaimana:

  • Men-download dan men-setup jQuery UI perpustakaan untuk proyek Anda
  • Menggunakan jQuery UI komponen Dialog, Button, dan Buttonset.
  • Membuat kotak-kotak Dialog yang baik statis dan dinamis menggunakan informasi dari sumber
  • Secara dinamis membuat tombol Dialog Buttons yang berbeda dengan setiap kotak Dialog yang baru.
  • Menambahkan fungsionalitas kustom untuk jQuery UI Dialog misalnya minimize dan maximize fungsionalitas.
  • Menyesuaikan proses inisialisasi jQuery UI

Ini perlu mengambil catatan bahwa ada banyak komponen lain yang Anda dapat memanfaatkan melalui jQuery UI. Sudah pasti cara yang bagus untuk membangun antarmuka pengguna yang luar biasa dengan cepat dan mudah. Mudah-mudahan artikel ini telah terbukti Anda jQuery UI adalah tool penting dalam setiap developer toolkit.

Apakah Anda menggunakan jQuery UI di masa lalu atau berencana untuk menggunakannya untuk proyek nanti? Marilah kita tahu di komentar di bawah ini dan terima kasih banyak sudah membaca!


Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.