jQuery klasy CSS
jQuery komórkowy używać CSS, projektować różne elementy.
Na liście referencyjnej poniżej, mamy włączone klas CSS dla typowych stylów.
Globalne Klasy
Zajęcia te mogą być dodawane na dowolnym widgetów jQuery Mobile ( buttons, toolbars, panels, tables, lists , itp ..):
| Klasa | Opis |
|---|---|
| ui-corner-all | Dodaje zaokrąglonymi narożnikami do elementu |
| ui-shadow | Dodaje cień do elementu |
| ui-overlay-shadow | Dodaje cień nakładki do elementu |
| ui-mini | Sprawia, że element mniejsze |
Klasy przycisków
Oprócz globalnych klas, można dodać następujące klasy do <a> lub <button> elementów ( <input> przyciski):
| Klasa | Opis |
|---|---|
| ui-btn | Musi zostać dodany do <a> elementy, jeśli chcesz, żeby być stylizowany jak guziki |
| ui-btn-inline | Wyświetla przycisk inline |
| ui-btn-icon-top | Pozycje ikonę nad tekstem przycisk |
| ui-btn-icon-right | Pozycje ikonę po prawej stronie tekstu przycisku |
| ui-btn-icon-bottom | Pozycje ikonę poniżej tekstu przycisku |
| ui-btn-icon-left | Pozycje ikonę po lewej stronie tekstu przycisku |
| ui-btn-icon-notext | Wyświetla tylko ikony |
| ui-btn-a|b | Określa kolor przycisku. "a" jest domyślnym (szare tło z czarnym tekstem), a "b" zmieni kolor na czarnym tle z białym tekstem |
Ikona Klasy
Wszystkie dostępne klasy ikona <a> i <button> elementów (patrz Reference Ikony dla jak używać ikon na inne elementy):
| Klasa | Ikona Opis | Ikona |
|---|---|---|
| ui-icon-action | Akcja (strzałka w prawo wyładowania łukowego z pudełka) | |
| ui-icon-alert | Wykrzyknik wewnątrz trójkąta | |
| ui-icon-audio | Dźwięk / Głośniki | |
| ui-icon-arrow-d-l | Dół, Lewo strzałką | |
| ui-icon-arrow-d-r | W dół, strzałka w prawo | |
| ui-icon-arrow-u-l | W lewo, Strzałka w górę | |
| ui-icon-arrow-u-r | Strzałkę, aż | |
| ui-icon-arrow-l | Strzałka w lewo | |
| ui-icon-arrow-r | Prawa strzałka | |
| ui-icon-arrow-u | Strzałka w górę | |
| ui-icon-arrow-d | Strzałka w dół | |
| ui-icon-back | Powrót (strzałka iskrzenie lewo w górę) | |
| ui-icon-bars | Trzy poziome paski na siebie | |
| ui-icon-bullets | Trzy poziome kule nad sobą | |
| ui-icon-calendar | Kalendarz | |
| ui-icon-camera | Aparat fotograficzny | |
| ui-icon-carat-d | dół karatowego | |
| ui-icon-carat-l | Lewy karatowego | |
| ui-icon-carat-r | Prawo karatowego | |
| ui-icon-carat-u | up karat | |
| ui-icon-check | Wyboru | |
| ui-icon-clock | Zegar | |
| ui-icon-cloud | Chmura | |
| ui-icon-comment | Komentarz / Komunikat | |
| ui-icon-delete | Kasować | |
| ui-icon-edit | Edycja / ołówek | |
| ui-icon-eye | Oko | |
| ui-icon-forbidden | Zakazane znak | |
| ui-icon-forward | Forward - (strzałka w prawo, w górę) opalne | |
| ui-icon-gear | Koło zębate | |
| ui-icon-grid | Krata | |
| ui-icon-heart | Serca / symbol miłości | |
| ui-icon-home | Dom rodzinny mieszkanie | |
| ui-icon-info | Informacja | |
| ui-icon-location | Lokalizacja | |
| ui-icon-lock | Blokowanie / Kłódka | |
| ui-icon-mail | Mail / Letter | |
| ui-icon-minus | znak minus | |
| ui-icon-navigation | Nawigacja | |
| ui-icon-phone | Telefon | |
| ui-icon-power | Zasilania (on / off) | |
| ui-icon-plus | Znak plus | |
| ui-icon-recycle | Kosz znak | |
| ui-icon-refresh | Odśwież - Circular strzałka | |
| ui-icon-search | Szukaj / Lupa | |
| ui-icon-shop | Sklep / Torba | |
| ui-icon-star | Gwiazda | |
| ui-icon-tag | Etykietka | |
| ui-icon-user | Użytkownik / osoba | |
| ui-icon-video | Video / kamery |
Zajęcia tematyczne
jQuery Mobile oferuje dwie klasy tematycznych: a (szary) i B (czarny). Jednakże, można również tworzyć własne, niestandardowe wartości klasy - przez całą drogę aż do litery "z" (patrz rozdział motywy). Poniższa tabela zawiera listę dostępnych klas tematycznych. Litery (az) oznacza, że można podać literę od A do Z. Na przykład: ui-bar-a lub ui-bar-b , etc.
| Klasa | Opis |
|---|---|
| ui-bar-(a-z) | Określa kolor paska - nagłówki, stopki i inne bary |
| ui-body-(a-z) | Określa kolor dla zawartości bloku - strona tafli treści (przestarzałe w wersji 1.4.0), pkt ListView, pop-upy, collapsibles, Ładowarka, suwaki, i panele |
| ui-btn-(a-z) | Określa kolor dla przycisku (i ikony) |
| ui-group-theme-(a-z) | Określa kolor controlgroups, listviews i składany zestawów |
| ui-overlay-(a-z) | Określa kolor tła strony, że okno dialogowe, w górnej części pojawia się okienko i inne pojemniki strona |
| ui-page-theme-(a-z) | Określa kolor dla stron |
Klasy siatki
Kolumny w siatce mają jednakową szerokość (do 100% szerokości w sumie), bez obramowania, tła, margines lub dopełnienie. Istnieje pięć siatek układ, który może być używany:
| Siatka Klasa | kolumny | szerokości kolumn | Koresponduje z | Przykład |
|---|---|---|---|---|
| ui-grid-solo | 1 | 100% | ui-block-a | Try it |
| ui-grid-a | 2 | 50% / 50% | ui-block-a|b | Try it |
| ui-grid-b | 3 | 33% / 33% / 33% | ui-block-a|b|c | Try it |
| ui-grid-c | 4 | 25% / 25% / 25% / 25% | ui-block-a|b|c|d | Try it |
| ui-grid-d | 5 | 20% / 20% / 20% / 20% / 20% | ui-block-a|b|c|d|e | Try it |
Aby uzyskać więcej informacji na temat sieci, przeczytaj naszą jQuery Telefony Siatki rozdział .