jQuery Mobile Themes

jQuery Mobile bietet 2 verschiedene Theme-Stile, von "a" bis "b" – jedes Theme hat unterschiedliche Farben für Buttons, Toolbars, Inhaltsblöcke usw., und jedes Theme hat einen unterschiedlichen visuellen Effekt.

Sie können das Erscheinungsbild der Anwendung anpassen, indem Sie das data-theme-Attribut eines Elements festlegen:

<a href="../index.html" class="ui-btn ui-btn-a|b">按钮</a>

Wert Beschreibung Beispiel
a Die Seite hat einen grauen Hintergrund und schwarzen Text
Header und Footer haben beide einen grauen Hintergrund und schwarzen Text
Buttons haben einen grauen Hintergrund und schwarzen Text
Aktive Buttons und Links haben weißen Text auf blauem Hintergrund
In Eingabefeldern ist der Wert des placeholder-Attributs hellgrau und der Wert schwarz		 Ausprobieren
b Die Seite hat einen schwarzen Hintergrund und weißen Text
Header und Footer haben beide einen schwarzen Hintergrund und weißen Text
Buttons haben weißen Text auf anthrazitfarbenem Hintergrund
Aktive Buttons und Links haben weißen Text auf blauem Hintergrund
In Eingabefeldern ist der Wert des placeholder-Attributs hellgrau und der Wert selbst weiß		 Ausprobieren

Button-Stile verwenden class="ui-btn". Verwenden Sie die Klasse "ui-btn-a|b", um den Button auf Grau (Standard) oder Schwarz zu setzen:

<a href="../index.html" class="ui-btn ui-btn-a|b">按钮</a>

lamp Der Theme-Stil "a" wird für die meisten Elemente verwendet; untergeordnete Elemente erben normalerweise den Stil des übergeordneten Elements.

Theme-Header und -Footer

Beispiel

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

Ausprobieren »

Theme-Dialog-Header und -Footer

Beispiel

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

Ausprobieren »

Theme-Buttons

Beispiel

<a href="#" class="ui-btn ui-btn-b">Schwarzer Button</a>

Ausprobieren »

Theme-Icons

Beispiel

<a href="#" class="ui-btn ui-btn-b ui-icon-search ui-btn-icon-notext">Suchen</a>

Ausprobieren »

Theme-Popup

Beispiel

<div data-role="popup" id="myPopup" data-theme="b">

Ausprobieren »

Theme-Buttons für Header und Footer

Beispiel

<div data-role="header">
<a href="#" class="ui-btn ui-btn-b">Startseite</a>
<h1>Willkommen auf meiner Startseite</h1>
<a href="#" class="ui-btn">Suchen</a>
</div>

<div data-role="footer">
<a href="#" class="ui-btn ui-btn-b">Folge mir auf Facebook</a>
<a href="#" class="ui-btn">Folge mir auf Twitter</a>
<a href="#" class="ui-btn ui-btn-b">Folge mir auf Instagram</a>
</div>

Ausprobieren »

Theme-Navigationsleiste

Beispiel

<div data-role="footer" data-theme="b">
<h1>Textüberschrift</h1>
  <div data-role="navbar">
    <ul>
      <li><a href="#" data-icon="home" data-theme="a">Schaltfläche 1</a>
      <li><a href="#" data-icon="arrow-r">Schaltfläche 2</a>
      <li><a href="#" data-icon="arrow-r">Schaltfläche 3</a>
      <li><a href="#" data-icon="search" data-theme="a">Schaltfläche 4</a>
    </ul>
  </div>
</div>

Ausprobieren »

Theme-Panel

Beispiel

<div data-role="panel" id="myPanel" data-theme="b">

Ausprobieren »

Theme: Einklappbare Schaltflächen und Inhalte

Beispiel

<div data-role="collapsible" data-theme="b" data-content-theme="b">
  <h1>Klick mich – ich bin einklappbar!</h1>
  <p>Ich bin der ausgeklappte Inhalt.</p>
</div>

Ausprobieren »

Theme-Liste

Beispiel

<ul data-role="listview" data-theme="b">
  <li><a href="#">Listeneintrag</a></li>
  <li><a href="#">Listeneintrag</a></li>
  <li data-theme="a"><a href="#">Listeneintrag</a></li>
  <li><a href="#">Listeneintrag</a></li>
</ul>

Ausprobieren »

Theme-Split-Schaltflächen

Beispiel

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

Ausprobieren »

Einklappbare Theme-Liste

Beispiel

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

Ausprobieren »

Theme-Formular

Beispiel

<label for="name">Vollständiger Name:</label>
<input type="text" name="text" id="name" data-theme="b">

<label for="colors">Lieblingsfarbe auswählen:</label>
<select id="colors" name="colors" data-theme="b">
  <option value="red">Rot</option>
  <option value="green">Grün</option>
  <option value="blue">Blau</option>
</select>

Ausprobieren »

Aufklappbares Theme-Formular

Beispiel

<fieldset data-role="collapsible" data-theme="b" data-content-theme="b">
<legend>Klick mich - ich bin aufklappbar!</legend>

Ausprobieren »

Neues Theme hinzufügen

jQuery Mobile kann neue Themes zu mobilen Seiten hinzufügen.

Sie können neue Themes hinzufügen oder bearbeiten, indem Sie die CSS-Datei ändern (wenn Sie jQuery Mobile heruntergeladen haben). Sie müssen nur das Stilmodul kopieren, dann die Buchstaben-Klassennamen (c-z) umbenennen und die Farben und Schriftarten, die Ihnen gefallen, den Styles hinzufügen.

Sie können auch neue Theme-Stile im HTML-Dokument hinzufügen. Für Symbolleisten fügen Sie Klassen hinzu: ui-bar-(a-z); für Textinhalte fügen Sie Klassen hinzu: ui-body-(a-z); für Seiten fügen Sie Klassen hinzu: ui-page-theme-(a-z).

Beispiel

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

Ausprobieren »

Note In früheren Versionen von jQuery Mobile wurde JavaScript verwendet, damit Elemente die Theme-Stile des übergeordneten Elements erben. Ab Version 1.4 konzentrierte sich das Framework stärker auf Leistungsverbesserungen und verwendet für die Vererbung kein JavaScript mehr, sondern reines CSS.

Das jQuery-Mobile-Team hat für diesen Zweck ein Tool erstellt, unter der AdresseThemeRollerSie können dieses Tool verwenden, um alte Themes zu aktualisieren, damit sie mit der neuen Version kompatibel sind.
Andere Erweiterungen