Monday, July 18, 2011

jQuery Mobile Exercise: data-position

We can insert the attribute data-position="fixed" into header and footer to fix it's position at top or bottom.

example:

Run on OperaMobile for Android
Run on Firefox for Android

<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Exercise</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.css" />
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.js">
</script>
</head>
<body>

<section id="page1" data-role="page">
<header data-role="header" data-position="fixed"><h1>jQuery Mobile Exercise</h1></header>
<div class="content" data-role="content">
<p>Hello jQuery Mobile!</p>
<p><a href="#page2">Go to Page 2</a></p>
</div>
<footer data-role="footer" data-position="fixed"><h1>http://icancode-4-web.blogspot.com/</h1></footer>
</section>

<section id="page2" data-role="page">
<header data-role="header" data-position="fixed"><h1>jQuery Mobile Exercise</h1></header>
<div class="content" data-role="content">
<p>Page 2</p>
<p><a href="#page1">Back to Page 1</a></p>
</div>

<footer data-role="footer" data-position="fixed"><h1>http://icancode-4-web.blogspot.com/</h1></footer>
</section>

</body>
</html>


next:
- jQuery Mobile Exercise: dialog

No comments:

Post a Comment