Najlepszy samouczek jQuery UI CSS ramy API W 2024 r. W tym samouczku możesz dowiedzieć się jQuery UI CSS ramy API
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.
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.
.ui-helper-hidden
: elementy zastosowania display: 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. .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) .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. .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. .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
Pojemnik ui-icon
Element według ui-state-default
kolorystyka ikona kolor. 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.
.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. .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).