jQuery UI dan ThemeRoller

• April 19, 2024

Jika Anda ingin cara yang mudah dan cepat untuk merancang antarmuka pengguna untuk situs web atau aplikasi web dan juga menyertakan jQuery, periksa jQuery UI. Di sana Anda akan menemukan paket kombo turnkey CSS dan fungsi jQuery yang membuat menambahkan fitur-fitur ini ke proyek baru Anda dengan cepat.

Mari kita berjalan-jalan melalui situs. Di bawah tautan Demo dan Dokumen, Anda akan menemukan daftar plugin interaktif jQuery seperti seret dan lepas, tab, dan transisi. Untuk setiap plugin ada demo, dokumentasi, dan contoh kode cut-and-paste untuk pengujian.

Jika Anda ingin mengambil file turnkey, klik tautan Tema untuk jQuery ThemeRoller. Css default adalah tema tulang putih dan abu-abu. Anda dapat mengklik tombol unduh dan menggunakan apa adanya tetapi ada juga Galeri tema warna-warni untuk Anda mulai. Di area Galeri ada beberapa thumbnail tema. Cukup klik pada yang Anda sukai. Anda dapat mengunduh tema itu sebagaimana adanya dengan mengeklik tab Roll Your Own dan kemudian tombol Unduh Tema. Tapi kesenangan dimulai ketika Anda mulai tweet tema dengan mesin ThemeRoller. Ada 11 opsi yang bisa Anda sesuaikan. Sebagian besar opsi akan memungkinkan Anda untuk mengubah tekstur dan warna latar belakang, warna tepi dan warna teks dan ikon.

Anda memiliki beberapa opsi untuk tweeting tema.

• Pengaturan Font: Anda dapat mengubah keluarga font, berat dan ukuran.
  
  
• Radius Corner: Anda dapat mengubah radius sudut. Setiap tema memiliki gaya tab bundar default, tetapi di sini Anda dapat mengubah ukuran sudut atau mengaturnya menjadi nol untuk tab persegi. (Tab dibangun di atas CSS3, yang tidak didukung oleh IE saat ini.)
  
  
• Header / Bilah Alat: Anda dapat mengatur nilai warna untuk area di belakang tab dan area header seperti untuk plugin kalender.
  
  
• Konten: Di sini Anda dapat mengatur warna untuk area konten utama. Anda bisa mendapatkan desain yang sangat berbeda tergantung pilihan perbatasan atau tanpa batas.
  
  
• Status Default yang Dapat Diklik: Ini mengontrol tampilan tab dan tombol default (tidak aktif).
  
  
• Status Hover yang Dapat Diklik: Kontrol ini adalah untuk tampilan tab dan tombol dalam kondisi hover.
  
  
• Status Aktif yang Dapat Diklik: Mengontrol tampilan tab dan tombol untuk halaman aktif.
  
  
• Sorotan: Warna latar belakang, batas, teks dan ikon untuk area yang disorot.
  
  
• Kesalahan: Warna latar belakang, batas, teks, dan ikon untuk pesan kesalahan.
  
  
• Layar Modal untuk Overlay: Mengontrol warna dan tekstur latar belakang.
  
  
• Drop Shadows: Kontrol untuk opacity bayangan, ketebalan, offset dan sudut untuk efek drop shadow.
  
  

Ketika Anda mengunduh jquery-ui-x.x.xx.custom.zip dan meningkatkan paket, Anda akan melihat tiga folder (css, bundel pengembangan, dan js) dan file index.html. File index.html adalah demo untuk plugin yang ditata dengan tema Anda. Anda akan ingin meletakkan folder css dan js di direktori utama Anda dan menyalin / menempelkan kode dari file index.html ke dalam kode untuk situs Anda di lokasi di mana Anda ingin plugin muncul.

//jqueryui.com
//jqueryui.com/demos/
//jqueryui.com/themeroller/

Petunjuk Video: Widget Modifications in JQuery UI using Getter and Setter Methods (April 2024).