Create Your First jQuery Mobile Application
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Application</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/
jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js">
</script>
</head>
<body>
<!-- The page starts -->
<section id="page1" data-role="page">
<!-- The header -->
<header data-role="header"><h1>jQuery Mobile</h1></header>
<!-- The header -->
<!-- The body -->
<div class="content" data-role="content">
<p>Welcome to jQuery Mobile!</p>
</div>
<!-- The body -->
<!-- The footer -->
<footer data-role="footer"><h1>WebSpeaks.in</h1></footer>
<!-- The footer -->
</section>
</body>
</html>
jQuery Mobile doesn’t need specific markup, but it does need us to indicate the roles of the content areas somehow. To do this, jQuery Mobile uses a custom data- attribute: data-role. Valid data-role values include page, header, content, and footer. Adding a new page to the application is as simple as that. Just add a new HTML 5 section with data-role=”page” and it is done. See the following example.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Application</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/
jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js">
</script>
</head>
<body>
<section id="page1" data-role="page">
<header data-role="header"><h1>jQuery Mobile</h1></header>
<div class="content" data-role="content">
<p>Welcome to jQuery Mobile!</p>
<p><a href="#page2">Go to the second page!</a></p>
</div>
<footer data-role="footer"><h1>WebSpeaks.in</h1></footer>
</section>
<section id="page2" data-role="page">
<header data-role="header"><h1>jQuery Mobile</h1></header>
<div class="content" data-role="content">
<p>Second page!</p>
<p><a href="#page1">Go to the first page!</a></p>
</div>
<footer data-role="footer"><h1>WebSpeaks.in</h1></footer>
</section>
</body>
</html>
jQuery mobile will maintain the history of the navigation for you. jQuery Mobile will automatically handle the page transition animation, and will automatically provide a back button in the header. There you have it, your first jQuery Mobile application. It doesn’t do much, but it should give you some insight into the simplicity of the framework.
