JavaScript-Framework-jQuery jQuery Mobile - erwin … · Mag. Erwin Mayer, 2012 Seite 4/22 jQuery...

22
Mag. Erwin Mayer, Dezember 2012 VBS Akademiestraße JavaScript-Framework-jQuery jQuery Mobile Mobile Seiten mit HTML5 und CSS3 entwickeln Unterstützung durch Dreamweaver codiqua drag and drop UI Builder jQuery Mobile ............................................................................................... 2 Download:.............................................................................................. 2 JQuery Mobile – Dateien im DRW festlegen ....................................................... 2 Symbolleiste jQuery Mobile ......................................................................... 3 jQuery Mobile - Seite ............................................................................... 3 Seitenübergänge (Page Trasitions) ...................................................................... 4 Dialog ........................................................................................................ 4 Titel in mehrseitigen Vorlagen ........................................................................ 5 Kopfzeile und Fußzeile positionieren.................................................................... 5 Themes und Swatches (Farbschemata) ................................................................. 6 Buttons ...................................................................................................... 6 Buttons mit Symbolen (data-icon) ....................................................................... 6 Inline-Elemente ............................................................................................ 6 Navigationsbar .............................................................................................. 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

Transcript of JavaScript-Framework-jQuery jQuery Mobile - erwin … · Mag. Erwin Mayer, 2012 Seite 4/22 jQuery...

Page 1: JavaScript-Framework-jQuery jQuery Mobile - erwin … · Mag. Erwin Mayer, 2012 Seite 4/22 jQuery Mobile Seitenübergänge (Page Trasitions) JQuery Mobile stellt eine Anzahl von animierten

Mag. Erwin Mayer, Dezember 2012 VBS Akademiestraße

JavaScript-Framework-jQuery

jQuery Mobile Mobile Seiten mit HTML5 und CSS3 entwickeln

Unterstützung durch Dreamweaver

codiqua drag and drop UI Builder

jQuery Mobile ............................................................................................... 2 Download:.............................................................................................. 2 JQuery Mobile – Dateien im DRW festlegen ....................................................... 2 Symbolleiste jQuery Mobile ......................................................................... 3

jQuery Mobile - Seite ............................................................................... 3 Seitenübergänge (Page Trasitions) ...................................................................... 4 Dialog ........................................................................................................ 4

Titel in mehrseitigen Vorlagen ........................................................................ 5 Kopfzeile und Fußzeile positionieren.................................................................... 5 Themes und Swatches (Farbschemata) ................................................................. 6 Buttons ...................................................................................................... 6 Buttons mit Symbolen (data-icon) ....................................................................... 6 Inline-Elemente ............................................................................................ 6 Navigationsbar .............................................................................................. 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

Page 2: JavaScript-Framework-jQuery jQuery Mobile - erwin … · Mag. Erwin Mayer, 2012 Seite 4/22 jQuery Mobile Seitenübergänge (Page Trasitions) JQuery Mobile stellt eine Anzahl von animierten

Mag. Erwin Mayer, 2012 Seite 2/22 jQuery Mobile

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

1.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)

Page 3: JavaScript-Framework-jQuery jQuery Mobile - erwin … · Mag. Erwin Mayer, 2012 Seite 4/22 jQuery Mobile Seitenübergänge (Page Trasitions) JQuery Mobile stellt eine Anzahl von animierten

Mag. Erwin Mayer, 2012 Seite 3/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.

Page 4: JavaScript-Framework-jQuery jQuery Mobile - erwin … · Mag. Erwin Mayer, 2012 Seite 4/22 jQuery Mobile Seitenübergänge (Page Trasitions) JQuery Mobile stellt eine Anzahl von animierten

Mag. Erwin Mayer, 2012 Seite 4/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 Die Seite wird über dem vorigen Inhalt eingeblendet.

flip Hier wird die aktuelle Ansicht gedreht, wobei die folgende Ansicht auf der Rückseite erscheint.

pop Die neue Seite springt von der Mitte des Ansichtsbereichs ausgehend, ins Sichtfeld.

slide Die neue Seite wird von links oder rechts in den Ansichtsbereich geschoben, wobei der vorige Inhalt entsprechend zur Seite bewegt wird.

slidedown Die neue Seite wird von oben über den aktuellen Inhalt geschoben.

slideup Der vorige Inhalt wird nach oben aus dem Inhaltsbereich geschoben, während darunter der neue Inhalt sichtbar wird.

Dialog

Abb.: Aufruf Dialog (page1)

Page 5: JavaScript-Framework-jQuery jQuery Mobile - erwin … · Mag. Erwin Mayer, 2012 Seite 4/22 jQuery Mobile Seitenübergänge (Page Trasitions) JQuery Mobile stellt eine Anzahl von animierten

Mag. Erwin Mayer, 2012 Seite 5/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

Page 6: JavaScript-Framework-jQuery jQuery Mobile - erwin … · Mag. Erwin Mayer, 2012 Seite 4/22 jQuery Mobile Seitenübergänge (Page Trasitions) JQuery Mobile stellt eine Anzahl von animierten

Mag. Erwin Mayer, 2012 Seite 6/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").

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>

arrow-l

arrow-u

delete

plus

gear

forward

grid

alert

home

arrow-r

arrow-d

check

minus

refresh

back

star

info

search

Page 7: JavaScript-Framework-jQuery jQuery Mobile - erwin … · Mag. Erwin Mayer, 2012 Seite 4/22 jQuery Mobile Seitenübergänge (Page Trasitions) JQuery Mobile stellt eine Anzahl von animierten

Mag. Erwin Mayer, 2012 Seite 7/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)

Page 8: JavaScript-Framework-jQuery jQuery Mobile - erwin … · Mag. Erwin Mayer, 2012 Seite 4/22 jQuery Mobile Seitenübergänge (Page Trasitions) JQuery Mobile stellt eine Anzahl von animierten

Mag. Erwin Mayer, 2012 Seite 8/22 jQuery Mobile

Reduzierbarer Block (Akkordeon) Besteht aus mehreren Blöcken eingepackt in einem Container mit dem Attribut data-role="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>

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

beim Start offen

beim Start geschlossen

Page 9: JavaScript-Framework-jQuery jQuery Mobile - erwin … · Mag. Erwin Mayer, 2012 Seite 4/22 jQuery Mobile Seitenübergänge (Page Trasitions) JQuery Mobile stellt eine Anzahl von animierten

Mag. Erwin Mayer, 2012 Seite 9/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).

Page 10: JavaScript-Framework-jQuery jQuery Mobile - erwin … · Mag. Erwin Mayer, 2012 Seite 4/22 jQuery Mobile Seitenübergänge (Page Trasitions) JQuery Mobile stellt eine Anzahl von animierten

Mag. Erwin Mayer, 2012 Seite 10/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>

Page 11: JavaScript-Framework-jQuery jQuery Mobile - erwin … · Mag. Erwin Mayer, 2012 Seite 4/22 jQuery Mobile Seitenübergänge (Page Trasitions) JQuery Mobile stellt eine Anzahl von animierten

Mag. Erwin Mayer, 2012 Seite 11/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.

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>

"data-autodividers="true"

data-filter-placeholder="Bitte

Suchbegriff eingeben..."

Page 12: JavaScript-Framework-jQuery jQuery Mobile - erwin … · Mag. Erwin Mayer, 2012 Seite 4/22 jQuery Mobile Seitenübergänge (Page Trasitions) JQuery Mobile stellt eine Anzahl von animierten

Mag. Erwin Mayer, 2012 Seite 12/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>

Page 13: JavaScript-Framework-jQuery jQuery Mobile - erwin … · Mag. Erwin Mayer, 2012 Seite 4/22 jQuery Mobile Seitenübergänge (Page Trasitions) JQuery Mobile stellt eine Anzahl von animierten

Mag. Erwin Mayer, 2012 Seite 13/22 jQuery Mobile

Geteilte Liste

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>

divider

list-divider

Page 14: JavaScript-Framework-jQuery jQuery Mobile - erwin … · Mag. Erwin Mayer, 2012 Seite 4/22 jQuery Mobile Seitenübergänge (Page Trasitions) JQuery Mobile stellt eine Anzahl von animierten

Mag. Erwin Mayer, 2012 Seite 14/22 jQuery Mobile

Fortgeschrittene Listenansicht Zeigt geteilte Listenansicht und weitere Möglichkeiten:

Abb.: Dialog Listenansicht

Man kann folgende Elemente bestimmen: Textbeschreibung ein zusätzlicher Absatz unter dem Link

Textblase für Zähler (Count Bubbles) eher für numerische Daten geeignet

Aside zusätzlicher Inhalt Trennschaltfläche, wenn ja, dann mit welcher Symbolschaltfläche

zweiter Link

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>

Symbol

zusätzlicher Link

normaler Link

Page 15: JavaScript-Framework-jQuery jQuery Mobile - erwin … · Mag. Erwin Mayer, 2012 Seite 4/22 jQuery Mobile Seitenübergänge (Page Trasitions) JQuery Mobile stellt eine Anzahl von animierten

Mag. Erwin Mayer, 2012 Seite 15/22 jQuery Mobile

Dateneingabe

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>&nbsp;

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

Input-Feld Passwort-Feld Textfeld

Page 16: JavaScript-Framework-jQuery jQuery Mobile - erwin … · Mag. Erwin Mayer, 2012 Seite 4/22 jQuery Mobile Seitenübergänge (Page Trasitions) JQuery Mobile stellt eine Anzahl von animierten

Mag. Erwin Mayer, 2012 Seite 16/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>

Page 17: JavaScript-Framework-jQuery jQuery Mobile - erwin … · Mag. Erwin Mayer, 2012 Seite 4/22 jQuery Mobile Seitenübergänge (Page Trasitions) JQuery Mobile stellt eine Anzahl von animierten

Mag. Erwin Mayer, 2012 Seite 17/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 Inline-

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

Page 18: JavaScript-Framework-jQuery jQuery Mobile - erwin … · Mag. Erwin Mayer, 2012 Seite 4/22 jQuery Mobile Seitenübergänge (Page Trasitions) JQuery Mobile stellt eine Anzahl von animierten

Mag. Erwin Mayer, 2012 Seite 18/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>

Page 19: JavaScript-Framework-jQuery jQuery Mobile - erwin … · Mag. Erwin Mayer, 2012 Seite 4/22 jQuery Mobile Seitenübergänge (Page Trasitions) JQuery Mobile stellt eine Anzahl von animierten

Mag. Erwin Mayer, 2012 Seite 19/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>

Page 20: JavaScript-Framework-jQuery jQuery Mobile - erwin … · Mag. Erwin Mayer, 2012 Seite 4/22 jQuery Mobile Seitenübergänge (Page Trasitions) JQuery Mobile stellt eine Anzahl von animierten

Mag. Erwin Mayer, 2012 Seite 20/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>

Page 21: JavaScript-Framework-jQuery jQuery Mobile - erwin … · Mag. Erwin Mayer, 2012 Seite 4/22 jQuery Mobile Seitenübergänge (Page Trasitions) JQuery Mobile stellt eine Anzahl von animierten

Mag. Erwin Mayer, 2012 Seite 21/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 data-Atribute erforschen: http://jquerymobile.com/demos/1.2.0/docs/api/data-attributes.html

Page 22: JavaScript-Framework-jQuery jQuery Mobile - erwin … · Mag. Erwin Mayer, 2012 Seite 4/22 jQuery Mobile Seitenübergänge (Page Trasitions) JQuery Mobile stellt eine Anzahl von animierten

Mag. Erwin Mayer, 2012 Seite 22/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