Design für Smartphones

Listen, Buttons und Co. mit jQuery Mobile

Sie wollen Ihre mobile Webseite übersichtlich gestalten? Wir zeigen Ihnen, wie Sie mit jQuery Mobile ganz einfach Listen, Buttons und eine Navigationsleiste erstellen können.

Mobile Webseiten mit jQuery Mobile

© Hersteller/ Archiv

Mobile Webseiten mit jQuery Mobile

Hier erfahren Sie...

  • ... wie Sie mit jQuery Mobile Listen, Buttons und eine Navigation erstellen

Das Javascript-Framework jQuery Mobile setzt auf jQuery auf und ist speziell für mobile Websites oder Web-Apps gedacht. Um bei kleineren Bildschirmen Inhalte übersichtlich zu präsentieren, verfügt jQuery Mobile über eine integrierte Akkordeonfunktion und eine direkt nutzbare Filterfunktion für Listen. Das CSS-Framework kümmert sich um das richtige Aussehen: Kopf- und Fußbereich sind wie bei Apps üblich gestaltet, Buttons und Listen haben leichte Farbverläufe und Schatten.

Wir zeigen Ihnen, wie Sie jQuery Mobile nutzen können, um mit Buttons und Listen Ihrer mobilen Webseite die richtige Struktur zu geben.

Tipp 1: Schöne Listen erstellen

Sehen wir uns anhand von Listen an, welche Verbesserungen jQuery Mobile bietet. Damit eine Liste von jQuery Mobile behandelt wird, benötigen sie date-role="listview":

<ul data-role="listview"><li><a href="#">Albizzie</a></li><li><a href="#">Alcarraza</a></li><li><a href="#">Bankazinn</a></li></ul>

Die Liste nimmt standardmäßig die gesamte verfügbare Breite ein. Soll es einen Abstand zum Rand geben, ergänzen Sie data-inset="true":

<ul data-role="listview" data-inset="true">

Umfangreiche Listen können Sie durch Trennzeichen unterteilen, diese werden automatisch wie der Kopfbereich gestaltet. Dafür ergänzen Sie zwischen den Listenpunkten Folgendes:

<li data-role="list-divider">A</li>

Für umfangreichere Listen sollten Sie einen Filter aktivieren, wodurch automatisch ein Eingabefeld erscheint. Ein Tippen aktiviert den Filter und es werden nur noch die Listeninhalte gezeigt, in denen die entsprechenden Buchstaben vorkommen. Im nächsten Beispiel sehen Sie außerdem, dass der englische Standard-Platzhaltertext durch data-filter-placeholder ersetzt wurde:

<ul data-role="listview" data-inset="true" data-filter="true" 
data-filter-placeholder="filtern ..."><li data-role="list-divider">A</li><li><a href="#">Albizzie</a></li><li><a href="#">Alcarraza</a></li><li data-role="list-divider">B</li><li><a href="#">Bankazinn</a></li></ul>

Tipp 2: Buttons generieren

Auch Buttons lassen sich mit jQuery Mobile einfach erstellen. Wenn Sie innerhalb des Kopf- oder Fußbereichs einen Link integrieren, wird dieser automatisch in einen Button verwandelt. Soll auf den Buttons zusätzlich ein Icon untergebracht sein, so stellt jQuery Mobile 18 verschiedene Standard-Icons zur Verfügung. Den gewünschten Button geben Sie über data-icon an. Durch folgenden Code wird im Kopfbereich ein Haus-Icon integriert, das automatisch links angeordnet wird. data-iconpos="notext" blendet den Text aus:

<div data-role="header"><a href="seite0.html" data-icon="home" data-iconpos="notext">Start</a><h1>Hallo jQuery Mobile</h1></div>

Benötigen Sie Buttons außerhalb von Kopf- und Fußzeile, müssen Sie beim umfassenden Element die Klasse ui-bar verwenden.

<p class="ui-bar"><a href="#" data-icon="star">Bewertung</a></p>
jQuery Mobile Splitbutton

© Hersteller/ Archiv

Splitbuttons haben unterschiedliche Funktionen in verschiedenen Bereichen.

Bei wenig verfügbarem Platz sind Splitbuttons praktisch. Diese sind zweigeteilt in unterschiedliche Aktionen, je nachdem in welchen Bereich der Benutzer klickt. Für einen Splitbutton müssen Sie zwei Links innerhalb eines li-Elements platzieren. jQuery Mobile sorgt für die entsprechende Optik und ergänzt eine Trennlinie. Beim rechten Teil des Buttons wird als Icon ein Pfeil ergänzt, aber Sie können auch ein anderes Symbol über data-split-icon im umfassenden Element angeben - im folgenden Beispiel ist es ein Stern.

<ul data-role="listview" data-inset="true" data-split-icon="star"><li><a href="#"><h3>Bantamgewicht</h3><p>Mehr Infos</p></a><a href="#">Kaufen</a></li></ul>

Tipp 3: Navigationsleiste

Eine einfache Navigationsleiste erstellen Sie über eine ungeordnete Liste. Weisen Sie außerdem dem umfassenden Element data-role="navbar" zu. Solange es nicht mehr als fünf Punkte sind, werden diese nebeneinander angeordnet, sonst auf mehrere Zeilen verteilt.

<div data-role="navbar"><ul><li><a href="seite0.html">null</a></li><li><a href="seite1.html">eins</a></li><!-- Kennzeichnung aktuelle Seite --><li><a href="#" class="ui-btn-active
ui-state-persist">zwei</a></li></ul></div><!-- /navbar -->

Mehr zum Thema

Tipps zum Grundgerüst von jQuery Mobile und den verfügbaren Seitentypen erfahren Sie in unserem Ratgeber: Mobile Webseiten erstellen mit jQuery Mobile .

Wie Sie mit jQuery Mobile Themes anlegen und Events konfigurieren können erfahren Sie in unserem Ratgeber: Seitengestaltung und Event-Steuerung mit jQuery Mobile .

Mehr zum Thema

PDF Download Nitro PDF Addon Firefox
Internet Explorer

Immer wieder kommt es vor, dass sich eine Webseite mit Bildern nicht korrekt auf dem eigenen Rechner herunterladen und speichern lässt. Seit Windows…
Windows SkyDrive
Cloud-Dienst

Mit SkyDrive für WIndows von Microsoft können SIe Ihren Online-Speicher verwalten und Daten zwischen Ihren Computern austauschen. So geht's.
Die 8 ultimativen Windows-Tools
Download

Mit Tuning mehr aus Windows machen: Mit unseren Tools ersetzen Sie Bordmittel und holen so mehr aus Ihren Windows raus.
Das
Windows mit Mac-Oberfläche

Wir zeigen, wie Sie Windows mit Mac-Oberfläche nutzen können. Mit unserer Hilfe verpassen Sie Windows 8.1 & Co. ein Apple-Design und arbeiten wie…
PC mit Familie teilen
Benutzerkonten, History löschen & Co.

Soll Ihr PC für mehrere Benutzer bereitstehen und Sie wollen mehr Privatsphäre? Wir zeigen, wie Sie Benutzerkonten anlegen, Spuren löschen und…