Motywy jQuery Telefony
jQuery Mobile oferuje dwa różne tematy w stylu "a" i "b" - każdy z różnych kolorów dla przycisków, barów, bloków treści, i tak dalej.
Aby dostosować wygląd aplikacji, należy użyć data-theme atrybut i przypisać atrybut z listu:
<div data-role="page" data-theme="a|b" >
| Wartość | Opis | Przykład |
|---|---|---|
| a | Czarny tekst na jasnoszarym tle do zawartości strony Czarny tekst na szarym tłem dla nagłówków i stopek Czarny tekst na jasnoszarym tle na guziki Biały tekst na niebieskim tle dla aktywnych przycisków Niebieski tekst na linki Jasnoszary tekstu (zastępczy) lub czarny tekst (wartość) na białym tle do pól wejściowych | Spróbuj |
| b | Biały tekst na ciemnym szarym tłem dla treści strony Biały tekst na ciemnym szarym tłem dla nagłówków i stopek Biały tekst na tle węglowym do przycisków Biały tekst na "cyan" niebieskim tłem dla aktywnych przycisków "Cyan" niebieski tekst na linki Tekst Szary (zastępczy) lub biały tekst (wartość) na czarnym tle dla pól wejściowych | Spróbuj |
Do przycisków z class="ui-btn" , użyj "ui-btn-a|b" klasy projektować przycisk albo szare (domyślnie) lub czarny:
<a href="#" class="ui-btn ui-btn-a|b" >Button</a>
"a" tematem jest używany do większości elementów oraz elementy potomne często dziedziczy temat jego rodzica (lub strony).
Skórki Nagłówek i stopka
Przykład
<div data-role="header" data-theme="b"></div>
<div data-role="footer"
data-theme="b"></div>
Spróbuj sam " Skórki Nagłówek i stopka w oknach dialogowych
Przykład
<div data-role="page" data-dialog="true" id="pagetwo">
<div
data-role="header" data-theme="b"></div>
<div
data-role="footer" data-theme="b"></div>
</div> Spróbuj sam " Skórki Przyciski
Skórki Ikony
Przykład
<a href="#" class="ui-btn ui-btn-b ui-icon-search
ui-btn-icon-notext">Search</a>
Spróbuj sam " Skórki pop-upy
Skórki Przyciski w nagłówku i stopce
Przykład
<div data-role="header">
<a href="#" class="ui-btn
ui-btn-b">Home</a>
<h1>Welcome To My Homepage</h1>
<a href="#" class="ui-btn">Search/a>
</div>
<div data-role="footer">
<a href="#" class="ui-btn ui-btn-b">Add Me On Facebook</a>
<a href="#" class="ui-btn">Add Me On Twitter</a>
<a href="#"
class="ui-btn ui-btn-b">Add Me On Instagram</a>
</div>
Spróbuj sam " Bary Skórki nawigacyjne
Przykład
<div data-role="footer" data-theme="b">
<h1>Insert Footer Text
Here</h1>
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="home" data-theme="a">Button 1</a></li>
<li><a href="#" data-icon="arrow-r">Button 2</a></li>
<li><a href="#" data-icon="arrow-r">Button 3</a></li>
<li><a href="#" data-icon="search" data-theme="a">Button 4</a></li>
</ul>
</div>
</div> Spróbuj sam " Panele Skórki
Skórki Składane przycisk i zawartość
Przykład
<div data-role="collapsible" data-theme="b" data-content-theme="b">
<h1>Click me - I'm collapsible!</h1>
<p>I'm the expanded
content.</p>
</div> Spróbuj sam " Listy Skórki
Przykład
<ul data-role="listview" data-theme="b">
<li><a href="#">List
Item</a></li>
<li><a href="#">List
Item</a></li>
<li data-theme="a"><a href="#">List
Item</a></li>
<li><a href="#">List Item</a></li>
</ul> Spróbuj sam " Skórki dzielona Przyciski
Skórki składane list
Przykład
<div data-role="collapsible" data-theme="b"
data-content-theme="b">
<ul data-role="listview">
<li><a href="#">Agnes</a></li>
</ul>
</div> Spróbuj sam " Formy Skórki
Przykład
<label for="name">Full Name:</label>
<input type="text" name="text"
id="name" data-theme="b">
<label for="colors">Choose Favorite
Color:</label>
<select id="colors"
name="colors" data-theme="b">
<option value="red">Red</option>
<option value="green">Green</option>
<option
value="blue">Blue</option>
</select> Spróbuj sam " Skórki składane formularze
Przykład
<fieldset data-role="collapsible" data-theme="b" data-content-theme="b">
<legend>Click me - I'm collapsible!</legend> Spróbuj sam " Dodaj nowe motywy
jQuery Mobile umożliwia również dodawanie nowych tematów do swoich mobilnych stron.
Dodawanie lub edytowanie nowych tematów poprzez edycję pliku CSS (jeśli trzeba pobrać jQuery Mobile). Wystarczy skopiować blok stylów i zmienić nazwę klasy o nazwie literę (CZ) i ustawić kolory i czcionki, jak chcesz.
Możesz również dodać nowe style za pomocą klas tematycznych w dokumencie HTML - dodać klasę "ui-bar (AZ)" dla pasków narzędzi "ui-ciało- (AZ)" za treść i UI-page-theme- ( AZ) "na stronie:
Przykład
<style>
.ui-bar-f {
color: red;
background-color: yellow;
}
.ui-body-f {
font-weight: bold;
color: white;
background-color: purple;
}
.ui-page-theme-f {
font-weight: bold;
background-color: green;
}
</style>
Spróbuj sam " W poprzednich wersjach jQuery Mobile, JavaScript używane do obsługi jaki element powinien dziedziczyć motyw rodzica. Począwszy od 1.4, ramy koncentruje się na poprawie wydajności i JavaScript został zastąpiony czystym CSS.
Zespół jQuery Mobile stworzył narzędzie, które pomoże Ci stworzyć swój własny motyw: The ThemeRoller . Można również użyć tego narzędzia do aktualizacji starszych tematów, aby były kompatybilne z nową wersją.