JQuery mobile - JQM
Snippets[Bearbeiten]
Hallo Welt[Bearbeiten]
<!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[Bearbeiten]
In JQM können auch mehrere Seiten in einem HTML Dokument sein. Eine JQM Seite wird so definiert:
<div data-role="page"> </div><!-- /page -->
[Bearbeiten]
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[Bearbeiten]
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[Bearbeiten]
data-role[Bearbeiten]
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[Bearbeiten]
data-theme[Bearbeiten]
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[Bearbeiten]
data-dividertheme[Bearbeiten]
Buttons[Bearbeiten]
http://jquerymobile.com/demos/1.0b3/docs/buttons/buttons-icons.html
Attribute für Buttons[Bearbeiten]
data-role[Bearbeiten]
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[Bearbeiten]
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[Bearbeiten]
Positon des Icons im Button: notext, left, right, top, bottom
Standard und Custom Icons[Bearbeiten]
18x18 pixels saved as a PNG-8 with alpha transparency
Positionierung und Blöcke[Bearbeiten]
data-inline[Bearbeiten]
Elemente (z.B. Buttons) die als Block Elemente angelegt sind (ganze Breite) werden können zu Inline Elementen werden. Werte: true, false
Grids[Bearbeiten]
Transitions[Bearbeiten]
data-transition[Bearbeiten]
data-transition="pop"
data-direction[Bearbeiten]
data-direction="reverse"
Formulare[Bearbeiten]
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"[Bearbeiten]
Ajax ausschalten
target[Bearbeiten]
Wird ganz normal berücksichtigt.
rel[Bearbeiten]
Dieses Attribut ist in Forms nicht erlaubt.
