Tema UI jQuery


Semua pemalam UI jQuery membenarkan pembangun menyepadukan widget UI dengan lancar ke dalam rupa dan rasa tapak web atau aplikasi mereka. Setiap pemalam mentakrifkan gaya melalui CSS dan mengandungi dua lapisan maklumat gaya: gaya rangka kerja CSS UI jQuery standard dan gaya pemalam tertentu.

Rangka kerja CSS UI jQuery menyediakan kelas untuk perwakilan semantik, digunakan untuk menunjukkan peranan elemen dalam widget, seperti tajuk, kandungan atau kawasan boleh klik. Ini adalah konsisten merentas semua widget, tab boleh klik, akordion atau butang mempunyai kelas ui-state-default yang sama untuk menunjukkan bahawa ia boleh diklik. Apabila pengguna menuding tetikus pada elemen ini, kelas ini menjadi ui-state-hover dan apabila elemen ini dipilih, ia menjadi ui-state-active. Konsistensi kelas ini menjadikan elemen dengan peranan atau keadaan interaksi yang serupa kelihatan konsisten merentas semua widget.

Gaya bingkai CSS dikapsulkan dalam fail berasingan bernama ui.theme.css. Fail ini diubah suai melalui aplikasi ThemeRoller. Gaya bingkai hanya mengandungi sifat yang mempengaruhi rupa dan rasa, asalkan ia adalah warna, imej latar belakang, ikon, dsb. Jadi ini adalah gaya "selamat" dan tidak akan menjejaskan kefungsian pemalam. Pemisahan ini bermakna pembangun boleh mencipta rupa dan rasa tersuai dengan mengubah suai warna dan imej dalam fail theme.css. Memandangkan pemalam atau pembetulan pepijat akan datang akan tersedia, ini akan berfungsi dengan tema tanpa pengubahsuaian.

Memandangkan gaya bingkai hanya meliputi rupa dan rasa, helaian gaya pemalam tertentu perlu disertakan dengan semua peraturan gaya struktur tambahan yang menjadikan widget berfungsi, seperti saiz, kandungan, dll. Jidar, jidar, kedudukan, terapung. Helaian gaya setiap pemalam terletak dalam folder themes/base dan dinamakan mengikut pemalam, seperti "jquery.ui.accordion.css". Gaya ini mesti diedit dengan berhati-hati kerana ia, bersama-sama dengan skrip, memberikan penggantian gaya bingkai.

Kami menggalakkan semua pembangun membuat pemalam jQuery Rangka kerja CSS UI jQuery memudahkan pengguna akhir untuk menyesuaikan tema dan menggunakan pemalam.

Tema

Disenaraikan di bawah adalah tiga kaedah umum penetapan pemalam UI jQuery:

  • Muat turun tema ThemeRoller : Yang terawal cara untuk mencipta tema ialah menggunakan ThemeRoller untuk menjana dan memuat turun tema. Aplikasi ini akan mencipta fail ui.theme.css baharu dan folder images yang mengandungi semua imej latar belakang dan sprite ikon yang diperlukan. Pendekatan ini ialah cara tertua untuk mencipta dan mengekalkan tema, tetapi ia mengehadkan penyesuaian kepada pilihan yang tersedia dalam ThemeRoller.

  • Ubah suai fail CSS: Untuk kawalan lanjut ke atas rupa dan rasa, anda boleh memilih untuk bermula dengan tema lalai (Smoothness), atau mulakan dengan tema yang dijana oleh ThemeRoller , dan kemudian laraskan fail ui.theme.css, atau helaian gaya mana-mana pemalam bebas. Sebagai contoh, anda boleh melaraskan jejari penjuru semua butang dengan mudah kepada nilai yang berbeza daripada komponen UI lain, atau menukar laluan untuk sprite ikon menggunakan tetapan tersuai. Dengan sedikit skop gaya, anda juga boleh menggunakan berbilang tema secara serentak dalam satu UI. Untuk memudahkan penyelenggaraan, disyorkan untuk menukar ui.theme.css fail dan imej sahaja.

  • Tulis semula CSS tersuai: Untuk kawalan maksimum ke atas rupa dan rasa, anda boleh bermula dari awal dan menulis setiap CSS pemalam tanpa menggunakan kelas rangka kerja Atau helaian gaya pemalam tertentu . Pendekatan ini boleh digunakan jika rupa dan rasa yang diingini tidak dapat dicapai dengan mengubah suai CSS atau menggunakan penanda yang sangat disesuaikan. Pendekatan ini memerlukan kepakaran mendalam dalam CSS dan memerlukan pengemaskinian manual pemalam masa hadapan.

Gunakan ThemeRoller, rangka kerja CSS UI jQuery dan reka tema tersuai

  • JQuery UI ThemeRoller

  • API Rangka Kerja CSS UI jQuery

  • Tema Reka Bentuk