jQuery Telefony tematy
jQuery Mobile oferuje dwa różne style motywu, od "A" do "B" - każdy tematycznych przycisków, pasków itp treści kolory blokowe są niespójne, efekt wizualny nie jest taka sama dla każdego tematu.
Poprzez ustawienie atrybutu elementu danych rozrywki może dostosować wygląd aplikacji:
<a href="#" class="ui-btn ui-btn-a|b">按钮</a>
| wartość | opis | Przykłady |
|---|---|---|
| Strona czarny tekst na szarym tle głowy i na dole są czarny tekst na szarym tle tło czarny tekst na przycisku szare przyciski aktywacji i linki do białego tekstu na niebieskim tle Wartość atrybutu pole zastępczy Wprowadzanie danych jest jasnoszary, wartość jest czarne | próbować | |
| b | Strona czarne tło z białym tekstem na dole głowy są biały tekst na czarnym tle biały tekst na przycisku węgla aktywowanego przyciski tła i linki do białego tekstu na niebieskim tle Wartość atrybutu pole zastępczy Wprowadzanie danych jest jasnoszary, wartość jest biały | próbować |
Przycisk Styl Zastosowanie class = "btn-ui", używając "ui-btn-a | b" przycisk Ustawienia klasa jest nieaktywna (ustawienie domyślne) lub czarny:
<a href="#" class="ui-btn ui-btn-a|b">按钮</a>
 | "A" styl tematem dla większości elementów, podzespołów, elementów ogół dziedziczą styl elementu nadrzędnego. |
|---|
blaty Temat i dna
Przykłady
<div data-role="header" data-theme="b"></div>
<div data-role="footer" data-theme="b"></div>
<div data-role="footer" data-theme="b"></div>
Spróbuj »
W dolnej części okna dialogowego głowy motyw
Przykłady
<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>
<div data-role="header" data-theme="b"></div>
<div data-role="footer" data-theme="b"></div>
</div>
Spróbuj »
przycisk tematy
ikony tematyczne
Przykłady
<a href="#" class="ui-btn ui-btn-b ui-icon-search
ui-btn-icon-notext">Search</a>
Spróbuj »
wątek pop
Przycisk Tematy na dole głowy i
Przykłady
<Div data-role = "header">
<a href="#" class="ui-btn ui-btn-b"> główna </a>
<H1> Witam na mojej stronie domowej </ h1>
<a href="#" class="ui-btn"> wyszukiwania </a>
</ Div>
<Div data-role = "footer">
<a href="#" class="ui-btn ui-btn-b"> Follow me on Facebook </a>
<a href="#" class="ui-btn"> Follow me on Twitter </a>
<a href="#" class="ui-btn ui-btn-b"> Follow me on Instagram </a>
</ Div>
<a href="#" class="ui-btn ui-btn-b"> główna </a>
<H1> Witam na mojej stronie domowej </ h1>
<a href="#" class="ui-btn"> wyszukiwania </a>
</ Div>
<Div data-role = "footer">
<a href="#" class="ui-btn ui-btn-b"> Follow me on Facebook </a>
<a href="#" class="ui-btn"> Follow me on Twitter </a>
<a href="#" class="ui-btn ui-btn-b"> Follow me on Instagram </a>
</ Div>
Spróbuj »
Wątek pasek nawigacji
Przykłady
<div data-role="footer" data-theme="b">
<h1>文本头部</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>
<h1>文本头部</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 »
panel Theme
Temat składane przyciski i treści
Przykłady
<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>
<h1>Click me - I'm collapsible!</h1>
<p>I'm the expanded content.</p>
</div>
Spróbuj »
Lista tematów
Przykłady
<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>
<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 »
Wątek przycisk Podział
Wątek Składany Lista
Przykłady
<div data-role="collapsible" data-theme="b"
data-content-theme="b">
<ul data-role="listview">
<li><a href="#">Agnes</a></li>
</ul>
</div>
<ul data-role="listview">
<li><a href="#">Agnes</a></li>
</ul>
</div>
Spróbuj »
Motywy Formularz
Przykłady
<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>
<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 »
Wątek formularz składany
Przykłady
<fieldset data-role="collapsible" data-theme="b" data-content-theme="b">
<legend>Click me - I'm collapsible!</legend>
<legend>Click me - I'm collapsible!</legend>
Spróbuj »
Dodaj nowy temat
jQuery Mobile może dodawać nowych tematów na stronie mobilnej.
Modyfikując plik CSS, aby dodać lub edytować nowego tematu (jeśli pobrałeś jQuery komórkowy). Wystarczy tylko skopiować moduł stylu, a następnie ponownie się nazwę klasy poleceń (CZ), a następnie dodaj swój kolor i czcionka ulubionego stylu.
Można także dodawać dokumenty HTML odnoszące się do nowego stylu, pasek narzędzi dodać klasę: ui-bar (AZ), dodać kategorię zawartości tekstowej: UI-ciało- (AZ), dodać kategorię stron: UI-page-theme- ( AZ).
Przykłady
<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>
.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 »
| W poprzednich wersjach jQuery Mobile, elementu przy użyciu JavaScript dziedziczą style motywu rodzicielskich. Do wersji 1.4, bardziej skupioną ramy dla poprawy wydajności, nie są już wykorzystywane JavaScript dziedziczyć, ale przy użyciu czystego CSS. Zespół jQuery Mobile dla tego stworzyliśmy narzędzie, aby zająć się ThemeRoller . Możesz użyć tego narzędzia do aktualizacji starego tematu, dzięki czemu kompatybilne z nową wersją. |
|---|