How does jQuery Mobile enhance the markup for an optimized mobile experience? For a visual, refer to Figure 2–2.
- First, jQuery Mobile will load the semantic HTML markup (see Listing 2–1).
- Next, jQuery Mobile will iterate each page component, defined by their data-role attribute. As jQuery Mobile iterates each page component it will enhance the markup and apply mobile optimized CSS3 enhancements for each component. jQuery Mobile ultimately enhances the markup into a page that renders universally across all mobile platforms.
- Lastly, after the page enhancements are complete, jQuery Mobile will show the optimized page. See Listing 2–2 for a view of the enhanced source that gets rendered by the mobile browser.
Figure 2–2. jQuery Mobile Page Enhancements Diagram
Listing 2–2. jQuery Mobile Enhanced DOM<!DOCTYPE html>
<html class="ui-mobile>
<head>
<base href="http://www.server.com/app-name/path/"> 1
<meta charset="utf-8">
<title>Page Header</title>
<meta content="width=device-width, initial-scale=1" name="viewport">
<link rel="stylesheet" type="text/css" href="jquery.mobile-min.css" />
<script type="text/javascript" src="jquery-min.js"></script>
<script type="text/javascript" src="jquery.mobile-min.js"></script>
</head>
<body class="ui-mobile-viewport"> 2
<div class="ui-page ui-body-c ui-page-active" data-role="page"
style="min-height: 320px;">
<div class="ui-bar-a ui-header" data-role="header" role="banner">
<h1 class="ui-title" tabindex="0" role="heading" aria-level="1">
Page Header
</h1>
</div>
<div class="ui-content" data-role="content" role="main">
<p>Hello jQuery Mobile!</p>
</div>
<div class="ui-bar-a ui-footer ui-footer-fixed fade ui-fixed-inline"
data-position="fixed" data-role="footer" role="contentinfo"
style="top: 508px;">
<h4 class="ui-title" tabindex="0" role="heading" aria-level="1">
Page Footer
</h4>
</div>
</div>
<div class="ui-loader ui-body-a ui-corner-all" style="top: 334.5px;">
<span class="ui-icon ui-icon-loading spin"></span>
<h1>loading</h1>
</div>
</body>
</html>- The base tag’s
@hrefspecifies a default address or the default target for all links on a page. For example, jQuery Mobile will leverage@hrefwhen loading page-specific assets (images, CSS, js, etc.). - The body tag contains the enhanced styling for the
header, content,andfootercomponents. By default, all components have been styled with the default theme and their mobile-specific CSS enhancements. As an added bonus, all components now support accessibility thanks to the addition of the WAI-ARIA roles and levels. You get all these enhancements for free!
By now you should feel comfortable designing a basic jQuery Mobile page. You have been introduced to the core page components (page, header, content, footer) and have seen the resulting DOM of an enhanced jQuery Mobile page. Next we will explore jQuery Mobile’s multi-page template.CopycopyHighlighthighlightAdd NotenoteGet Linklink
Leave a Reply