Information Technology Reference
In-Depth Information
that could be used for whatever purposes we can imagine. In our second example
(Listing 7-2), we are using the
data-mood
attribute to record our mood in a way that will
please validators, while still allowing us to use those data in our scripts as needed! As
long as we put the prefix “data-”in front of the string of data we'd like to store, it is valid
HTML5 code. We can use these as small data containers, as in the following example.”
Now that you have an understanding of how data attributes work, and how they can be
used to enrich our mobile applications, let us take a look at some jQuery Mobile code
and dissect how it is all working.
In Listing 7-3, we're going to display a very simple page using the jQuery Mobile
framework. You'll notice that it uses a number of data-role attributes.
Listing 7-3.
The HTML markup from the default jQuery Mobile boilerplate example
<!DOCTYPE HTML>
<html>
<head>
<title>Our Super Rad Demo Page</title>
<link rel="stylesheet" href="
http://code.jquery.com/mobile/1.0a1/jquery.mobile-
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head>
<body>
<!-- page -->
<div data-role="page">
<!--header -->
<div data-role="header">
<h1>Well Then, Soldier...</h1>
</div>
<!-- /header -->
<!-- content -->
<div data-role="content">
<p>How goes the day?</p>
</div>
<!-- /content -->
<!-- footer -->
<div data-role="footer">
<h4>© 2011 Dodo Men Ply, Inc.</h4>
</div>
<!-- /footer -->
</div>
<!-- /page -->
</body>
</html>
With just the few lines of the preceding code, one can create a very native mobile
application look and feel using just a regular old web browser. This page happens to be
pretty simple. For starters, we have our main container with the data-attribute value of
"page," which is a wrapper for our content. As would be expected, after that we have
our "header," which would usually house the Title of the page and any navigation
elements one would decide to put there. After we pass the header, we start to journey
towards the meat of the page, also known as the "content" data-attribute, which is
shortly followed by our "footer."
