Motywy jQuery Mobile

Motywy jQuery Mobile

jQuery Mobile oferuje pięć różnych stylów tematycznych, od "a" do "e" - każdy z nich ma różne kolory przycisków, pasków, bloków treści itp. Jeden z tematów jQuery Mobile składa się z wielu widocznych efektów i kolorów.

Aby dostosować wygląd aplikacji, użyj atrybutu data-theme i przypisz do niego literę:}}

<div data-role="page" data-theme="a|b|c|d|e">
Wartość Opis Przykład
a Domyślnie. Biały tekst na czarnym tle. Test
b Biały tekst na niebieskim tle / czarny tekst na szarym tle Test
c Czarny tekst na jasnoszarym tle Test
d Czarny tekst na białym tle Test
e Czarny tekst na żółtym tle Test

Wskazówka:Mieszaj ulubione tematy!

Domyślnie, jQuery Mobile używa tematu "a" dla nagłówków i stopki strony, a tematu "c" dla treści nagłówka (jasnoszary). Jednak możesz swobodnie mieszać tematy.

Tematyzowane strony, zawartość i stopka

Przykład

<div data-role="header" data-theme="b"></div>
<div data-role="content" data-theme="a"></div>
<div data-role="footer" data-theme="e"></div>

Spróbuj sam

Tematyzowane okno dialogowe

Przykład

<a href="#pagetwo" data-rel="dialog">Przejdź do Tematyzowanej Strony Dialogowej</a>
<div data-role="page" id="pagetwo" data-overlay-theme="e">
  <div data-role="header" data-theme="b"></div>
  <div data-role="content" data-theme="a"></div>
  <div data-role="footer" data-theme="c"></div>
</div>

Spróbuj sam

Tematyzowane przyciski

Przykład

<a href="#" data-role="button" data-theme="a">Button</a>
<a href="#" data-role="button" data-theme="b">Button</a>
<a href="#" data-role="button" data-theme="c">Button</a>

Spróbuj sam

Tematyzowane ikony

Przykład

<a href="#" data-role="button" data-icon="plus" data-theme="e">Plus</a>

Spróbuj sam

Tematyzowane przyciski w nagłówku i stopce strony

Przykład

<div data-role="header">
  <a href="#" data-role="button" data-icon="home" data-theme="b">Strona główna</a>
  <h1>Witaj na mojej stronie głównej</h1>
  <a href="#" data-role="button" data-icon="search" data-theme="e">Wyszukiwanie</a>
</div>
<div data-role="footer">
  <a href="#" data-role="button" data-theme="b" data-icon="plus">Przycisk 1</a>
  <a href="#" data-role="button" data-theme="c" data-icon="plus">Przycisk 2</a>
  <a href="#" data-role="button" data-theme="e" data-icon="plus">Przycisk 3</a>
</div>

Spróbuj sam

Tematyzowane paski nawigacyjne

Przykład

<div data-role="footer" data-theme="e">
  <h1>Wprowadź tekst stopki tutaj</h1>
  <div data-role="navbar">
    <ul>
      <li><a href="#" data-icon="home" data-theme="b">Przycisk 1</a></li>
      <li><a href="#" data-icon="arrow-r">Przycisk 2</a></li>
      <li><a href="#" data-icon="arrow-r">Przycisk 3</a></li>
      <li><a href="#" data-icon="search" data-theme="a" >Przycisk 4</a></li>
    </ul>
  </div> 
</div>

Spróbuj sam

Tematyzowane przyciski i zawartość rozwijana

Przykład

<div data-role="collapsible" data-theme="b" data-content-theme="e">
  <h1>Kliknij mnie - Jestem rozwijany!</h1>
  <p>Jest to rozszerzony treść.</p>
</div>

Spróbuj sam

Listy tematyczne

Przykład

<ul data-role="listview" data-theme="e">
  <li><a href="#">Punkt listy</a></li>
  <li data-theme="a"><a href="#">Element lista</a></li>
  <li data-theme="b"><a href="#">Punkt listy</a></li>
  <li><a href="#">Punkt listy</a></li>
</ul>

Spróbuj sam

Przyciski podzielone z tematem

Przykład

<ul data-role="listview" data-split-theme="e">

Spróbuj sam

Lista rozwijana z tematem

Przykład

<div data-role="collapsible" data-theme="b" data-content-theme="e">
  <ul data-role="listview">
    <li><a href="#">Agnes</a></li>
  </ul>
</div>

Spróbuj sam

Formularze z tematem

Przykład

<label for="name">Pełna nazwa:</label>
<input type="text" name="text" id="name" data-theme="a">
<label for="colors">Wybierz ulubiony kolor:</label>
<select id="colors" name="colors" data-theme="b">
  <option value="red">Czerwony</option>
  <option value="green">Zielony</option>
  <option value="blue">Niebieski</option>
</select>

Spróbuj sam

Formularze rozwijane z tematem

Przykład

<fieldset data-role="collapsible" data-theme="b" data-content-theme="e">
<legend>Kliknij mnie - Jestem rozwijany!</legend>

Spróbuj sam

Dodaj nowy temat

jQuery Mobile pozwala również na dodanie nowych tematów do stron mobilnych.

Dodaj lub edytuj nowe tematy, edytując plik CSS (np. po zainstalowaniu jQuery Mobile). Wystarczy skopiować fragment stylu, zmienić nazwę klasy za pomocą liter (f-z) i dostosować do swoich ulubionych kolorów i czcionek:

Możesz również dodać nowe style, używając klas tematu w dokumencie HTML - dodaj klasę ui-bar-(a-z) do paska narzędziowego i klasę ui-body-(a-z) do treści:

Przykład

<style>
.ui-bar-f
{
color:green;
background-color:yellow;
}
.ui-body-f
{
font-weight:bold;
color:purple;
}
</style>

Spróbuj sam