jQuery Mobile Themes
jQuery Mobile bietet zwei verschiedene Stil Themen, "a" und "b" - mit jeweils unterschiedlichen Farben für Tasten, Bars, Inhaltsblöcke, und so weiter.
Um das Aussehen Ihrer Anwendung anzupassen, verwenden Sie die data-theme - Attribut, und weisen Sie das Attribut mit einem Brief:
<div data-role="page" data-theme="a|b" >
| Wert | Beschreibung | Beispiel |
|---|---|---|
| a | Schwarzer Text auf einem hellgrauen Hintergrund für Seiteninhalt Schwarzer Text auf einem grauen Hintergrund für Kopf- und Fußzeilen Schwarzer Text auf einem hellgrauen Hintergrund für Schaltflächen Weißer Text auf einem blauen Hintergrund für aktive Tasten Blauer Text auf Links Hellgrau Text (Platzhalter) oder schwarzer Text (Wert) auf einem weißen Hintergrund für die Eingabefelder | Versuch es |
| b | Weißer Text auf einem dunkelgrauen Hintergrund für Seiteninhalt Weißer Text auf einem dunkelgrauen Hintergrund für Kopf- und Fußzeilen Weißer Text auf einem Holzkohle Hintergrund für Schaltflächen Weißer Text auf einem "cyan" blauen Hintergrund für aktiven Tasten "Cyan" blauen Text auf Links Grauer Text (Platzhalter) oder weißer Text (Wert) auf einem schwarzen Hintergrund für Eingabefelder | Versuch es |
Bei Schaltflächen mit class="ui-btn" , verwenden Sie die "ui-btn-a|b" Klasse die Taste entweder grau (Standard) oder schwarz zu gestalten:
<a href="#" class="ui-btn ui-btn-a|b" >Button</a>
Das "a" Thema ist für die meisten Elemente verwendet, und Kind - Elemente erbt oft das Thema seiner Eltern (oder Seite).
Theming Kopf- und Fußzeile
Beispiel
<div data-role="header" data-theme="b"></div>
<div data-role="footer"
data-theme="b"></div>
Versuch es selber " Theming Kopf- und Fußzeile in Dialogen
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> Versuch es selber " Theming Buttons
Theming Icons
Beispiel
<a href="#" class="ui-btn ui-btn-b ui-icon-search
ui-btn-icon-notext">Search</a>
Versuch es selber " Theming Popups
Theming Buttons in Kopf- und Fußzeile
Beispiel
<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>
Versuch es selber " Theming Navigationsleisten
Beispiel
<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> Versuch es selber " Theming Panels
Theming Klapp-Taste und Inhalt
Beispiel
<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> Versuch es selber " Theming Listen
Beispiel
<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> Versuch es selber " Theming Split Buttons
Theming Klapp-Listen
Beispiel
<div data-role="collapsible" data-theme="b"
data-content-theme="b">
<ul data-role="listview">
<li><a href="#">Agnes</a></li>
</ul>
</div> Versuch es selber " Theming Forms
Beispiel
<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> Versuch es selber " Theming Klapp-Formulare
Beispiel
<fieldset data-role="collapsible" data-theme="b" data-content-theme="b">
<legend>Click me - I'm collapsible!</legend> Versuch es selber " New Themes
jQuery Mobile können Sie auch neue Themen zu Ihrem mobilen Seiten hinzufügen.
Hinzufügen oder neue Themen zu bearbeiten, indem Sie die CSS-Datei bearbeiten (wenn Sie jQuery Mobile herunterladen müssen). Kopieren Sie einfach einen Block von Stilen und benennen Sie die Klassen mit einem Buchstaben-Namen (cz), und passen Sie Farben und Schriftarten, wie Sie möchten.
fügen Sie die Klasse "ui-bar- (az)" für Symbolleisten "ui-Body- (az)" für den Inhalt und ui-Seite-Themen- (- Sie können auch neue Arten von Themenklassen im HTML-Dokument mit Hilfe hinzufügen az) "für die Seite:
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>
Versuch es selber " In früheren Versionen von jQuery Mobile, verwendet JavaScript zu handhaben, wie ein Element sollte das übergeordnete Thema erben. Ab 1.4 wird der Rahmen für eine verbesserte Leistung konzentriert und JavaScript durch reine CSS ersetzt wurde.
Das jQuery Mobile Team hat ein Tool erstellt, mit dem Sie Ihre eigenen benutzerdefinierten Designs erstellen können: Die ThemeRoller . Sie können dieses Tool auch verwenden, um ältere Themen aktualisieren, um sie mit der neuen Version kompatibel zu machen.