jQuery UI CSS ramy API
jQuery UI CSS framework
jQuery UI zawiera potężny ramy CSS, aby stworzyć własne widgety jQuery i design. Ramka zawiera wymaganych klas wspólny interfejs użytkownika, i może być stosowany konserwacji jQuery UI ThemeRoller. Poprzez tworzenie własnych komponentów UI jQuery UI CSS ram. Trzeba użyć konwencję Sharemark, aby podłączyć się do integracji kodu społeczności.
klasy ramowe
Są następujące style CSS są trwałe klasy według strukturalnego, czy też themable (kolory, czcionki, tła, itp), są określone w ui.core.css
i ui.theme.css
dwóch plików. Klasy te są przeznaczone dla elementów interfejsu użytkownika w celu zapewnienia spójności wizualnej w niniejszym zgłoszeniu przez jQuery UI ThemeRoller z elementów kategoryzacji.
układ Helper
-
.ui-helper-hidden
: elementy zastosowaniadisplay: none
. -
.ui-helper-hidden-accessible
: elementy aplikacji na dostęp do ukrytych (pozycjonowanie bezwzględne przez strony). -
.ui-helper-reset
: Podstawowe elementy stylu UI zresetować. Resetowanie elementów, takich jak:padding
,margin
,text-decoration
, list-style, i tak dalej. -
.ui-helper-clearfix
: zastosowanie elementu nadrzędnego właściwości opakowań typu float. -
.ui-helper-zfix
: dla<iframe>
Element stosować iframe "naprawić" CSS.
Widget kontenera
-
.ui-widget
: Klasa na zewnątrz pojemnika zastosować wszystkie wzory. Widżet wniosek o czcionkę i jej rozmiar, ale również na tej samej czcionki z elementami formularza wniosku oraz 1em rozmiaru czcionki, aby poradzić sobie z Windows rzędu przeglądarkę. -
.ui-widget-header
: tytuł aplikacji kontenera klasy. Elementu i tekstu swoich dzieci, linki, ikony Zastosuj Nagłówek stylu kontenera. -
.ui-widget-content
: Treść klasa aplikacji kontenerowych. Elementu i tekstu swoich dzieci, linki, ikony aplikacji stylu zawartości pojemnika. (Może być stosowany do tytułu elementu rodzica lub rodzeństwa)
stan Interactive
-
.ui-state-default
: Kliknij na przycisk elementu można zastosować klasę. Elementu i tekstu swoich dzieci, linki, ikony aplikacji "klikalne default" stylu kontenera. -
.ui-state-hover
: mysz zawieszone, gdy stosowane w klikalne elementu przycisku, gdy na klasy. Elementu i tekstu swoich dzieci, linki, ikony aplikacji "klikalne hover" stylu kontenera. -
.ui-state-focus
: Klasa Application gdy ostrość klawiatury w klikalne elementu przycisku. Elementu i tekstu swoich dzieci, linki, ikony aplikacji "klikalne hover" stylu kontenera. -
.ui-state-active
: Klasa Application gdy kliknięcie myszy może kliknąć na element przycisku. Elementu i tekstu swoich dzieci, linki, ikony aplikacji "klikalne aktywny" stylu kontenera.
Interaktywne zachęty Cue
-
.ui-state-highlight
: aby wyróżnić lub zaznaczyć aplikacje elementów klasy. Elementu i tekstu swoich dzieci, linki, ikony aplikacji "highlight" stylu kontenera. -
.ui-state-error
: komunikat o błędzie pojemnika aplikacje elementów klasy. Elementu i tekstu swoich dzieci, linki, ikony aplikacji "error" w stylu kontenera. -
.ui-state-error-text
: nie tylko w stosunku do koloru tła tekstu błąd aplikacji klasy. Może być wykorzystywane do tworzenia etykiet się ikona błędu ikona aplikacji sub-color. -
.ui-state-disabled
: wyłączyć elementy interfejsu zastosować słabe krycie. Oznacza to, że elementy już zdefiniowanego stylu, aby dodać dodatkowy styl. -
.ui-priority-primary
: Klasa pierwszych zastosowań przycisku priorytetem. Zastosowanie pogrubioną czcionką. -
.ui-priority-secondary
: Klasa zastosowań drugi przycisk priorytetem. Zastosowanie elementów tekstowych normalna waga zastosowania lekkiej przejrzystości.
ikona
Status i wizerunek
-
.ui-icon
: Podstawowa klasa elementu ikonę aplikacji. Ustaw rozmiar 16px kwadratów, ukryte wewnątrz tekstu ikonki statusu "content" ustawić obraz tła. Uwaga:.ui-icon
, klasa dostanie inny ikonki tła obrazu na podstawie jego kontenera nadrzędnego. Na przykład,ui-state-default
Pojemnikui-icon
Element wedługui-state-default
kolorystyka ikona kolor.
Ikona Rodzaj
W oświadczeniu .ui-icon
po klasie, a następnie można zadeklarować drugą prędkość rodzaju ikoną klasy. W normalnych warunkach, klasa ikona podąża składni .ui-icon-{icon type}-{icon sub description}-{direction}
.
Na przykład, ikona trójkąt skierowany na prawo, w sposób następujący: .ui-icon-triangle-1-e
jQuery UI w ThemeRoller w kolumnie podglądu zapewnia pełen zakres ikonę ramowej CSS. Najedź na ikonę, aby wyświetlić nazwę klasy.
Inne wizualizacje
promień asystent
-
.ui-corner-tl
: lewy górny róg promienia elementu aplikacji. -
.ui-corner-tr
: górny prawy róg promienia elementu aplikacji. -
.ui-corner-bl
: w lewym dolnym rogu promienia elementu aplikacji. -
.ui-corner-br
: dolny prawy róg promienia elementu aplikacji. -
.ui-corner-top
: lewy górny róg promienia elementu aplikacji. -
.ui-corner-bottom
: elementy lewym dolnym rogu aplikacji promieniem. -
.ui-corner-right
: ukośne elementy górnej i dolnej prawej promienia aplikacji. -
.ui-corner-left
: ukośne elementy górnej i dolnej lewej kości promieniowej aplikacji. -
.ui-corner-all
: wszystkie cztery rogi promieniu aplikacji elementu.
Okładka i Cienie
-
.ui-widget-overlay
: na pokrycie 100% szerokości i wysokości ekranu aplikacji i ustawić kolor tła / tekstury i przezroczystości ekranu. -
.ui-widget-shadow
: Klasa pokrycia aplikacji, ustawić przezroczystość, przesunięcie / Lewy offset, a Shadow "grubość". Grubość jest przez wszystkie strony biorące udział w ustawionych cień marginesów (dopełnienie) były stosowane. Przesunięcie poprzez ustawienie marginesu (margines) i lewego marginesu (margines) nałożono (może być dodatnia, to może być ujemna).