JQuery mobile - JQM
Snippets
Hallo Welt
<!DOCTYPE html>
<html>
<head>
<title>Hallo Welt</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Header Page 1</h1>
</div><!-- /header -->
<div data-role="content">
<p>Hallo Welt !</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Footer Page 1</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
JQM-Seite
In JQM können auch mehrere Seiten in einem HTML Dokument sein. Eine JQM Seite wird so definiert:
<div data-role="page"> </div><!-- /page -->
Innerhalb der Seite kann man Bereiche nutzen:
<div data-role="header"> </div><!-- /header --> <div data-role="content"> </div><!-- /content --> <div data-role="footer"> </div><!-- /footer -->
Attribute
Attribute werden z.B. für das Theming eingesetzt (das Aussehen der Seiten) Dabei gibt es eine Reihe vordefinierter Stile, die über Buchstaben aufgerufen werden.
Attribute für Seite, Bereiche und Theming
data-role
Kennzeichnet einen Bereich wie z.B. Footer, Header oder Content
Kann aber auch für andere Zwecke eingesetzt werden:
Z.B. um Buttons zu Gruppieren. Per Default werden die Buttons untereinander angeordnet. Mit dem data-type Attribut geht es auch Horizontal.
<div data-role="controlgroup" data-type="horizontal"> <a href="index.html" data-role="button">Yes</a> <a href="index.html" data-role="button">No</a> <a href="index.html" data-role="button">Maybe</a> </div>
data-inset
data-theme
Ist für das Styling der Inhalte zuständig. Wird i.d.R. dem header und footer zugeordnet (wenn sie eigene Stile haben sollen). Es kann auch content zugeordnet werden ist aber nicht empfohlen. Stattdessen ist es in der Regel dem Div mit dem Attribut data-role="page" zugeordnet, damit auch wirklich die ganze Seite vom Styling betroffen ist.
Das Data-Theme funktioniert ohne weiteres CSS auch für viele andere Elemente (z.B. Buttons etc.)
Standardmäßig gibt es die themes a-e wobei a visuell für den Hauptlevel steht also die stärkste Signalfarbe b für den "Secondary Level" und c für den Baseline Level. Die Themes d steht für eine Alternative für den Secondary Level und e als Akzentfarbe. Man kan das Theme über das CSS verändern oder auch Buchstaben hinzufügen.
Beispiel:
<a href="index.html" data-role="button" data-theme="a">Theme a</a>
http://jquerymobile.com/demos/1.0b3/docs/pages/pages-themes.html
data-type
data-dividertheme
Buttons
http://jquerymobile.com/demos/1.0b3/docs/buttons/buttons-icons.html
Attribute für Buttons
data-role
mit data-role="none" kann man das Touch optimierte Styling von JQM abschalten und die Formularelemente werden ganz normal wie es der Browser vorsieht angezeigt.
data-icon
Setzt ein Icon auf einen Button. Z.B.:
<a href="index.html" data-role="button" data-icon="delete">Delete</a>
Icon-Set: arrow-l,arrow-r,arrow-u",arrow-d,delete,plus,minus,check,gear,refresh,forward,back,grid,star,alert,nfo,home, search
data-iconpos
Positon des Icons im Button: notext, left, right, top, bottom
Standard und Custom Icons
18x18 pixels saved as a PNG-8 with alpha transparency
Positionierung und Blöcke
data-inline
Elemente (z.B. Buttons) die als Block Elemente angelegt sind (ganze Breite) werden können zu Inline Elementen werden. Werte: true, false
Grids
Transitions
data-transition
data-transition="pop"
data-direction
data-direction="reverse"
Formulare
Es wird wenn möglich AJAX genutzt, wenn im Formular die action und method Attribute gesetzt sind. Ansonsten wird die aktuelle Seite mit GET aufgerufen.
data-ajax="false"
Ajax ausschalten
target
Wird ganz normal berücksichtigt.
rel
Dieses Attribut ist in Forms nicht erlaubt.
