Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

Einführung in jQuery Mobile

Seite 2 / 4

Mobile Steuerelemente und HTML

Entwickler können im HTML für mobile Geräte eine ganze Reihe neuer Formularelemente verwenden. Diese kamen alle mit der HTML5-Spezifikation. Einige dieser neuen Werte für das Attribut type, die im HTML-Tag input verwendet werden können, möchte ich euch hier vorstellen:

  • range begrenzt die Eingabe eines nummerischen Wertes auf einen Bereich, der durch einen Minimal- und Maximalwert definiert wird.
  • tel zur Eingabe einer Telefonnummer. Dem Benutzer wird eine für Nummern optimierte Tastatur angezeigt.
  • url erzeugt ein Textfeld zur Eingabe von URLs. Dem Benutzer wird hierzu eine für URLs optimierte Tastatur angezeigt.
  • search — Das Eingabefeld für die Suche.
  • number — Ein Eingabefeld, um einen numerischen Wert über die Tastatur einzugeben.
  • date, datetime, time, datetime-local, month and week — Eine Reihe von Datums- und Zeit-relevanten Steuerelementen, die Teil der HTML5-Spezifikation sind.

Neben diesen Steuerelementen gibt es noch eine Reihe von Attributen, die Entwickler benutzen können, um dem Benutzer weitere Hilfe anzubieten und dem Entwickler selbst bessere Kontrolle zu geben.

  • Automatische Großschreibung — Das Attribut autocapitalize kann dazu benutzt werden, ein Texteingabefeld auf Großschreibung voreinzustellen. Dies kann zur Eingabe von Namen hilfreich sein.
  • Autokorrektur — Das Attribut autocorrect kann dazu benutzt werden, die Autokorrektur für ein Texteingabefeld ein- oder auszuschalten.
  • Platzhalter — Das Attribut placeholder zeigt dem Benutzer innerhalb des Textfeldes eine Beschreibung an, die ihm sagt, was er in dieses Feld eingeben soll.

Ihr werdet euch vielleicht fragen, warum sich ein Entwickler über diese Steuerelemente überhaupt Gedanken machen muss. Das ist eine sehr berechtigte Frage. Wenn Entwickler diese neuen Steuerelemente und Attribute verwenden, übernimmt das jQM-Framework dankbarerweise das notwendige Styling der Steuerelemente, damit sie so aussehen wie ein Geräte-eigenes Steuerelement. Sehen sie sich das folgende Beispiel an:

<input type="text" placeholder="input" />
<input type="range" min="0" max="100" value="50" />
<input type="tel" value="555-1212" />
<a href="Default.cshtml" data-role="button">Save Data</a>

In diesem Beispiel wird das Attribut placeholder bei einem Texteingabefeld verwendet. jQM übernimmt einen Teil des Stylings, zum Beispiel die abgerundeten Ecken, wie man sie im Bild 2 sieht. Der input-Typ range ist ein HTML5-Steuerelement und wird von jQM als Schieberegler angezeigt. Der Typ tel ist ein Eingabefeld für eine Telefonnummer. Beim iPhone führt die Eingabe der Nummer zum Wählen der Nummer. Der mitgelieferte Browser in Android 4.0.3 (womit der Screenshot gemacht wurde) unterstützt den tel-input-Typ nicht, aber beachtet, dass eine für Telefonnummern optimierte Tastatur angezeigt wird, wenn das Formularfeld vom Typ tel ausgewählt ist. Zum Schluss haben wir noch einen <a>-Tag, bei dem das Attribut data-role="button" gesetzt ist. Das Ergebnis ist, dass die von jQM zugewiesenen Styles den <a>-Tag wie einen Button aussehen lassen.

jQM mitgeliefertes Styling
Bild 2. jQM mitgeliefertes Styling

Nicht alle Formularelemente werden auch von allen mobilen Webbrowsern unterstützt. Wenn ein Entwickler ein Formular-Element benutzt, das der Browser nicht unterstützt, wird der Browser an Stelle des unbekannten Steuerelements ein Standard-Texteingabefeld anzeigen. Der Entwickler kann dieser Situation vorgreifen, indem er herausfindet, ob der Browser die notwendige Unterstützung mitbringt. Für diesen Zweck ist die JavaScript-Library Modernizr sehr beliebt.

Zu beachten: Die neuen mobilen Steuerelemente in HTML5 sind nicht wirklich Teil von jQuery Mobile. Ich habe sie hier nur erwähnt, weil HTML5 von den meisten mobilen Geräten (zumindest teilweise) unterstützt wird. jQM kann dann diese Steuerelemente, Attribute und andere Elemente verwenden und ihr Aussehen anpassen. Zum Beispiel kann jQM ein Steuerelement mit dem input type="range" nehmen und einen Schieberegler anzeigen neben einem kleinen Textfeld, das immer den aktuellen Wert des Reglers enthält.

Wenn ihr das von jQM mitgelieferte Styling nicht wollt, braucht ihr nur in einem Tag das Attribut date-role="none" setzen, um das jQM-Styling für dieses Steuerelement auszuschalten.

Wie wendet jQuery Mobile Styling und den Look an?

jQM folgt einem einfachen Ansatz beim Styling. Standardmäßig macht jQM folgendes:

  • Es nimmt die leichtest umzusetzende Methode, was bedeutet, dass Entwickler und Designer nicht mit einem komplexen Styling-System kämpfen müssen.
  • Es lässt dem Browser-eigenen Rendering Vorrang.
  • Es fügt einen Innenabstand (padding) hinzu für bessere Lesbarkeit. Der Innenabstand sollte relativ gering sein.
  • Es verwendet das jQM-Theme-System, um Schriftarten und Farben einen "Look" zu verleihen. (Sie werden weiter unten im Artikel mehr über Themes lernen.) jQM arbeitet auch mit „Progressiver Verbesserung” sowie mit „Fehlertoleranz”. Das bedeutet, wenn eine Anwendung in einem modernen Browser läuft, dann werden die seine Fähigkeiten ausgereizt. Läuft die Anwendung in einem weniger modernen Browser, schraubt jQM die verwendeten Funktionalitäten zurück.

Das Listview-Steuerelement

Zusätzlich zu den HTML5-input-Typen bietet jQM ein neues Steuerelement namens listview an, das man zur Datenansicht und Navigation verwenden kann. Üblicherweise sind die Daten in einem listview in irgendeiner Weise verbunden, entweder mit dem Server (der sie dann zu dem mobilen Gerät sendet). Oder sie werden mit Hilfe von AJAX über einen Aufruf zu einem Webservice erstellt.

Hier ist ein einfaches Beispiel für ein listview-Element:

<ul data-role="listview">
  <li><a href="Default.cshtml">Windows 8</a></li>
  <li><a href="Default.cshtml">Windows Phone</a></li>
  <li><a href="Default.cshtml">Windows RT</a></li>
</ul>

Bitte beachten Sie, dass eine Aufzählungsliste zusammen mit einer Reihe von Einträgen verwendet wird. Das Attribut data-role ist auf listview gesetzt. Durch diese Besetzung des data-role Attributs weiß jQM, dass das Steuerelement ein listview sein soll und verleiht ihm den Look von UITableView von iOS.

In Bild 3 könnt ihr sehen, wie das obige listview-Beispiel im Browser aussieht. Die drei im Code-Beispiel gezeigten Links haben jeweils ein grafisches Symbol, das dem Benutzer vermitteln soll, dass er beim Klick auf den Eintrag zu dessen im <a href> definierter URL weitergeleitet wird. Und schließlich wird abhängig vom verwendeten Endgerät ein Listeneintrag schattiert dargestellt, während der Benutzer mit dem Finger über das Element fährt.

Ein einfaches listview-Element dargestellt im Windows Phone Emulator
Bild 3. Ein einfaches listview-Element dargestellt im Windows Phone Emulator

Sehen wir uns nun ein etwas komplizierteres Beispiel mit listview an. Hier werden wir Trenner, ein Suchfeld und Anweisungen ins Suchfeld hinzufügen.

<ul id="listViewMore" data-filter="true"
    data-filter-placeholder="Search OSs" data-role="listview"
    data-autodividers="true">
    <li data-role="list-divider">A</li>
      <li><a href="Default.cshtml">Android</a></li>
      <li data-role="list-divider">I</li>
    <li><a href="Default.cshtml">iPhone</a></li>
      <li><a href="Default.cshtml">iPad</a></li>
    <li data-role="list-divider">L</li>
      <li><a href="Default.cshtml">Linux</a></li>
    <li data-role="list-divider">W</li>
      <li><a href="Default.cshtml">Windows 8</a></li>
      <li><a href="Default.cshtml">Windows Phone</a></li>
      <li><a href="Default.cshtml">Windows RT</a></li>
</ul>

Wenn man das Attribut data-filter auf true setzt, wird in diesem listview ein Suchfeld erstellt, das mit dem listview verbunden ist. Es ist ein großartiges Feature, bei dem die Einträge im listview während des Eintippens im Suchfeld automatisch nach den momentan eingetippten Kriterien gefiltert werden. Das Setzen des Wertes für data-filter-placeholder zeigt bei Geräten, die das placeholder-Attribut unterstützen, einen Platzhalter im Suchfeld an. Im Beispiel verwenden wir auch das Attribut data-autodividers. Wenn man dessen Wert auf true setzt, erstellt es automatisch einen Trenner. Der Trenner wird erstellt, indem er die Anfangsbuchstaben der Einträge anzeigt. Ich persönlich fand dies ziemlich unzuverlässig. Besser finde ich es, wenn man das Attribut data-role in bestimmte Listeneinträgen auf list-divider setzt.

Bild 4 zeigt diese etwas fortgeschrittenen Einstellungen von listview auf einem Android-Gerät. Der Screenshot zeigt die Ausgabe des eingebauten Browsers eines Android-x86-Emulators.

Listview mit Trenner und Suchfeld auf einem Android-Gerät
Bild 4. Listview mit Trenner und Suchfeld auf einem Android-Gerät

Zu beachten: Wenn eine Anwendung dynamisch Daten zum listview hinzufügen muss, kann es sein, dass Sie für den listview die refresh-Methode aufrufen müssen. Dies wird mit der Javascript-Methode $(“#listid”).listview(‘refresh’); erledigt. „#listid” ist in unserem Beispiel die ID des listview, der von dem Programm angepasst werden muss und ist in typischer jQuery-Schreibweise gezeigt.

Bitte beachte unsere Community-Richtlinien

2 Reaktionen
fimbim

Die Einrückung in dem id="listViewMore" vom "list-divider I" und dem "iPhone" da drunter sind vertauscht.

Antworten
hagh

eine gute Einführung für alle die sich lieber berieseln lassen:
https://www.youtube.com/watch?v=xulY8rKVMaA

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.