jQuery Mobile pages are styled with HTML5 markup (see Listing 1–1.). Aside from the new custom data attributes introduced in HTML5, everything should appear very familiar for Web designers and developers. If you are already familiar with HTML5 migrating to jQuery Mobile should be a relatively seamless transition. In regards to JavaScript and CSS, jQuery Mobile does all of the heavy lifting by default. However, there are instances where you may need to rely upon JavaScript to create a more dynamic or enhanced page experience. In addition to the simplicity of the markup required to design pages it also allows for rapid prototyping of user interfaces. Very quickly we can create a static workflow of functional pages, transitions, and widgets to help our customers see live prototypes with minimal effort.
Listing 1–1. Insert listing caption here.<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="jquery.mobile-1.0.min.js"></script>
</head>
<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">
<h4>Page Footer</h4>
</div>
</div>
</body>
</html>CopycopyHighlighthighlightAdd NotenoteGet Linklink
Leave a Reply