Jon Reid, jQuery Mobile. Plattformunabhängige mobile ... · Jon Reid, jQuery Mobile. Plattformunabhängige mobile Anwendungen., O´Reilly, ISBN 9783868991581 D3kjd3Di38lk323nnm

Jon Reid, jQuery Mobile. Plattformunabhängige mobile Anwendungen., O´Reilly, ISBN 9783868991581

D3kjd3Di38lk323nnm

Inhalt

Vorwort . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . IX

1 Willkommen bei jQuery Mobile. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1Überblick über die jQuery Mobile-Bibliothek . . . . . . . . . . . . . . . . . . . . . . . . . . 1

Wie jQuery Mobile funktioniert . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

Erstellen Sie Ihre erste jQuery Mobile-Applikation. . . . . . . . . . . . . . . . . . . . . . . 2

Hinter den Kulissen: der spezielle Selektor jqmData() . . . . . . . . . . . . . . . . . . 7

2 Applikationsstruktur und Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9Seiten. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

Interne Seiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

Externe Seiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

Hinter den Kulissen: Seiteninitialisierung in jQuery Mobile . . . . . . . . . . . . . . 15

Events zum Zeigen und Verbergen einer Seite . . . . . . . . . . . . . . . . . . . . . . . . 17

Dialoge . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

Navigation und Browserverlauf . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

Übergänge . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

Hinter den Kulissen: Animationen in einer jQuery Mobile-Applikation. . . . . . 24

3 Seitenelemente. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27Hinter den Kulissen: jQuery-Plugins und Widgets . . . . . . . . . . . . . . . . . . . . . . . 27

Listenansichten. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

Einfache Listenansicht . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

Fortgeschrittene Listenansichten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

Hinter den Kulissen: Die Darstellung einer Liste aktualisieren . . . . . . . . . . . . 41

Toolbars . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41

Navigationselemente. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41

Kopfteil und Fußzeile positionieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45

| V

Buttons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46

Gruppierte Buttons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48

Buttons mit Symbolen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49

Formularelemente. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51

Auf Formularelemente mit JavaScript zugreifen. . . . . . . . . . . . . . . . . . . . . . . 51

Ankreuzfelder und Radio-Buttons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52

Schalter (Flip Toggles). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54

Eingabefelder und Textbereiche (textarea) . . . . . . . . . . . . . . . . . . . . . . . . . . 55

Suchfelder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56

Auswahlmenüs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57

Schieberegler . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61

Layout-Raster . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63

4 Themes für jQuery Mobile. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67Themes und Swatches (Farbschemata) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67

Hinter den Kulissen: Swatches anpassen. . . . . . . . . . . . . . . . . . . . . . . . . . . . 76

Themes für Elemente in der Listenansicht. . . . . . . . . . . . . . . . . . . . . . . . . . . 80

5 Die jQuery Mobile-API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81jQuery Mobile-Methoden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81

changePage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81

pageLoading. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82

silentScroll . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82

addResolutionBreakpoints. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83

Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83

Events für die Verwendung der Gestensteuerung. . . . . . . . . . . . . . . . . . . . . . 83

Initialisierungs-Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86

Events zum Zeigen und Verbergen von Seiten . . . . . . . . . . . . . . . . . . . . . . . . 86

Scroll-Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87

Events beim Ändern der Ausrichtung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87

API für bedarfsgerechtes (responsive) Layout . . . . . . . . . . . . . . . . . . . . . . . . . . 87

CSS-Selektoren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88

jQuery Mobile konfigurieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91

Verfügbare Optionen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91

Optionen per mobileinit ändern. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92

Hinter den Kulissen: Namensräume für data-Attribute . . . . . . . . . . . . . . . . . 93

VI | Inhalt


6 jQuery Mobile in Aktion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95Seiten der Applikation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95

Die Applikation initialisieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99

Die Methode initMainPage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100

Die Methode initSettings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104

Die Methode initDetailPage. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105

Fehlerdialog . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105

jqmTweet: Erster Versuch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106

Verbesserungen der Schnittstelle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108

Anpassungen am CSS-Code. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108

Anpassungen an der Interaktion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109

Allgemeine Vorgehensweise . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114

Index. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115

Inhalt | VII


Dies ist ein A

uszug aus dem B

uch "jQuery M

obile", ISB

N 978-3-86899-158-1

http://ww

w.oreilly.de/catalog/jquerym

obger/ D

ieser Auszug unterliegt dem

Urheberrecht. ©

O’R

eilly Verlag 2011

KAPITEL 4

Themes für jQuery Mobile

jQuery Mobile enthält ein ausgefeiltes Themes-System. Mit dem Augenmerk auf mobilenAnwendungen wird ausgiebig Gebrauch von den verschiedenen CSS3-Möglichkeitengemacht, um beispielsweise abgerundete Ecken, Schattenwürfe und Farbverläufe zu er-zeugen. Hierdurch bleibt jQuery Mobile schlank und trotzdem leicht erweiterbar.

Das Themes-Framework trennt die farblichen Konzepte von den Standard-Layout-Kon-zepten wie Innenabstand und Außenmaße. Dadurch ist es möglich, Ersteres zu ändern,ohne dabei auch an Zweiteres Hand anlegen zu müssen. Hierdurch lassen sich dieeinzelnen Teile des Frameworks leicht miteinander kombinieren, wodurch ohne vielAufwand eine Vielzahl verschiedener Designs möglich wird.

Themes und Swatches (Farbschemata)In jQuery Mobile steht der Begriff Theme für ein einheitliches visuelles Design, das auf diegesamte Benutzerschnittstelle angewandt wird. In der Praxis definiert ein Theme sämtli-che Gestaltungsaspekte von Schriftarten über Schattenwürfe bis hin zu Farben.

Durch die Trennung von Layout und Farbe bzw. Oberfläche kann ein jQuery Themeverschiedene sogenannte Swatches besitzen. Ein Swatch ist ein einheitliches Farbschema,das sämtliche Farben für Hintergründe, Text, Schattenwürfe, Symbole etc. bestimmt.

Das Standard-Theme in jQuery Mobile enthält fünf Swatches (genannt a, b, c, d und e).Jeder Swatch betont verschiedene visuelle Aspekte. Hierbei ist Swatch a visuell amempathischsten (normalerweise weißer Text auf schwarzem Hintergrund), währendSwatch d deutlich »weicher« ist. Swatch e wird hauptsächlich für Fehlermeldungen ver-wendet.

In den meisten Fällen verwendet jQuery Mobile den Swatch c. Allerdings lässt sich überdas Attribut data-theme leicht ein anderer Swatch angeben. Das Attribut kann auf einbeliebiges Element angewandt werden, das von jQuery Mobile erweitert wurde. DieÄnderungen werden automatisch an die enthaltenen Kindelemente weitergegeben (sieheBeispiel 4-1). Die verschiedenen Auswirkungen sehen Sie in den Abbildungen 4-1, 4-2,4-3, 4-4, 4-5 und 4-6.

| 67

Dies ist ein A

uszug aus dem B

uch "jQuery M

obile", ISB

N 978-3-86899-158-1

http://ww


obger/ D


Urheberrecht. ©

O’R

eilly Verlag 2011

Beispiel 4-1: Programm zum Betrachten verschiedener Swatches

<section id="swatch-default" data-role="page"><header data-role="header"><h1>jQuery Mobile</h1></header><div class="content" data-role="content"><h3>Default Swatch</h3><ul data-role="listview">

<li><a href="#swatch-a">View swatch a</a></li><li><a href="#swatch-b">View swatch b</a></li><li><a href="#swatch-c">View swatch c</a></li><li><a href="#swatch-d">View swatch d</a></li><li><a href="#swatch-e">View swatch e</a></li>

</ul><p>Some sample form elements and buttons:</p><form action="formprocessor.php" method="post">

<div data-role="fieldcontain"><label for="select-restaurants">Select Your Restaurants:</label><select id="select-restaurants"

name="select-restaurants"data-native-menu="false"multiple="multiple">

<option value="choose" data-placeholder="true">Choose...</option><optgroup label="French">

<option value="lecentral">Le Central</option><option value="bistrovandome">Bistro Vandome</option><option value="antoines">Antoine's</option>

</optgroup><optgroup label="Cajun">

<option value="bayoubobs">Bayou Bob's</option><option value="pappadeaux" disabled="disabled">Pappadeaux</option><option value="luciles">Lucile's</option>

</optgroup></select>

</div></form><div data-role="controlgroup" data-type="horizontal">

<a href="#" data-role="button">Yes</a><a href="#" data-role="button">No</a><a href="#" data-role="button">Cancel</a>

</div></div></div><footer data-role="footer"><h1>O'Reilly</h1></footer>

</section>

<section id="swatch-a" data-role="page" data-theme="a"><header data-role="header"><h1>jQuery Mobile</h1></header><div class="content" data-role="content"><h3>Swatch A</h3><ul data-role="listview">

<li><a href="#swatch-default">View default swatch</a></li><li><a href="#swatch-b">View swatch b</a></li><li><a href="#swatch-c">View swatch c</a></li><li><a href="#swatch-d">View swatch d</a></li><li><a href="#swatch-e">View swatch e</a></li>

</ul><p>Some sample form elements and buttons:</p>

68 | Kapitel 4: Themes für jQuery Mobile


Dies ist ein A

uszug aus dem B

uch "jQuery M

obile", ISB

N 978-3-86899-158-1

http://ww


obger/ D


Urheberrecht. ©

O’R

eilly Verlag 2011

<form action="formprocessor.php" method="post"><div data-role="fieldcontain">

<label for="select-restaurants">Select Your Restaurants:</label><select id="select-restaurants"










</section>

<section id="swatch-b" data-role="page" data-theme="b"><header data-role="header"><h1>jQuery Mobile</h1></header><div class="content" data-role="content"><h3>Swatch B</h3><ul data-role="listview">

<li><a href="#swatch-default">View default swatch</a></li><li><a href="#swatch-a">View swatch a</a></li><li><a href="#swatch-c">View swatch c</a></li><li><a href="#swatch-d">View swatch d</a></li><li><a href="#swatch-e">View swatch e</a></li>






</optgroup>

Themes und Swatches (Farbschemata) | 69

Dies ist ein A

uszug aus dem B

uch "jQuery M

obile", ISB

N 978-3-86899-158-1

http://ww


obger/ D


Urheberrecht. ©

O’R

eilly Verlag 2011

<optgroup label="Cajun"><option value="bayoubobs">Bayou Bob's</option><option value="pappadeaux" disabled="disabled">Pappadeaux</option><option value="luciles">Lucile's</option>





</section>

<section id="swatch-c" data-role="page" data-theme="c"><header data-role="header"><h1>jQuery Mobile</h1></header><div class="content" data-role="content"><h3>Swatch C</h3><ul data-role="listview">

<li><a href="#swatch-default">View default swatch</a></li><li><a href="#swatch-a">View swatch a</a></li><li><a href="#swatch-b">View swatch b</a></li><li><a href="#swatch-d">View swatch d</a></li><li><a href="#swatch-e">View swatch e</a></li>











</div>



Dies ist ein A

uszug aus dem B

uch "jQuery M

obile", ISB

N 978-3-86899-158-1

http://ww


obger/ D


Urheberrecht. ©

O’R

eilly Verlag 2011

</div></div><footer data-role="footer"><h1>O'Reilly</h1></footer>

</section>

<section id="swatch-d" data-role="page" data-theme="d"><header data-role="header"><h1>jQuery Mobile</h1></header><div class="content" data-role="content"><h3>Swatch D</h3><ul data-role="listview">

<li><a href="#swatch-default">View default swatch</a></li><li><a href="#swatch-a">View swatch a</a></li><li><a href="#swatch-b">View swatch b</a></li><li><a href="#swatch-c">View swatch c</a></li><li><a href="#swatch-e">View swatch e</a></li>












</section>

<section id="swatch-e" data-role="page" data-theme="e"><header data-role="header"><h1>jQuery Mobile</h1></header><div class="content" data-role="content"><h3>Swatch E</h3><ul data-role="listview">

<li><a href="#swatch-default">View default swatch</a></li><li><a href="#swatch-a">View swatch a</a></li><li><a href="#swatch-b">View swatch b</a></li>


Dies ist ein A

uszug aus dem B

uch "jQuery M

obile", ISB

N 978-3-86899-158-1

http://ww


obger/ D


Urheberrecht. ©

O’R

eilly Verlag 2011

<li><a href="#swatch-c">View swatch c</a></li><li><a href="#swatch-d">View swatch d</a></li>












</section>



Dies ist ein A

uszug aus dem B

uch "jQuery M

obile", ISB

N 978-3-86899-158-1

http://ww


obger/ D


Urheberrecht. ©

O’R

eilly Verlag 2011

Abbildung 4-1: Standard-Swatch

Abbildung 4-2: Swatch A


Dies ist ein A

uszug aus dem B

uch "jQuery M

obile", ISB

N 978-3-86899-158-1

http://ww


obger/ D


Urheberrecht. ©

O’R

eilly Verlag 2011

Abbildung 4-3: Swatch B

Abbildung 4-4: Swatch C



Dies ist ein A

uszug aus dem B

uch "jQuery M

obile", ISB

N 978-3-86899-158-1

http://ww


obger/ D


Urheberrecht. ©

O’R

eilly Verlag 2011

Abbildung 4-5: Swatch D

Abbildung 4-6: Swatch E


Dies ist ein A

uszug aus dem B

uch "jQuery M

obile", ISB

N 978-3-86899-158-1

http://ww


obger/ D


Urheberrecht. ©

O’R

eilly Verlag 2011

Sie können in einer Seite auch verschiedene Swatches gemeinsam benutzen, wodurchdas Aussehen und die Bedienung Ihrer Applikation sehr fein abgestimmt werden kann(Beispiel 4-2).

Beispiel 4-2: Mehrere Swatches in einer Seite

<section id="swatch-mixed" data-role="page" data-theme="c"><header data-role="header" data-theme="b"><h1>jQuery Mobile</h1></header><div class="content" data-role="content"><h3>Mixing Swatches</h3><form action="formprocessor.php" method="post">


name="select-restaurants"data-native-menu="false"multiple="multiple"data-theme="e">







<a href="#" data-role="button" data-theme="a">Yes</a><a href="#" data-role="button" data-theme="a">No</a><a href="#" data-role="button" data-theme="a">Cancel</a>


</section>

Hinter den Kulissen: Swatches anpassenDie Swatches eines Themes in jQuery Mobile werden alle per CSS definiert. Dadurch ist eseinfach, sie an Ihre eigenen Bedürfnisse anzupassen. Die Definition der Swatches ist aufverschiedene Abschnitte des jQuery Mobile-Stylesheets verteilt und sehr einfach zuverstehen.

Am einfachsten lässt sich ein Theme anpassen, indem Sie ein eigenes Stylesheet anlegen,das die gewünschten Stile überschreibt. Damit das funktioniert, muss das zusätzlicheStylesheet nach den jQuery Mobile-eigenen Stilen geladen werden. Dies ist besondersnützlich, wenn Sie das CDN nutzen, um das jQuery Mobile-Stylesheet zu laden.



Dies ist ein A

uszug aus dem B

uch "jQuery M

obile", ISB

N 978-3-86899-158-1

http://ww


obger/ D


Urheberrecht. ©

O’R

eilly Verlag 2011

Im folgenden Beispiel wollen wir anstelle des gelben Farbschemas von Swatch e ein grünesfarbliches Konzept verwenden. Hierfür reicht es aus, die entsprechenden CSS-Regeln zuüberschreiben. In Beispiel 4-3 habe ich die nötigen Regeln für Swatch e aus dem jQueryMobile-Stylesheet kopiert und die Farbangaben durch meine eigenen Werte ersetzt.

Beispiel 4-3: Bestimmte Stile für Swatch e überschreiben

/*Change:#fceda7 to #a7fcaf#fadb4e to #5afa4e#f7c942 to #5cf742#33ff33 to #9efaa2#fe3 to #33ff33#fcf0b5 to #b5fcb5#e79952 to #52e760#fbe26f to #76fb6f*/.ui-bar-e {

border: 1px solid #5cf742;background: #5afa4e;background-image: -moz-linear-gradient(top,

#a7fcaf,#5afa4e);

background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #a7fcaf),color-stop(1, #5afa4e));

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#a7fcaf',EndColorStr='#5afa4e')";

}.ui-body-e {

border: 1px solid #5cf742;background: #9efaa2;background-image: -moz-linear-gradient(top,

#fff,#9efaa2);

background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #fff),color-stop(1, #9efaa2));

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff',EndColorStr='#9efaa2')";

}.ui-btn-up-e {

border: 1px solid #5cf742;background: #5afa4e;text-shadow: 0 1px 1px #33ff33;background-image: -moz-linear-gradient(top,

#a7fcaf,#5afa4e);

background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #a7fcaf),color-stop(1, #5afa4e));

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#a7fcaf',EndColorStr='#5afa4e')";

}


Dies ist ein A

uszug aus dem B

uch "jQuery M

obile", ISB

N 978-3-86899-158-1

http://ww


obger/ D


Urheberrecht. ©

O’R

eilly Verlag 2011

.ui-btn-hover-e {border: 1px solid #52e760;background: #76fb6f;background-image: -moz-linear-gradient(top,

#b5fcb5,#76fb6f);

background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #b5fcb5),color-stop(1, #76fb6f));

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#b5fcb5',EndColorStr='#76fb6f')";

}

.ui-btn-down-e {border: 1px solid #5cf742;background: #a7fcaf;background-image: -moz-linear-gradient(top,

#5afa4e,#a7fcaf);

background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #5afa4e),color-stop(1, #a7fcaf));

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#5afa4e',EndColorStr='#a7fcaf')";

}

Wenn wir unser neues Stylesheet in eine Seite laden, die Swatch e verwendet (Beispiel 4-4),werden die Änderungen sichtbar (wie in Abbildung 4-7 gezeigt).

Beispiel 4-4: Swatch e wird grün

<!DOCTYPE html><html>

<head><title>jQuery Mobile Application</title>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" /><link rel="stylesheet" href="swatch-e-custom.css" /><script src="http://code.jquery.com/jquery-1.5.2.min.js"></script><script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js">

</script></head>

<body>

<section id="swatch-e" data-role="page" data-theme="e"><header data-role="header"><h1>Swatch E</h1></header><div class="content" data-role="content"><h3>Swatch E: New and Improved</h3><p>Some sample form elements and buttons:</p><form action="formprocessor.php" method="post">


name="select-restaurants"data-native-menu="false"



Dies ist ein A

uszug aus dem B

uch "jQuery M

obile", ISB

N 978-3-86899-158-1

http://ww


obger/ D


Urheberrecht. ©

O’R

eilly Verlag 2011

multiple="multiple"><option value="choose" data-placeholder="true">Choose...</option><optgroup label="French">







</div></div><footer data-role="footer"><h1>jQuery Mobile</h1></footer>

</section>

</body></html>

Beachten Sie, dass das angepasste Stylesheet erst geladen wird, nachdem das allgemeineStylesheet von jQuery Mobile eingebunden wurde. Dadurch wird sichergestellt, dass diegewünschten Stile durch eigene Werte überschrieben werden.

Abbildung 4-7: Swatch e wird grün


Dies ist ein A

uszug aus dem B

uch "jQuery M

obile", ISB

N 978-3-86899-158-1

http://ww


obger/ D


Urheberrecht. ©

O’R

eilly Verlag 2011

Themes für Elemente in der ListenansichtUm die Listenansicht möglichst flexibel zu halten, besitzt jQuery Mobile einige spezielledata-Attribute, mit denen Abschnittsüberschriften, Zähler (Count Bubbles) und geteilteButtons speziell gestaltet werden können.

Um einer Abschnittsüberschrift ein eigenes Theme zuzuweisen, können Sie ihr entwederdirekt das Attribut data-theme zuweisen, oder Sie versehen das umgebende ul-Tag mitdem Attribut data-divider-theme.

Für die Gestaltung von Zählern gibt es das Attribut data-count-theme. Dieses können Sieentweder dem umgebenden ul-Tag zuweisen, oder – wenn nur bestimmte Zähler einerListe verändert werden sollen – auch nur einzelnen Listeneinträgen.

Sollen geteilte Buttons mit eigenen Themes versehen werden, können Sie die Attributedata-split-theme und data-split-icon verwenden. Hierbei wird data-split-theme ver-wendet, um das Theme für den rechten Button anzugeben. Es kann entweder für dieumgebende Liste (ul) oder auch für einzelne Listeneinträge definiert werden.

Um ein spezielles Symbol für alle geteilten Buttons in einer Liste zu definieren, verwendenSie das Attribut data-split-icon, wie in Beispiel 4-5 gezeigt. Das ist besonders sinnvoll,wenn Sie für alle ein Standard-Symbol benutzen möchten, anstatt für jeden Listeneintragein eigenes data-icon-Attribut zu vergeben.

Beispiel 4-5: Listeneinträge mit Themes versehen

<ul data-role="listview"data-split-icon="star"data-divider-theme="e"data-count-theme="a">

<li data-role="list-divider">French Restaurants<span class="ui-li-count">3</span>

</li><li><a href="lecentral.html">Le Central</a><a href="reservations.php?restaurant=403">Make Reservations</a>

</li><li><a href="bistrovandome.html">Bistro Vandome</a><a href="reservations.php?restaurant=404">Make Reservations</a>

</li><li><a href="antoines.html">Antoine's</a><a href="reservations.php?restaurant=405">Make Reservations</a>

</li></ul>



Documents

Jon Reid, jQuery Mobile. Plattformunabhängige mobile ... · Jon Reid, jQuery Mobile. Plattformunabhängige mobile Anwendungen., O´Reilly, ISBN 9783868991581 D3kjd3Di38lk323nnm