jQuery Mobile

JavaScript-Framework-jQuery
jQuery Mobile
Mobile Seiten mit HTML5 und CSS3 entwickeln
Unterstützung durch Dreamweaver
codiqua drag and drop UI Builder
jQuery Mobile ...............................................................................................
Download:..............................................................................................
JQuery Mobile – Dateien im DRW festlegen .......................................................
Symbolleiste jQuery Mobile .........................................................................
2
2
2
3
jQuery Mobile - Seite ...............................................................................
Seitenübergänge (Page Trasitions) ......................................................................
Dialog ........................................................................................................
Titel in mehrseitigen Vorlagen ........................................................................
Kopfzeile und Fußzeile positionieren....................................................................
Themes und Swatches (Farbschemata) .................................................................
Buttons ......................................................................................................
Buttons mit Symbolen (data-icon) .......................................................................
Inline-Elemente ............................................................................................
Navigationsbar ..............................................................................................
3
4
4
5
5
6
6
6
6
7
Reduzierbarer Block (Akkordeon) ................................................................. 8
Layoutraster.......................................................................................... 9
Listenansicht ........................................................................................ 10
Listenauswahl (Filter) .................................................................................... 11
Verschachtelte Liste ...................................................................................... 12
Geteilte Liste .............................................................................................. 13
Fortgeschrittene Listenansicht .......................................................................... 14
Dateneingabe ......................................................................... 15
Kontrollkästchen ................................................................................... 16
Gruppierte Buttons ....................................................................................... 17
Radio-Buttons....................................................................................... 17
Schalter (Flip Toggles) Wechselumschalter ..................................................... 18
Schieberegler (Slider) .............................................................................. 18
Schaltfläche ......................................................................................... 19
Auswahlmenü ....................................................................................... 21
Referenz der data-Attribute ............................................................................. 21
Codiqa (drag-and-drop UI builder) ...................................................................... 22
ThemeRoller für jQuery Mobile ......................................................................... 22
Mag. Erwin Mayer, Dezember 2012
VBS Akademiestraße
jQuery Mobile
Download:
http://jquerymobile.com/download/
Demos:
http://jquerymobile.com/demos/1.2.0/
letzte Version:
Copy-and-Paste Snippet for CDN-hosted files (recommended):
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js
http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css
http://code.jquery.com/jquery-1.8.2.min.js
JQuery Mobile – Dateien im DRW festlegen
Beim Hinzufügen einer jQuery Mobile – Seite erscheint folgender Dialog, erneuern Sie bitte
die entsprechenden Zeilen für die neueste Version:
Abb.: Dialog zum Einbinden der jquery-Module per CDN
DRW-Voreinstellungen im DRW ergänzen
Menü: Bearbeiten / Voreinstellungen /Neues Dokument:
Standarderweiterung: .htm
Standard-Dokumenttyp: HTML 5
Standardcodierung: Unicode (UTF-8)
Mag. Erwin Mayer, 2012
Seite 2/22
jQuery Mobile
Symbolleiste jQuery Mobile
Abb.: Symbolleiste jQuery Mobile im DRW
Mit jQuery Mobile lassen sich schnell und einfach mobile Web-Applikationen erstellen.
Erstellen Sie eine neue HTML5 bzw. PHP-Seite, dann fügen Sie im body eine neue jQuery
Mobile – Seite ein. Damit werden die jQuery und jQuery Mobile –Bibliotheken eingebunden!
Bei HTML wird für jede Seite eine Datei des Typs .htm angelegt. Bei mobilen Seiten mit
jQuery Mobile werden dagegen üblicherweise mehrere Seiten (multi-page Container)
eingefügt.
Diese Vorgangsweise hat mehrere Vorteile: Es werden sanftere Seitenübergänge (Page
Transitions) erzielt (gegenüber mehrerer HTML-Seiten). Die Anzahl der notwendigen
Netzzugriffe ist deutlich geringer als wenn der Browser jeweils einzelne Dokumente vom
Server anfordern müsste. Ist eine Seite bereits heruntergeladen, so verhält sich die
Applikation deutlich schneller und muss auch nicht mehr unbedingt auf das Netzwerk
zugreifen.
Seiten und Dialoge
JQuery Mobile markiert die Elemente der Seite mit dem Attribut data-role.
Für die Seite: data-role="page"
Für den Kopf: data-role="header"
Für den Inhalt: data-role="content"
Für die Fußzeile: data-role="footer"
Um eine weitere Seite zu erstellen brauchen Sie nur den bestehenden Code durch Kopieren
und Einfügen in das gleiche Dokument einzubauen. Sie müssen nur die ID entsprechend
anpassen. Mit dem DRW geht das natürlich einfacher.
jQuery Mobile - Seite
Abb.: Dialog zum Einbetten einer neuen Seite
Abb.: Entwurfsebene DRW
<div data-role="page" id="page">
<div data-role="header">
<h1>Kopfzeile</h1>
</div>
<div data-role="content">Inhalt</div>
<div data-role="footer">
<h4>Fußzeile</h4>
</div>
</div>
Alle weiteren Seiten bekommen natürlich dann die id="page2" usf.
Mag. Erwin Mayer, 2012
Seite 3/22
jQuery Mobile
Seitenübergänge (Page Trasitions)
JQuery Mobile stellt eine Anzahl von animierten Übergängen zur Verfügung, die beim Wechsel
zwischen zwei Seiten oder der Anzeige von Dialogen benutzt werden können.
Um einen Übergang zu definieren, versehen Sie den entsprechenden Link mit dem Attribut
data-transition.
<a href="#page1" data-transition="fade" data-theme="c" data-icon="arrow-u">Button</a>
Abb.: Eingabeunterstützung durch den DRW
Auf dieser Seite der Dokumentation können Sie die jeweiligen Übergänge testen:
http://jquerymobile.com/demos/1.2.0/#/demos/1.2.0/docs/pages/page-transitions.html
fade
flip
pop
slide
slidedown
slideup
Die Seite wird über dem vorigen Inhalt eingeblendet.
Hier wird die aktuelle Ansicht gedreht, wobei die folgende Ansicht
auf der Rückseite erscheint.
Die neue Seite springt von der Mitte des Ansichtsbereichs
ausgehend, ins Sichtfeld.
Die neue Seite wird von links oder rechts in den Ansichtsbereich
geschoben, wobei der vorige Inhalt entsprechend zur Seite bewegt
wird.
Die neue Seite wird von oben über den aktuellen Inhalt geschoben.
Der vorige Inhalt wird nach oben aus dem Inhaltsbereich
geschoben, während darunter der neue Inhalt sichtbar wird.
Dialog
Abb.: Aufruf Dialog (page1)
Mag. Erwin Mayer, 2012
Seite 4/22
jQuery Mobile
Abb.: Dialog (page2)
<div data-role="page" id="page1">
<div data-role="header">
<h1>Dialog</h1>
</div>
<div data-role="content">Hier können Sie einen Dialog aufrufen
<a href="#page2"
data-rel="dialog"
data-transition="pop"
data-role="button"
data-icon="star">Dialog</a>
</div>
<div data-role="footer">
<h4>Fußzeile</h4>
</div>
</div>
Abb.: Aufruf Dialog (page1)
Dialoge werden entweder – wie hier -mit einem data-rel="dialog" im Link oder mit
einem Container mit data-role="dialog" erzeugt.
<div data-role="page" id="page2">
<div data-role="header">
<h1>Kopf Dialog</h1>
</div>
<div data-role="content">Dies ist der Inhalt eines Dialogs<br>
<a href="#page1" data-role="button" data-icon="back">zurück</a></div>
</div>
Abb.: Dialog (page2)
Titel in mehrseitigen Vorlagen
In mehrseitigen Vorlagen würden alle Seiten denselben Titel bekommen. Sie können mit den
Attribut data-title jedoch einen eigenen Titel für jede jQuery Mobile –Seite definieren
<div data-role="page" id="foo" data-title="Home">
</div>
<div data-role="page1" id="foo" data-title="Impressum">
</div>
Kopfzeile und Fußzeile positionieren
jQuery Mobile kann Toolbars auf drei Arten positionieren:
Standardeinstellung: Die Anordnung richtet sich nach dem Dokumentenfluss. Wenn der
Benutzer durch die Daten scrollt, werden auch die Toolbars aus dem Ansichtsbereich bewegt.
Fixed: Kopf- und Fußzeile werden an oberen bzw. unteren Ansichtsbereich verankert und
bleiben auch sichtbar, wenn der Benutzer durch die Daten scrollt. Wird der Bildschirm
angetippt, so erscheinen die Elemente wieder an ihrer normalen Position im
Dokumentenfluss.
Attribut: data-position="fixed" in Kopf- bzw. Fußzeile
Fullscreen: Kopf- und Fußzeile werden innerhalb des Ansichtsbereichs angezeigt und bleiben
dort verankert, auch wenn der Benutzer scrollt. Wenn der Benutzer den Bildschirm antippt
werden diese Elemente ausgeblendet. Kopf- und Fußzeile werden vom allgemeinen
Dokumentenfluss ausgenommen und dynamisch am oberen bzw. unteren Ende des
Ansichtsbereichs positioniert.
Durchführung:
data-fullscreen="true" im data-role="page" - Element
data-position="fixed
im Kopf- bzw. Fußteil
Mag. Erwin Mayer, 2012
Seite 5/22
jQuery Mobile
Themes und Swatches (Farbschemata)
In jQuery Mobile steht der Begriff Theme für ein einheitliches visuelles Design, das sich aus
sämtlichen Gestaltungsaspekten von Schriftarten über Schattenwürfe bis hin zu Farben
zusammensetzt.
Ein Swatch ist ein einheitliches Farbschema, das sämtliche Farben für hintergründe, Text,
Schattenwürfe, Symbole usw. bestimmt.
Hier ein Link in die Dokumentation:
http://jquerymobile.com/demos/1.2.0/#/demos/1.2.0/docs/api/themes.html
Das Standard-Theme in jQuery Mobile enthält fünf Swatches (genannt a, b, c, d und e).In den
meisten Fällen verwendet jQuery Mobile den Swatch c. Swatch a ist schwarz/weiß, d ist
weicher und Swatch e wird hauptsächlich für Fehlermeldungen verwendet.
Buttons
jQuery Mobile kann aus normalen Formular-Buttons Schaltflächen erzeugen. Hierfür können
Sie input- oder button-Tags verwenden. Auch einfache Links können als Buttons dargestellt
werden, wenn ihnen das Attribut data-role="button" zugewiesen wurde.
Buttons mit Symbolen (data-icon)
JQuery Mobile Icons
Um einen Button mit einem Symbol zu versehen, geben Sie ihm das zusätzliche Attribut
data-icon (z. B. data-icon="arrow-l").
arrow-l
arrow-u
delete
plus
gear
forward
grid
alert
home
arrow-r
arrow-d
check
minus
refresh
back
star
info
search
Inline-Elemente
Standardmäßig orientiert sich die Breite der Buttons an der Breite des Elternelements. Durch
Hinzufügen des Attributs data-inline = "true" lassen sich auch Buttons erstellen, die
nur so breit sind, wie für die Darstellung des Inhalts notwendig ist.
<div data-role="content">
<input type="submit" value="submit" data-inline="true">
<input type="reset" value="reset" data-inline="true">
</div>
Mag. Erwin Mayer, 2012
Seite 6/22
jQuery Mobile
Navigationsbar
Die Navigationsbar besteht aus ein oder mehreren <li>-Elementen in einem Container
data-role="navbar". Sie wird vom DRW nicht unterstützt, ist aber leicht einzugeben.
Abb.: Navigationsbar mit drei Links (mit Icon)
<div data-role="page" id="page1">
<div data-role="content">
<div data-role="navbar" data-iconpos="top">
<ul>
<li>
<a href="#page1" data-transition="fade" data-theme="" data-icon="alert">
Eins
</a>
</li>
<li>
<a href="#page2" data-transition="fade" data-theme="" data-icon="search">
Zwei
</a>
</li>
<li>
<a href="#page3" data-transition="fade" data-theme="" data-icon="arrow-r">
Drei
</a>
</li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="page2">
…
Abb.: Navigationsbar mit drei Links (ohne Icon, mit Default-Theme, Transition: fade)
Mag. Erwin Mayer, 2012
Seite 7/22
jQuery Mobile
Reduzierbarer Block (Akkordeon)
Besteht aus mehreren Blöcken eingepackt in einem Container mit dem Attribut datarole="collapsible-set".
Abb.: reduzierbarer Block
<div data-role="page" id="page1">
<div data-role="header">
<h1>Kopfzeile</h1>
</div>
<div data-role="content">Inhalt
<div data-role="collapsible-set">
<div data-role="collapsible" data-collapsed="false">
<h3>Kopfzeile</h3>
<p>Inhalt</p>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>Kopfzeile</h3>
<p>Inhalt</p>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>Kopfzeile</h3>
<p>Inhalt</p>
</div>
</div>
</div>
<div data-role="footer">
<h4>Fußzeile</h4>
</div>
</div>
beim Start offen
beim Start geschlossen
Blöcke haben ein bestimmtes Aussehen, wenn die Ecken nicht abgerundet erscheinen soll
dann verwenden Sie das Attribut data-inset="false" bei einem Element.
<div data-role="collapsible" data-inset="false">
Mag. Erwin Mayer, 2012
Seite 8/22
jQuery Mobile
Layoutraster
JQuery Mobile enthält einen Satz Layout-Raster, in denen die Elemente präzise in zwei bis
fünf Spalten angeordnet werden können.
Formatiert wurde es mit:
<style>
.content div div {
background-color:#ccc;
height: 50px;
border: 1px solid #333;
margin: 0px
}
</style>
Abb.: Stil zum Formatieren der Blöcke
Abb.: Dialog Layoutraster
<div data-role="page" id="page2">
<div data-role="header">
<h1>Layoutraster</h1>
</div>
<div class="content" data-role="content">Inhalt
<div class="ui-grid-b">
<div class="ui-block-a">Block 1,1</div>
<div class="ui-block-b">Block 1,2</div>
<div class="ui-block-c">Block 1,3</div>
<div class="ui-block-a">Block 2,1</div>
<div class="ui-block-b">Block 2,2</div>
<div class="ui-block-c">Block 2,3</div>
</div>
</div>
<div data-role="footer">
<h4>Fußzeile</h4>
</div>
</div>
Mit Layoutraster können Sie bis zu 5 Spalten definieren, hier wurden drei festgelegt
(ui-block-a, ui-block-b, ui-block-c).
Mag. Erwin Mayer, 2012
Seite 9/22
jQuery Mobile
Listenansicht
Die Listenansicht (Listview) enthält im <ol> oder <ul>-Tag das
Attribut data-role="listview".
Abb.: Dialog Listenansicht
Abb.: Seite mit einfacher Listenansicht
<div data-role="page" id="page">
<div data-role="header">
<h1>Listenansicht</h1>
</div>
<div data-role="content">Inhalt:
<ul data-role="listview" data-inset="true">
<li>
<h3><a href="#page2">zur Seite 2</a> weiterer Text</h3>
<p>Textbeschreibung</p>
</li>
<li>
<h3><a href="#page3">Seite 3</a></h3>
</li>
<li>
<h3><a href="#page4">Seite 4</a></h3>
</li>
</ul>
</div>
<div data-role="footer">
<h4>jQuery - Listenansicht</h4>
</div>
</div>
Mag. Erwin Mayer, 2012
Seite 10/22
jQuery Mobile
Listenauswahl (Filter)
Aus einer gegebenen Liste können Sie mit jQuery Mobile sehr einfach Daten filtern.
Dazu müssen Sie natürlich im <ol> oder <ul>-Tag das Attribut data-role="listview"
setzen.
Weiters ist das Attribut data-filter="true" zu setzen.
Auch den Platzhalter für den Datenfilter können Sie bestimmen(Standard: Filter Items…):
data-filter-placeholder="Bitte Suchbegriff eingeben...".
Wenn Sie das Attribut "data-autodividers="true" setzen bekommen Sie automatisch
eine alphabetische Trennung.
data-filter-placeholder="Bitte
Suchbegriff eingeben..."
"data-autodividers="true"
Darüber hinaus können Sie beim jeweiligen Listenelement <li> einen an anderen Filtertext
eingeben. Hier data-filtertext="Chef".
<div data-role="page" id="page">
<div data-role="header">
<h1>Listenauswahl</h1>
</div>
<div data-role="content">
<p>Namensliste:</p>
<ul data-role="listview" data-filter="true" data-filter-placeholder="Bitte
Suchbegriff eingeben..." data-autodividers="true">
<li><a href="#">Bauer Anton</a></li>
<li><a href="#">Bauer Franz</a></li>
<li><a href="#">Berger Alois</a></li>
<li data-filtertext="Chef"><a href="#">Boss Hugo</a></li>
<li><a href="#">Mayer Erwin</a></li>
<li><a href="#">Mayer Franz</a></li>
<li><a href="#">Mayer Klaus</a></li>
</ul>
</div>
</div>
Mag. Erwin Mayer, 2012
Seite 11/22
jQuery Mobile
Verschachtelte Liste
Abb.: erste Ansicht
Abb.: zweite Ansicht
Abb.: letzte Ansicht
<div data-role="page" id="page">
<div data-role="header">
<h1>Kopfzeile</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li><a href="#">Bäume</a>
<ul>
<li><a href="#">Laubbäume</a>
<ul>
<li><a href="#">Eiche</a></li>
<li><a href="#">Buche</a></li>
<li><a href="#">Birke</a></li>
</ul>
</li>
<li><a href="#">Nadelbäume</a>
<ul>
<li><a href="#">Tanne</a></li>
<li><a href="#">Fichte</a></li>
<li><a href="#">Zirbe</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
Mag. Erwin Mayer, 2012
Seite 12/22
jQuery Mobile
Geteilte Liste
divider
list-divider
Listenteiler durch entweder
<li data-role="divider">Laubbäume</li>
oder
<li data-role="list-divider">Nadelbäume</li>
<div data-role="page" id="page">
<div data-role="header">
<h1>Geteilte Liste</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li data-role="divider">Laubbäume</li>
<li><a href="#">Eiche</a></li>
<li><a href="#">Buche</a></li>
<li><a href="#">Birke</a></li>
<li data-role="list-divider">Nadelbäume</a>
<li><a href="#">Tanne</a></li>
<li><a href="#">Fichte</a></li>
<li><a href="#">Zirbe</a></li>
</ul>
</div>
<div data-role="footer">
<h4>Fußzeile</h4>
</div>
</div>
Mag. Erwin Mayer, 2012
Seite 13/22
jQuery Mobile
Fortgeschrittene Listenansicht
Zeigt geteilte Listenansicht und weitere
Möglichkeiten:
Abb.: Dialog Listenansicht
Man kann folgende Elemente bestimmen:
Textbeschreibung
Textblase für Zähler (Count Bubbles)
Aside
Trennschaltfläche, wenn ja, dann mit welcher
Symbolschaltfläche
ein zusätzlicher Absatz unter dem Link
eher für numerische Daten geeignet
zusätzlicher Inhalt
zweiter Link
normaler Link
zusätzlicher Link
Symbol
Abb.: Seite mit erweiterter Listenansicht
<div data-role="page" id="page2">
<div data-role="header">
<h1>Listenansicht 2</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-split-icon="arrow-r">
<li>
<h3><a href="#">Seite</a></h3>
<p>Lorem ipsum</p>
<span class="ui-li-count">17</span><a href="#">Standard</a>
<p class="ui-li-aside">Aside</p>
</li>
<li>
<h3><a href="#">Seitenlink</a></h3>
<p>Textbeschreibung</p>
<span class="ui-li-count">Zähler</span><a href="#">Standard</a>
<p class="ui-li-aside">Gefundene Einträge</p>
</li>
</ul>
</div>
<div data-role="footer">
<h4>weitere Listenansicht</h4>
</div>
</div>
Mag. Erwin Mayer, 2012
Seite 14/22
jQuery Mobile
Dateneingabe
Input-Feld
Passwort-Feld
Textfeld
Möglichkeiten:
Tastatur wird angepasst bei:
input type=”number”
input type=”email”
input type=”url”
Suchfelder:
input type=”search” siehe auch Suche in Listen
input type="password"
<div data-role="page" id="page">
<div data-role="header">
<h1>Dateneingabe</h1>
</div>
<div data-role="content">
<form action="zeigwerte.php" method="post">
<p>
<label for="textinput">normale Texteingabe:</label>
<input type="text" name="textinput" id="textinput" value="" />
</p>
<p>
<label for="textinput2">Such-Texteingabe:</label>
<input type="search" name="textinput2" id="textinput2" value="" /></p>
<p>
<label for="passwordinput">Kennworteingabe:</label>
<input type="password" name="passwordinput" id="passwordinput" value=""
/>
</p>
<p> 
<label for="textarea">Textbereich:</label>
<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
</p>
<p><input type="submit" name="button" id="button" value="Senden"></p>
</form>
</div>
</div>
Mag. Erwin Mayer, 2012
Seite 15/22
jQuery Mobile
Kontrollkästchen
Abb.:Dialog für vertikale Anordnung der Kontrollkästchen
Abb.:Dialog für horizontale Anordnung der Kontrollkästchen
<div data-role="page" id="page">
<div data-role="header">
<h1>Kontrollkästchen</h1>
</div>
<div data-role="content">Inhalt:
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>vertikale Kontrollkästchen</legend>
<input type="checkbox" name="checkbox1" id="checkbox1_0" class="custom" value="" />
<label for="checkbox1_0">Apfel</label>
<input type="checkbox" name="checkbox1" id="checkbox1_1" class="custom" value="" />
<label for="checkbox1_1">Birne</label>
<input type="checkbox" name="checkbox1" id="checkbox1_2" class="custom" value="" />
<label for="checkbox1_2">Banane</label>
</fieldset></div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>horizontale Kontrollkästchen</legend>
<input type="checkbox" name="checkbox2" id="checkbox2_0" class="custom" value="" />
<label for="checkbox2_0">Wind</label>
<input type="checkbox" name="checkbox2" id="checkbox2_1" class="custom" value="" />
<label for="checkbox2_1">Regen</label>
<input type="checkbox" name="checkbox2" id="checkbox2_2" class="custom" value="" />
<label for="checkbox2_2">Kälte</label>
</fieldset>
</div>
</div>
<div data-role="footer">
<h4>Fußzeile</h4>
Mag. Erwin Mayer, 2012
Seite 16/22
jQuery Mobile
Gruppierte Buttons
Sie können mehrere Buttons ein einer Spalte oder Zeile zusammenfassen, wenn Sie die
Buttons mit einem Container-Element (z. B. div) umgeben und dieses mit dem Attribut
data-role="controlgroup" versehen.
Standardmäßig werden vertikale Listen formatiert, wenn Sie jedoch dem Container-Element
zusätzlich das Attribut data-type="horizontal" geben, werden die Buttons als InlineElement dargestellt.
Radio-Buttons
Abb.: Radio-Buttons
<div data-role="page" id="page">
<div data-role="header">
<h1>Radio-Buttons</h1>
</div>
<div data-role="content">Bitte wählen Sie:
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Möglichkeiten:</legend>
<input type="radio" name="radio1" id="radio1_0" value="ja" checked />
<label for="radio1_0">ja</label>
<input type="radio" name="radio1" id="radio1_1" value="nein" />
<label for="radio1_1">nein</label>
<input type="radio" name="radio1" id="radio1_2" value="vielleicht" />
<label for="radio1_2">vielleicht</label>
</fieldset>
</div>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>horizontale Option</legend>
<input type="radio" name="radio2" id="radio2_0" value="" checked />
<label for="radio2_0">eins</label>
<input type="radio" name="radio2" id="radio2_1" value="" />
<label for="radio2_1">zwei</label>
<input type="radio" name="radio2" id="radio2_2" value="" />
<label for="radio2_2">drei</label>
</fieldset>
</div>
</div>
Mag. Erwin Mayer, 2012
Seite 17/22
jQuery Mobile
Schalter (Flip Toggles) Wechselumschalter
Dieser Wechselschalter wird durch <select> mit data-role="slider" und zwei
<option>-Elementen dargestellt.
Abb.: Wechselschalter
<div data-role="page" id="page">
<div data-role="header">
<h1>Schalter</h1>
</div>
<div data-role="content">Inhalt:
<div data-role="fieldcontain">
<label for="flipswitch">OPTION:</label>
<select name="flipswitch" id="flipswitch" data-role="slider">
<option value="off">Aus</option>
<option value="on">Ein</option>
</select>
</div>
</div>
</div>
weitere Möglichkeiten (Theming,Mini-Form,…) siehe Handbuch:
http://jquerymobile.com/demos/1.2.0/#/demos/1.2.0/docs/forms/switch/
Schieberegler (Slider)
Schieberegler sind <input>-Felder mit type="range"
Abb.: Schieberegler
<div data-role="fieldcontain">
<label for="slider">Wert:</label>
<input type="range" name="slider" id="slider" value="25" min="1" max="100" />
</div>
weitere Möglichkeiten:
Man kann die Werte stufenweise inkrementieren (hier: 50) durch step="50".
Auch die Sliderspur kann man einfärben: data-highlight="true"
<div data-role="content"><label for="slider-step">Bitte wählen:</label>
<input type="range" name="slider-step" id="slider-step" value="150" min="0" max="500"
step="50" data-highlight="true"/>
</div>
Mag. Erwin Mayer, 2012
Seite 18/22
jQuery Mobile
Schaltfläche
Hier werden Schaltflächen für Hyperlinks verwendet (data-role="controlgroup").
Abb.: Dialog Schaltflächen für Hyperlinks
<div data-role="page" id="page1">
<div data-role="header">
<h1>Schaltflächen</h1>
</div>
<div data-role="content">Hyperlink, gruppiert, vertikal, <br>
Icon - Standardposition
<div data-role="controlgroup">
<a href="#page2" data-role="button" data-icon="forward">Seite 2</a>
<a href="#page3" data-role="button" data-icon="forward">Seite 3 </a>
<a href="#page4" data-role="button" data-icon="forward">Seite 4</a>
</div>
</div>
</div>
Abb.: Dialog Schaltflächen
<div data-role="page" id="page2">
<div data-role="header">
<h1>Schaltflächen</h1>
</div>
<div data-role="content">Schaltfläche, gruppiert, horizontal
<div data-role="controlgroup" data-type="horizontal">
<button data-icon="gear">Schaltfläche</button>
<button data-icon="gear">Schaltfläche</button>
</div>
</div>
</div>
Mag. Erwin Mayer, 2012
Seite 19/22
jQuery Mobile
Abb.: Dialog Schaltflächen
<div data-role="page" id="page3">
<div data-role="header">
<h1>Schaltflächen</h1>
</div>
<div data-role="content">Eingabe, Schaltfläche, inline
<div data-inline="true">
<input type="button" value="Schaltfläche" data-inline="true" data-icon="star" />
<input type="button" value="Schaltfläche" data-inline="true" data-icon="star" />
<input type="button" value="Schaltfläche" data-inline="true" data-icon="star" />
</div>
</div>
</div>
Abb.: Dialog Schaltflächen
<div data-role="content">Inhalt
<input type="submit" value="Senden" data-icon="alert" data-iconpos="left" />
</div>
Mag. Erwin Mayer, 2012
Seite 20/22
jQuery Mobile
Auswahlmenü
Alle <select>-Elemente werden hier unterstützt.
Abb.: Auswahlmenü bei der Auswahl
Abb.: Auswahlmenü nach der Auswahl
<body>
<div data-role="page" id="page">
<div data-role="header">
<h1>Auswahlmenü</h1>
</div>
<div data-role="content">Bitte wählen Sie aus:
<div data-role="fieldcontain">
<label for="selectmenu" class="select">Optionen:</label>
<select name="selectmenu" id="selectmenu">
<option value="option1">OPTION 1</option>
<option value="option2">OPTION 2</option>
<option value="option3">OPTION 3</option>
</select>
</div>
</div>
<div data-role="footer">
<h4>jQuery Mobile Select Menu</h4>
</div>
</div>
</body>
Referenz der data-Attribute
In der Referenz können Sie die Standardeigenschaften und weitere Möglichkeiten der dataAtribute erforschen:
http://jquerymobile.com/demos/1.2.0/docs/api/data-attributes.html
Mag. Erwin Mayer, 2012
Seite 21/22
jQuery Mobile
Codiqa (drag-and-drop UI builder)
Befindet sich auf der Seite http://jquerymobile.com/ und erlaubt den Code für jQuery Mobile
– Seiten per drag and drop zu erzeugen(BUILD).
Sie können jederzeit den Code testen (TEST).
Den erzeugten Code (jQuery Mobile – Seiten) können Sie über die Zwischenablage in eine
HTML-Seite einfügen oder gezippt herunterladen(Download HTML).
ThemeRoller für jQuery Mobile
Auch für jQuery Mobile gibt es eine individuelle Anpassungsmöglichkeit
http://jquerymobile.com/themeroller
Mag. Erwin Mayer, 2012
Seite 22/22
jQuery Mobile