Latest web development tutorials

jQuery UI CSS framework API

framework jQuery UI CSS

jQuery UI mencakup kerangka CSS kuat, dalam rangka menciptakan kustom jQuery widget dan desain. Bingkai berisi kelas antarmuka pengguna umum yang diperlukan, dan dapat digunakan pemeliharaan jQuery UI ThemeRoller. Dengan membuat komponen UI Anda sendiri menggunakan framework jQuery UI CSS. Anda perlu menggunakan Sharemark Konvensi, dalam rangka untuk plug-in integrasi kode masyarakat.

kelas kerangka

Adalah gaya kelas CSS berikut adalah tetap sesuai dengan terstruktur, atau apakah itu berganti tema (warna, font, latar belakang, dll), didefinisikan dalam ui.core.css dan ui.theme.css dua file. Kelas ini dirancang untuk elemen antarmuka pengguna untuk mencapai konsistensi visual di seluruh aplikasi, dengan jQuery UI ThemeRoller komponen theming.

Helper tata letak

  • .ui-helper-hidden : elemen dari aplikasi display: none .
  • .ui-helper-hidden-accessible : elemen dari aplikasi untuk mengakses tersembunyi (absolute positioning oleh halaman) tersebut.
  • .ui-helper-reset : Unsur-unsur gaya UI dasar ulang. Ulang unsur-unsur seperti: padding , margin , text-decoration , Daftar-gaya, dan sebagainya.
  • .ui-helper-clearfix : penerapan induk elemen sifat mengambang kemasan.
  • .ui-helper-zfix : untuk <iframe> elemen berlaku iframe "memperbaiki" CSS.

kontainer widget

  • .ui-widget : Kelas di luar wadah untuk menerapkan semua widget. aplikasi widget untuk ukuran font dan font, tetapi juga pada font yang sama dari elemen formulir aplikasi dan ukuran font 1em untuk mengatasi dengan Windows Browser suksesi.
  • .ui-widget-header : Judul Kelas aplikasi kontainer. Dari elemen dan teks anak-anaknya, link, ikon menerapkan menuju kontainer gaya.
  • .ui-widget-content : isi Kelas aplikasi kontainer. Dari elemen dan teks anak-anaknya, link, ikon konten aplikasi gaya kontainer. (Dapat diterapkan untuk judul elemen induk atau saudara kandung)

negara interaktif

  • .ui-state-default : Klik pada elemen tombol dapat diterapkan Class. Dari elemen dan teks anak-anaknya, link, ikon aplikasi "default diklik" gaya kontainer.
  • .ui-state-hover : tikus ditangguhkan bila diterapkan dalam elemen tombol diklik ketika di kelas. Dari elemen dan teks anak-anaknya, link, ikon aplikasi "diklik melayang-layang" wadah gaya.
  • .ui-state-focus : Aplikasi Kelas ketika fokus keyboard dalam elemen tombol diklik. Dari elemen dan teks anak-anaknya, link, ikon aplikasi "diklik melayang-layang" wadah gaya.
  • .ui-state-active : Aplikasi Kelas ketika klik mouse dapat mengklik elemen tombol. Dari elemen dan teks anak-anaknya, link, ikon aplikasi "diklik aktif" wadah gaya.

Isyarat prompt interaktif

  • .ui-state-highlight : untuk menyorot atau pilih aplikasi Kelas elemen. Dari elemen dan teks anak-anaknya, link, ikon aplikasi "sorot" wadah gaya.
  • .ui-state-error : error message wadah aplikasi elemen Class. Dari elemen dan teks anak-anaknya, link, ikon aplikasi "kesalahan" wadah gaya.
  • .ui-state-error-text : tidak hanya terhadap warna latar belakang Kelas teks kesalahan aplikasi. Hal ini dapat digunakan untuk membentuk label untuk menjadi sub-warna ikon ikon aplikasi error.
  • .ui-state-disabled : untuk menonaktifkan elemen UI menerapkan opacity redup. Ini berarti bahwa unsur-unsur dari gaya yang sudah ditetapkan untuk menambah gaya ekstra.
  • .ui-priority-primary : Kelas aplikasi tombol prioritas pertama. Aplikasi teks tebal.
  • .ui-priority-secondary : Kelas aplikasi tombol prioritas kedua. Penerapan elemen teks berat badan normal berlaku sedikit transparansi.

icon

Status dan gambar

  • .ui-icon : Dasar Kelas ikon unsur aplikasi. Mengatur ukuran 16px kotak, tersembunyi di dalam teks "isi" status sprite mengatur gambar latar belakang. Catatan: .ui-icon , kelas akan mendapatkan sprite gambar latar belakang yang berbeda berdasarkan pada wadah induknya. Misalnya, ui-state-default kontainer ui-icon elemen menurut ui-state-default icon mewarnai warna.

icon Type

Dalam pernyataan .ui-icon setelah kelas, maka Anda dapat mendeklarasikan kecepatan kedua jenis ikon kelas. Dalam keadaan normal, kelas icon berikut sintaks .ui-icon-{icon type}-{icon sub description}-{direction} .

Misalnya, ikon segitiga yang menunjuk ke kanan, sebagai berikut: .ui-icon-triangle-1-e

jQuery UI ThemeRoller dalam kolom pratinjau yang menyediakan berbagai icon kerangka CSS. Arahkan kursor ke ikon untuk melihat nama kelas.

visual lainnya

radius asisten

  • .ui-corner-tl : pojok kiri radius aplikasi elemen.
  • .ui-corner-tr : sudut kanan atas dari radius aplikasi elemen.
  • .ui-corner-bl : sudut kiri bawah radius aplikasi elemen.
  • .ui-corner-br : sudut kanan bawah radius aplikasi elemen.
  • .ui-corner-top : sudut kiri atas radius aplikasi elemen.
  • .ui-corner-bottom : elemen sudut kiri bawah radius aplikasi.
  • .ui-corner-right : elemen diagonal dari kanan atas dan bawah dari jari-jari aplikasi.
  • .ui-corner-left : elemen diagonal dari kiri atas dan bawah dari jari-jari aplikasi.
  • .ui-corner-all : keempat sudut radius penerapan elemen.

Penutup & Bayangan

  • .ui-widget-overlay : untuk menutupi 100% dari lebar layar dan tinggi aplikasi, dan mengatur warna latar belakang / tekstur dan opacity layar.
  • .ui-widget-shadow : Kelas cakupan aplikasi, mengatur opacity, yang Offset / Kiri Offset, dan Shadow "ketebalan." ketebalan oleh semua pihak dalam margin bayangan set (padding) yang diterapkan. Diimbangi dengan pengaturan margin (margin) dan kiri margin (margin) yang diterapkan (bisa positif, bisa negatif).