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