Video: Membuat Menu Bisa di Drag Dengan jQuery 2024
Menulis kode jQuery UI tidaklah sulit, namun mendapatkan bagian kanan perpustakaan bisa sedikit membingungkan bagi programmer HTML5 dan CSS3. Perpustakaan jQuery UI jauh lebih besar daripada paket jQuery standar, jadi Anda mungkin tidak ingin menyertakan keseluruhannya jika Anda tidak memerlukannya.
Versi jQuery UI sebelumnya memungkinkan Anda untuk mendownload keseluruhan paket namun menyimpan masing-masing dari berbagai elemen dalam file JavaScript terpisah. Sudah lazim untuk memiliki setengah lusin tag skrip yang berbeda yang aktif hanya untuk mendapatkan berbagai elemen di tempat.
Lebih buruk lagi, ada beberapa masalah ketergantungan, jadi Anda perlu memastikan bahwa Anda telah menginstal paket tertentu sebelum menggunakan paket lain. Ini membuat perpustakaan sederhana cukup kompleks untuk benar-benar digunakan.
Untungnya, versi terbaru dari jQuery UI membuat proses ini sedikit lebih sederhana:
-
Pilih (atau buat) tema Anda.
Gunakan situs themeRoller untuk memilih tempat mulai dari perpustakaan template. Anda kemudian dapat menyesuaikan tema Anda dengan tepat untuk membuat apapun yang Anda inginkan (mengubah warna, font, dan elemen lainnya).
-
Download tema
ThemeRoller memiliki tombol download. Klik ini saat Anda siap mendownload tema Anda.
-
Pilih elemen yang Anda inginkan.
Saat pertama kali memulai sebuah proyek, Anda mungkin akan memilih semua elemen. Jika Anda mendapati bahwa halaman tersebut memuat terlalu lambat, Anda bisa membuat versi yang lebih kecil yang hanya berisi elemen yang Anda butuhkan. Untuk saat ini, pilih semuanya.
-
Download file
Setelah memilih elemen yang Anda inginkan, Anda dapat mendownloadnya dalam file zip.
-
Instal isi file zip ke direktori kerja Anda.
File zip berisi sejumlah file dan direktori. Salin css dan js direktori ke direktori di mana halaman web Anda akan (sering direktori public_html atau htdocs). Anda tidak perlu menyalin direktori pengembangan-bundel atau indeks. halaman html
-
Jika Anda menginstal beberapa tema, salin hanya informasi tema dari tema tambahan.
Semua tema menggunakan JavaScript yang sama. Hanya file CSS (dan file gambar terkait) yang berubah. Jika Anda ingin memiliki beberapa tema dalam proyek Anda, cukup salin isi CSS. Setiap tema akan menjadi subdirektori berbeda dari direktori CSS utama.
-
Tautkan ke file CSS.
Gunakan teknik tautan standar untuk menautkan ke file CSS yang dibuat oleh jQuery UI. Anda juga dapat menautkan ke file CSS Anda sendiri atau menggunakan CSS internal selain CSS khusus. Pastikan bahwa Anda mendapatkan jalan yang benar.
-
Tautkan ke file JavaScript.
Toolkit jQuery UI juga menginstal dua file JavaScript: jQuery standar dan perpustakaan UI jQuery. Secara default, kedua file ini terinstal di direktori js. Anda harus menautkan ke kedua file tersebut. Terkadang Anda akan melihat file yang diminimalkan di samping versi biasa. Versi yang diminimalkan akan memiliki istilah min embedded. Versi keduanya baik-baik saja, tapi versi yang diminimalkan akan dimuat lebih cepat.
Jika ada sesuatu yang tidak beres, periksa lagi jalur file Anda. Hampir selalu, masalah muncul karena Anda belum terhubung dengan semua file yang tepat. Juga, perhatikan bahwa file CSS yang dibuat oleh jQuery UI juga menyertakan gambar. Pastikan tema Anda memiliki direktori gambar terkait, atau proyek Anda mungkin tidak bekerja dengan benar. Jika Anda menyalin keseluruhan direktori CSS dan JS dari unduhan, sebaiknya Anda baik-baik saja.
