Themen in jQuery Mobile

Themen in jQuery Mobile

jQuery Mobile bietet fünf verschiedene Stilethemen von "a" bis "e" an - jedes Thema hat verschiedenefarbige Schaltflächen, Leisten, Inhaltsblöcke usw. Ein Thema von jQuery Mobile besteht aus mehreren sichtbaren Effekten und Farben.

Um das Aussehen der Anwendung anzupassen, verwenden Sie das Attribut data-theme und weisen Sie diesem Attribut ein Buchstabe zu:}}

<div data-role="page" data-theme="a|b|c|d|e">
Wert Beschreibung Beispiel
a Standard. Weißer Text auf schwarzer Hintergrund. Test
b Weißer Text auf blauem Hintergrund / Schwarzer Text auf grauem Hintergrund Test
c Schwarzer Text auf hellem Grau Test
d Schwarzer Text auf weißem Hintergrund Test
e Schwarzer Text auf orangefarbenem Hintergrund Test

Hinweis:Mischen Sie Ihre Lieblings-Themen!

Standardmäßig verwendet jQuery Mobile die "a"-Thema für Kopf- und Fußzeilen und das "c"-Thema (helles Grau) für den Kopfinhalt. Allerdings können Sie die Themen frei mischen.

Thema-farbige Seiten, Inhalte und Fußzeilen

Beispiel

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

Versuchen Sie es selbst

Thema-farbige Dialoge

Beispiel

<a href="#pagetwo" data-rel="dialog">Gehe zur thematisierten Dialogseite</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>

Versuchen Sie es selbst

Thema-farbige Schaltflächen

Beispiel

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

Versuchen Sie es selbst

Thema-farbige Symbole

Beispiel

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

Versuchen Sie es selbst

Thema-farbige Schaltflächen im Kopf- und Fußbereich

Beispiel

<div data-role="header">
  <a href="#" data-role="button" data-icon="home" data-theme="b">Home</a>
  <h1Willkommen auf meiner Homepage</h1>
  <a href="#" data-role="button" data-icon="search" data-theme="e">Suche</a>
</div>
<div data-role="footer">
  <a href="#" data-role="button" data-theme="b" data-icon="plus">Schaltfläche 1</a>
  <a href="#" data-role="button" data-theme="c" data-icon="plus">Schaltfläche 2</a>
  <a href="#" data-role="button" data-theme="e" data-icon="plus">Schaltfläche 3</a>
</div>

Versuchen Sie es selbst

themenisierte Navigationsleiste

Beispiel

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

Versuchen Sie es selbst

themenisierte klappbare Schaltflächen und Inhalt

Beispiel

<div data-role="collapsible" data-theme="b" data-content-theme="e">
  <h1>Klicke mich - ich bin klappbar!</h1>
  <p>I'm the expanded content.</p>
</div>

Versuchen Sie es selbst

themenisierte Liste

Beispiel

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

Versuchen Sie es selbst

Themenbezogene Trennknöpfe

Beispiel

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

Versuchen Sie es selbst

Themenbezogene klappbare Liste

Beispiel

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

Versuchen Sie es selbst

Themenbezogene Formulare

Beispiel

<label for="name">Vollständiger Name:</label>
<input type="text" name="text" id="name" data-theme="a">
<label for="colors">Wählen Sie Ihre Lieblingsfarbe:</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>

Versuchen Sie es selbst

Themenbezogene klappbare Formulare

Beispiel

<fieldset data-role="collapsible" data-theme="b" data-content-theme="e">
<legend>Klicken Sie mich - ich bin einklappbar!</legend>

Versuchen Sie es selbst

Neues Thema hinzufügen

jQuery Mobile ermöglicht es Ihnen auch, neue Themen zu mobilen Seiten hinzuzufügen.

Fügen oder bearbeiten Sie neue Themen durch die Bearbeitung der CSS-Datei (z.B. wenn jQuery Mobile heruntergeladen wurde). Kopieren Sie einfach einen Stileabschnitt und benennen Sie die Klasse mit dem Buchstaben (f-z) um, und passen Sie sie an Ihre bevorzugten Farben und Schriftarten an:

Sie können auch neue Stile hinzufügen, indem Sie im HTML-Dokument Themenklassen verwenden - fügen Sie der Symbolleiste die Klasse ui-bar-(a-z) hinzu und fügen Sie dem Inhalt die Klasse ui-body-(a-z) hinzu:

Beispiel

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

Versuchen Sie es selbst