jQuery Mobile Themen
jQuery Mobile zwei unterschiedlichen Designstilen bietet, von "a" bis "b" - jeweils thematisch Schaltflächen, Symbolleisten usw. Inhaltsblock Farben sind widersprüchlich, der visuelle Effekt ist nicht das gleiche für jedes Thema.
Durch das Element Daten Thema Attribut Einstellung kann das Erscheinungsbild der Anwendung anpassen:
<a href="#" class="ui-btn ui-btn-a|b">按钮</a>
| Wert | Beschreibung | Beispiele |
|---|---|---|
| ein | Seite schwarzer Text auf einem grauen Hintergrund Kopf und Boden sind schwarzer Text auf einem grauen Hintergrund Hintergrund schwarze Taste grau Aktivierung der Buttons und Links führen zu weißen Text auf einem blauen Hintergrund Eingabe Eingabefeld Platzhalter Attributwert ist ein helles Grau, Wert ist schwarz | versuchen |
| b | Seite schwarzem Hintergrund mit weißer Schrift am unteren Rand des Kopfes sind weißer Text auf schwarzem Hintergrund ein weißer Text-Taste Aktivkohle Hintergrund Buttons und Links führen zu weißen Text auf einem blauen Hintergrund Eingabe Eingabefeld Platzhalter Attributwert ist ein helles Grau, Wert ist weiß | versuchen |
Button Style Verwenden class = "ui-BTN", "ui-btn-a | b" mit dem Klassen Schaltfläche Einstellungen abgeblendet ist (Standard) oder schwarz:
<a href="#" class="ui-btn ui-btn-a|b">按钮</a>
 | "A" Stil Thema für die meisten Elemente, Unterelemente erben im Allgemeinen die Art des übergeordneten Elements. |
|---|
Topic Hochs und Tiefs
Beispiele
<div data-role="footer" data-theme="b"></div>
Versuchen »
Der untere Teil des Dialogfelds Thema Kopf
Beispiele
<div data-role="header" data-theme="b"></div>
<div data-role="footer" data-theme="b"></div>
</div>
Versuchen »
Themen-Taste
Theme-Icons
Beispiele
Versuchen »
Thema Pop
Themen-Taste an der Unterseite des Kopfes und
Beispiele
<a href="#" class="ui-btn ui-btn-b"> Startseite </a>
<H1> Willkommen auf meiner Homepage </ h1>
<a href="#" class="ui-btn"> Suche </a>
</ Div>
<Div data-role = "footer">
<a href="#" class="ui-btn ui-btn-b"> Folgen Sie mir auf Facebook </a>
<a href="#" class="ui-btn"> Folgen Sie mir auf Twitter </a>
<a href="#" class="ui-btn ui-btn-b"> Folgen Sie mir auf Instagram </a>
</ Div>
Versuchen »
Thema Navigation Bar
Beispiele
<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>
Versuchen »
Thementafel
Thema zusammenklappbar Tasten und Inhalt
Beispiele
<h1>Click me - I'm collapsible!</h1>
<p>I'm the expanded content.</p>
</div>
Versuchen »
Themenübersicht
Beispiele
<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>
Versuchen »
Thema Split-Taste
Thema reduzierbare Liste
Beispiele
<ul data-role="listview">
<li><a href="#">Agnes</a></li>
</ul>
</div>
Versuchen »
Themen Form
Beispiele
<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>
Versuchen »
Thema zusammenklappbar Form
Beispiele
<legend>Click me - I'm collapsible!</legend>
Versuchen »
Neues Thema hinzufügen
jQuery Mobile können neue Themen in der mobilen Seite hinzufügen.
Durch Modifizieren der CSS-Datei hinzufügen oder ein neues Thema zu bearbeiten (wenn Sie die jQuery Mobile heruntergeladen haben). Sie müssen nur den Stil Modul zu kopieren und dann Befehl Klassennamen erneut Brief (cz), und Ihre Lieblingsfarbe und Schriftart hinzufügen.
Sie können auch HTML-Dokument hinzufügen, um den neuen Stil im Zusammenhang, fügen Sie die Symbolleiste Klasse: ui-bar- (az), Textinhalt Kategorien: ui-Body- (az), fügen Seite Kategorien: ui-Seite-Themen- ( az).
Beispiele
.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>
Versuchen »
| In früheren Versionen von jQuery Mobile, ein Element mit JavaScript Mutter Thema Stile zu erben. Zur Version 1.4, ist der Rahmen, mehr Fokus auf die Verbesserung der Leistung, nicht mehr JavaScript Vererbung, aber mit reinem CSS. jQuery Mobile - Team für diese ein Werkzeug zur Adresse erstellt haben , die Themeroller . Sie können dieses Tool verwenden, um ein altes Thema zu aktualisieren, es kompatibel mit der neuen Version zu machen. |
|---|