JQuery mobile - JQM: Unterschied zwischen den Versionen
| Zeile 1: | Zeile 1: | ||
| − | |||
== Snippets == | == Snippets == | ||
| Zeile 34: | Zeile 33: | ||
</pre> | </pre> | ||
| − | == JQM-Seite == | + | === JQM-Seite === |
In JQM können auch mehrere Seiten in einem HTML Dokument sein. Eine JQM Seite wird so definiert: | In JQM können auch mehrere Seiten in einem HTML Dokument sein. Eine JQM Seite wird so definiert: | ||
<pre> | <pre> | ||
| Zeile 41: | Zeile 40: | ||
</pre> | </pre> | ||
| − | == Vordefinierte Bereiche: Header, Footer, Content == | + | === Vordefinierte Bereiche: Header, Footer, Content === |
Innerhalb der Seite kann man Bereiche nutzen: | Innerhalb der Seite kann man Bereiche nutzen: | ||
| Zeile 51: | Zeile 50: | ||
<div data-role="footer"> | <div data-role="footer"> | ||
</div><!-- /footer --> | </div><!-- /footer --> | ||
| − | </pre | + | </pre> |
| + | |||
| + | == Glossar - 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. | ||
| + | |||
| + | === data-role === | ||
| + | Kennzeichnet einen Bereich wie z.B. Footer, Header oder Content | ||
| + | |||
| + | === 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. | ||
| + | |||
| + | http://jquerymobile.com/demos/1.0b3/docs/pages/pages-themes.html | ||
| + | |||
| + | === data-dividertheme === | ||
Version vom 16. September 2011, 21:14 Uhr
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 -->
Glossar - 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.
data-role
Kennzeichnet einen Bereich wie z.B. Footer, Header oder Content
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.
http://jquerymobile.com/demos/1.0b3/docs/pages/pages-themes.html
