The page I will be using in this demonstration is a detail view page for a basic contact management web site. The page is used to display the contact information, phone numbers, email address, etc. for a single contact.
Here is a screen shot of the XHTML page in the iPhone 4 Safari browser.
Next is the XHTML for the detail page before I added jQuery.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"
"http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>A Simple Site | Adams, Abel</title>
</head>
<body>
<div>
<a href="index.html">Contact List</a> || <a href="form.html">New Entry</a><br />
</div>
<h1>Adams, Abel</h1>
<p>
Mr. Abel Adams<br />
Organization: Example, Inc.<br />
Mobile Phone: <a href="tel:555-555-1111">555-555-1111</a><br />
Home Phone: <a href="tel:555-555-2222">555-555-2222</a><br />
Work Phone: <a href="tel:555-555-3333">555-555-2222</a><br />
E-mail Address: <a href="mailto:adams@example.com">adams@example.com</a><br />
</p>
<p>
101 Example Street<br />
Waco, Texas 76710<br />
<a href="http://www.example.com">http://www.example.com</a><br />
</p>
<p>
Birthday: August 4, 1961<br />
Spouse: Anne<br />
</p>
</body>
</html>
Here is a screen shot of the page after it has been marked up as HTML 5 and the jQuery Mobile resources, JavaScript and CSS, have been added.
Here is the markup for the HTML 5 page.
<!doctype html>
<html>
<head>
<title>A Simple Site | Adams, Abel</title>
<!-- CSS and scripts required for jQuery mobile -->
<link rel="stylesheet" href="jquery.mobile-1.0a2.css" />
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript" src="custom-mobile-config.js"></script> <!-- this is a custom script file -->
<script type="text/javascript" src="jquery.mobile-1.0a2.js"></script>
</head>
<body>
<div data-role="page" data-theme="b">
<div data-role="header">
<div data-role="navbar">
<ul>
<li><a href="index.html">Contacts List</a></li>
<li><a href="form.html">New Entry</a></li>
</ul>
</div> <!-- end navbar -->
<h1>Mr. Abel Adams</h1>
</div><!-- end header -->
<div data-role="content">
<p>
Mr. Abel Adams<br />
Organization: Example, Inc.<br />
Mobile Phone: <a href="tel:555-555-1111">555-555-1111</a><br />
Home Phone: <a href="tel:555-555-2222">555-555-2222</a><br />
Work Phone: <a href="tel:555-555-3333">555-555-2222</a><br />
E-mail Address: <a href="mailto:adams@example.com">adams@example.com</a><br />
</p>
<p>
101 Example Street<br />
Waco, Texas 76710<br />
<a href="http://www.example.com">http://www.example.com</a><br />
</p>
<p>
Birthday: August 4, 1961<br />
Spouse: Anne<br />
</p>
<p>
Notes:<br />
Is senior manager at Example,Inc.<br />
Hobbies are golf and poker<br />
</p>
</div> <!-- end content div -->
</div> <!-- end page div -->
</body>
</html>
Using HTML 5
I started with changing the doctype from the XHTML Basic doctype to the HTML 5 doctype. The jQuery Mobile framework makes use of HTML 5's custom data attributes. These are the attributes "data-*" seen in the markup above and are a feature of HTML 5 intended to allow authors to associate arbitrary data with HTML elements in order to expose that data to custom JavaScript. JQM uses these data attributes to apply styling and behavior to sections of the page. Later in the process when I work on marking up a data entry form I will also be using the new input types introduced in HTML 5.
Adding the jQuery Mobile Resources
In the head element I've added the CSS and JavaScript resources required by the framework. In addition I've referenced an additional custom JavaScript file (custom-mobile-config.js) that contains the settings that I wish to override in the JQM defaults. I plan to cover the contents of this file in a future post.
<!-- CSS and scripts required for jQuery mobile --> <link rel="stylesheet" href="jquery.mobile-1.0a2.css" /> <script type="text/javascript" src="jquery-1.4.4.js"></script> <script type="text/javascript" src="custom-mobile-config.js"></script> <!-- this is a custom script file --> <script type="text/javascript" src="jquery.mobile-1.0a2.js"></script>
Adding jQuery Mobile to the Markup
The JQM framework includes roles that specify areas of your page as header, content, footer, and navigation. The entire body of the page has been wrapped in a div with the data-role attribute with the value of "page" and a data-theme attribute. The data-role of "page" defines the marked up content as a JQM page and applies CSS. The optional data-theme attribute applies an alternate set of styles. JQM includes some predefined themes. I have not experimented with defining my own theme but I assume that a theme-roller or other customization method does or will exist for creating and modifying themes.
I have wrapped my page heading in a div with a data-role of "header" which I have included a "navbar" in order to create navigation at the top of the page. Navigation items are wrapped in an unordered list and the page's heading is wrapped in an h1 tag.
I have wrapped the rest of the page's markup in a "content" div and it contains the same content as the original XHTML version of the page. JQM takes care of applying the CSS based on the data-role of "content" and the theme that I specified in the "page" div's data-theme attribute. If you inspect the resulting page's DOM with the Chrome browser's development tools you will see that JQM has applied a added an number of styled elements to the basic markup.
References
jQuery Mobile Project
http://jquerymobile.com
HTML 5 Custom Data Attributes
http://www.w3.org/TR/html5/elements.html#embedding-custom-non-visible-data-with-the-data-attributes
XHTML version of the page used in this post
http://www.customdatasys.com/jqm/start/detail.html
The HTML 5 / JQM version of the page used in this post
http://www.customdatasys.com/jqm/v1/detail.html
No comments:
Post a Comment