Kolumne: Dino talks

Grundlagen zu jQuery-Mobile-Seiten (Teil 2)
Kommentare

Listen, Listen und nochmals Listen
Die Homepage einer mobilen Site organisieren Sie am besten, wenn Sie eine Liste von Aktionen bereitstellen. Die Elemente des Menüs lassen sich auf verschiedene Weise

Listen, Listen und nochmals Listen

Die Homepage einer mobilen Site organisieren Sie am besten, wenn Sie eine Liste von Aktionen bereitstellen. Die Elemente des Menüs lassen sich auf verschiedene Weise rendern: Sie können eine Navigationsleiste bilden, eine Schaltflächenleiste, eine Sammlung von Kacheln oder eine einfache Liste von ansprechend formatierten Links. jQuery Mobile unterstützt nahezu jedes vorstellbare Szenario, bietet sich aber speziell für Navigationsleisten und Listenansichten an. Um eine Navigationsleiste zu aktivieren, verwenden Sie die navbar-Rolle eines DIV-Elements und fügen Schaltflächen über eine UL-Auflistung hinzu, wie es das folgende Beispiel zeigt:

  

Mit zusätzlichen Formatinformationen definieren Sie eine feste oder variable Breite für Elemente. Andernfalls teilt jQuery Mobile die Breite zwischen den LI-Elementen gleichmäßig auf.

Die listview-Rolle realisiert die gebräuchlichste Benutzeroberfläche auf heutigen mobilen Geräten: eine Liste mit klickbaren Elementen, die den Inhalt horizontal verschieben. Das erforderliche Markup sieht so aus:

Mithilfe von Variationen der UL- und OL-Elemente können Sie sowohl nummerierte als auch verschachtelte Listen erzeugen. Zu den grafischen Variationen gehört das boolesche data-inset-Attribut auf dem DIV-Element. Das Attribut ist für abgerundete Ecken und ein ansprechendes Gerüst zuständig. Des Weiteren können Sie die Listenelemente mit Symbolen und Bildern versehen. Der folgende Code zeigt, wie Sie ein kleines Symbol links vom Listenelement einfügen:

  • Yet another link
  • Die Klasse ui-li-icon stellt sicher, dass das Bild nach links ausgerichtet wird. Das Bildelement muss ein untergeordnetes Element des Ankers sein. In gleicher Weise können Sie Text rechts vom Listenelement hinzufügen. Soll der Text automatisch in einer Blase gerendert werden, markieren Sie den Text mit der Klasse ui-li-count, andernfalls verwenden Sie die Klasse ui-li-aside.

    Zusammenfassung

    jQuery Mobile ist nicht einfach eine JavaScript-Bibliothek, sondern propagiert eine Art von neuer Sprache und Metapher für das Erstellen von Seiten. Deshalb lohnt es sich, selbst grundlegende Themen zu behandeln. In diesem Artikel wurden die Struktur der Seiten und relevanter Datenrollen vorgestellt.

    Dino Esposito ist CTO bei e-tennis.net, einer Firma, die sich auf webbasierte und mobile Lösungen für Sportereignisse in ganz Europa spezialisiert hat. Außerdem ist Dino der Autor von „Programming ASP.NET MVC3“, Microsoft Press, 2011.
    Unsere Redaktion empfiehlt:

    Relevante Beiträge

    Meinungen zu diesem Beitrag

    X
    - Gib Deinen Standort ein -
    - or -