Latest web development tutorials

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 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.

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 Pojemnik ui-icon Element według ui-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).