Information Technology Reference
In-Depth Information
As I said before, there is not a whole lot of stuff going on with this markup. Most of the
magic happens behind the scenes, within the inner workings of the jQuery Mobile
application. Over the next few examples, we'll explore what one can do with jQuery
Mobile, starting from the simple to the more complex, and then into custom
theming!Let's fire up our trusty web browser and see how this page looks on our mobile
devices (see Figure 7-1)!
Figure 7-1.
Avery native looking user interface created by jQuery Mobile and displayed on an Android 2.3.4
handset
You see how easy that was? The best part is that we were just barely scratching the
surface of what jQuery Mobile is capable of. With a little time, one could easily put
together a full-featured mobile web application complete with fancy user interface
elements, modal windows, dialog boxes, page transitions, navigational toolbars, and a
whole lot of other stuff too! Let's dig a bit deeper.
Adding Multiple Pages
Typically, applications consist of more than one page! In Listing 7-4, we'll create a more
advanced jQuery Mobile document that contains three pages: a Home page, an About
page, and a Contact page. Along the way, we'll comment a little heavier than usual, so
that you see which part of the code creates which element (displayed in Figures 7-2, 7-3,
and 7-4). This way, you'll see exactly what you'll need to modify if you would like to
customize certain elements.
Listing 7-4.
All UI elements on the page are created by the jQuery Mobile application
<!DOCTYPEHTML>
<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>
<!-- home -->
<div data-role="page" id="home">
<div data-role="header"><h1>Hello World</h1>
