API Rangka Kerja CSS UI jQuery


Rangka Kerja CSS UI jQuery

UI jQuery termasuk rangka kerja CSS berkuasa yang direka untuk mencipta widget jQuery tersuai. Rangka kerja mengandungi kelas yang diperlukan untuk antara muka pengguna biasa dan boleh dikekalkan menggunakan jQuery UI ThemeRoller. Cipta komponen UI anda sendiri dengan menggunakan rangka kerja CSS UI jQuery. Anda perlu mengguna pakai konvensyen markup dikongsi untuk memudahkan penyepaduan kod dalam komuniti pemalam.

Kelas rangka kerja

Kelas CSS berikut ditakrifkan dalam ui.core.css mengikut sama ada gaya itu tetap dan berstruktur, atau sama ada ia boleh bertema (warna, fon, latar belakang, dll.) dan ui.theme.css dalam kedua-dua fail. Kelas ini direka bentuk untuk digunakan dengan elemen antara muka pengguna untuk mencapai konsistensi visual sepanjang aplikasi, dan komponen boleh bertemakan melalui jQuery UI ThemeRoller.

Pembantu Reka Letak

  • .ui-helper-hidden: Gunakan display: none pada elemen.

  • .ui-helper-hidden-accessible: Menggunakan penyembunyian akses (melalui kedudukan mutlak halaman) pada elemen.

  • .ui-helper-reset: Tetapan semula gaya asas untuk elemen UI. Tetapkan semula elemen seperti: padding, margin, text-decoration, gaya senarai, dsb.

  • .ui-helper-clearfix: Menggunakan atribut pembalut terapung pada elemen induk.

  • .ui-helper-zfix: Gunakan CSS "fix" iframe pada elemen <iframe>.

Bekas Widget

  • .ui-widget: Kelas digunakan pada bekas luar semua widget. Gunakan fon dan saiz fon pada widget, tetapi gunakan juga fon dan saiz fon 1em yang sama pada elemen bentuk sendiri untuk mengambil kira isu pewarisan dalam penyemak imbas Windows.

  • .ui-widget-header: Kelas digunakan pada bekas tajuk. Menggunakan gaya bekas tajuk pada teks, pautan dan ikon elemen serta elemen anaknya.

  • .ui-widget-content: Kelas digunakan pada bekas kandungan. Gunakan gaya kontena pada teks, pautan dan ikon elemen serta elemen anaknya. (Boleh digunakan pada elemen induk atau unsur adik beradik bagi tajuk)

Keadaan interaksi

  • .ui-state-default: digunakan pada elemen butang boleh klik Kelas . Gunakan gaya bekas "lalai boleh klik" pada teks, pautan dan ikon elemen serta elemen anaknya.

  • .ui-state-hover: Kelas digunakan apabila tetikus melayang di atas elemen butang boleh klik. Gunakan gaya bekas "tuding boleh klik" pada teks, pautan dan ikon elemen serta elemen anaknya.

  • .ui-state-focus: Kelas digunakan apabila fokus papan kekunci berada pada elemen butang boleh klik. Gunakan gaya bekas "tuding boleh klik" pada teks, pautan dan ikon elemen serta elemen anaknya.

  • .ui-state-active: Kelas digunakan apabila tetikus mengklik pada elemen butang boleh klik. Gunakan gaya bekas "aktif boleh klik" pada teks, pautan dan ikon elemen serta elemen anaknya.

Isyarat gesaan interaktif

  • .ui-state-highlight: Kelas digunakan pada elemen yang diserlahkan atau dipilih. Gunakan gaya bekas "serlahkan" pada teks, pautan dan ikon elemen serta elemen anaknya.

  • .ui-state-error: Kelas digunakan pada elemen bekas mesej ralat. Menggunakan gaya bekas "ralat" pada teks, pautan dan ikon elemen serta elemen anaknya.

  • .ui-state-error-text: Kelas digunakan pada warna teks ralat tanpa latar belakang sahaja. Boleh digunakan untuk label borang, dan juga boleh menggunakan warna ikon ralat pada sub-ikon.

  • .ui-state-disabled: Menggunakan kelegapan malap pada elemen UI yang dilumpuhkan. Bermaksud menambah gaya tambahan pada elemen gaya yang telah ditetapkan.

  • .ui-priority-primary: Kelas digunakan pada butang keutamaan pertama. Gunakan teks tebal.

  • .ui-priority-secondary: Kelas digunakan pada butang keutamaan kedua. Gunakan teks berat biasa dan ketelusan sedikit pada elemen.

Ikon

Keadaan dan Imej

  • .ui-icon: Kelas Asas digunakan pada elemen ikon. Tetapkan saiz kepada segi empat sama 16px, sembunyikan teks dalam dan tetapkan imej latar belakang untuk imej sprite dalam keadaan "kandungan". Nota: .ui-icon kelas akan mendapat imej latar belakang sprite yang berbeza berdasarkan bekas induknya. Contohnya, elemen ui-state-default di dalam bekas ui-icon akan diwarnakan berdasarkan warna ikon ui-state-default.

Jenis ikon

Selepas mengisytiharkan kelas .ui-icon, anda kemudian boleh mengisytiharkan kelas jenis ikon kelajuan kedua. Biasanya, kelas ikon mengikut sintaks .ui-icon-{icon type}-{icon sub description}-{direction}.

Sebagai contoh, ikon segi tiga yang menghala ke kanan, seperti ini: .ui-icon-triangle-1-e

JQuery UI ThemeRoller menawarkan set penuh ikon bingkai CSS. Tuding tetikus anda pada ikon untuk melihat nama kelas.

Kesan Visual Lain

Penolong Jejari Sudut

  • .ui-corner-tl: Menggunakan jejari sudut pada sudut kiri atas sesuatu elemen.

  • .ui-corner-tr: Gunakan jejari sudut pada sudut kanan atas elemen.

  • .ui-corner-bl: Gunakan jejari sudut pada sudut kiri bawah elemen.

  • .ui-corner-br: Gunakan jejari sudut pada sudut kanan bawah elemen.

  • .ui-corner-top: Gunakan jejari penjuru pada penjuru kiri dan kanan elemen.

  • .ui-corner-bottom: Gunakan jejari penjuru pada penjuru kiri dan kanan elemen.

  • .ui-corner-right: Gunakan jejari fillet pada penjuru atas dan bawah di sebelah kanan elemen.

  • .ui-corner-left: Gunakan jejari fillet pada penjuru atas dan bawah di sebelah kiri elemen.

  • .ui-corner-all: Gunakan jejari sudut pada keempat-empat penjuru elemen.

Tindan & Bayang

  • .ui-widget-overlay: Menggunakan 100% lebar dan tinggi pada skrin tindanan, sambil menetapkan warna/tekstur latar belakang dan skrin bukan ketelusan.

  • .ui-widget-shadow: Untuk Kelas yang digunakan pada tindanan, tetapkan kelegapan, offset atas/kiri dan "ketebalan" bayang. Ketebalan digunakan dengan menetapkan padding pada semua sisi bayang-bayang. Offset digunakan dengan menetapkan margin atas dan margin kiri (boleh menjadi nombor positif atau negatif).