Single Page jQuery Mobile Application
Description
A jQuery Mobile page template is shown in the following code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head><!--from w w w . ja v a2 s .c o m-->
<body>
<div data-role="page">
<div data-role="header">
<h1>Page Header</h1>
</div>
<div data-role="content">
<p>Hello jQuery Mobile!</p>
</div>
<div data-role="footer" data-position="fixed">
<h4>Page Footer</h4>
</div>
</div>
</body>
</html>
In the following sections we will take about the code above in details.
Viewport
<meta name="viewport" content="width=device-width, initial-scale=1">
This is the recommended viewport configuration for jQuery Mobile.
The device-width value
indicates we want the content to scale the full width of the device.
The initial-scale setting sets the initial scaling or
zoom factor used for viewing a Web page.
A value of 1 displays an unscaled document.
To disable zoom you would add user-scalable = no.
Disabling zoom breaks accessibility.
CSS Style
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
jQuery Mobile's CSS will apply stylistic enhancements for all A-Grade and B-Grade browsers.
You may customize or add your own CSS as necessary.
An A-Grade browser will render the best experience possible from jQuery Mobile CSS3 styling.
A C-Grade browser will not receive styling enhancements from jQuery Mobile.
Javascript
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
The jQuery library is a core dependency of jQuery Mobile.
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js">
</script>
The jQuery Mobile JavaScript library must be declared after jQuery and any custom scripts you may have.
The jQuery Mobile library enhances the entire mobile experience.
Role
<div data-role="page">
data-role="page" defines the page container for a jQuery Mobile page.
This element is only required when building multi-page designs.
<div data-role="header">
data-role="header" is the header or title bar.
This attribute is optional.
<div data-role="content">
data-role="content" is the wrapping container for the content body.
This attribute is optional.
<div data-role="footer">
data-role="footer" contains the footer bar.
This attribute is optional.
Note
The sequence of the CSS and JavaScript files must appear in the order as listed in the code above.
A default footer is positioned after the content and not at the bottom of the device.
To position the footer at the very bottom of the screen,
add data-position="fixed" to the footer element.
<div data-role="footer" data-position="fixed">