So, there you have it. With fewer than 100 lines of code, we’ve created a native-style UI for a five-panel application complete with three different page transition animations. See Example 4-7 for a complete listing of the final HTML. Not too shabby, right?
Example 4-7. The complete HTML listing for the five-panel UI
<html> <head>
<title>Kilo</title>
<link type="text/css" rel="stylesheet" media="screen" href="jqtouch/jqtouch.css"> <link type="text/css" rel="stylesheet" media="screen"
href="themes/jqt/theme.css">
<script type="text/javascript" src="jqtouch/jquery.js"></script> <script type="text/javascript" src="jqtouch/jqtouch.js"></script> <script type="text/javascript"> var jQT = $.jQTouch({ icon: 'kilo.png' }); </script> </head> <body> <div id="home"> <div class="toolbar"> <h1>Kilo</h1>
<a class="button flip" href="#settings">Settings</a> </div>
<ul class="edgetoedge">
<li class="arrow"><a href="#dates">Dates</a></li> <li class="arrow"><a href="#about">About</a></li> </ul>
</div>
<div id="about">
Figure 4-9. The Settings panel
<div class="toolbar"> <h1>About</h1>
<a class="button back" href="#">Back</a> </div>
<div>
<p>Kilo gives you easy access to your food diary.</p> </div>
</div>
<div id="dates">
<div class="toolbar"> <h1>Dates</h1>
<a class="button back" href="#">Back</a> </div>
<ul class="edgetoedge">
<li class="arrow"><a id="0" href="#date">Today</a></li> <li class="arrow"><a id="1" href="#date">Yesterday</a></li> <li class="arrow"><a id="2" href="#date">2 Days Ago</a></li> <li class="arrow"><a id="3" href="#date">3 Days Ago</a></li> <li class="arrow"><a id="4" href="#date">4 Days Ago</a></li> <li class="arrow"><a id="5" href="#date">5 Days Ago</a></li> </ul>
</div>
<div id="date">
<div class="toolbar"> <h1>Date</h1>
<a class="button back" href="#">Back</a>
<a class="button slideup" href="#createEntry">+</a> </div>
<ul class="edgetoedge">
<li id="entryTemplate" class="entry" style="display:none"> <span class="label">Label</span> <span class="calories">000</span> <span class="delete">Delete</span> </li> </ul> </div> <div id="createEntry"> <div class="toolbar"> <h1>New Entry</h1>
<a class="button cancel" href="#">Cancel</a> </div>
<form method="post"> <ul class="rounded">
<li><input type="text" placeholder="Food" name="food" id="food" autocapitalize="off" autocorrect="off" autocomplete="off" /></li> <li><input type="text" placeholder="Calories" name="calories" id="calories" autocapitalize="off" autocorrect="off" autocomplete="off" /></li>
<li><input type="submit" class="submit" name="action" value="Save Entry" /></li>
</ul> </form> </div>
<div id="settings"> <div class="toolbar">
<h1>Settings</h1>
<a class="button cancel" href="#">Cancel</a> </div>
<form method="post"> <ul class="rounded">
<li><input placeholder="Age" type="text" name="age" id="age" /></li> <li><input placeholder="Weight" type="text" name="weight"
id="weight" /></li>
<li><input placeholder="Budget" type="text" name="budget" id="budget" /></li>
<li><input type="submit" class="submit" name="action" value="Save Changes" /></li>
</ul> </form> </div> </body> </html>
Customizing jQTouch
You can customize the jQTouch default behavior by sending a variety of property set-
tings into the constructor. You saw this previously with the icon property, but there
are several others that you should be aware of (Table 4-1).
Table 4-1. jQTouch customization options
Property Default Expects Notes
addGlossToIcon true true or false If set to true, gloss will be added to the home screen icon on iPhone. Has no ef- fect on Android.
backSelector '.back, .cancel, .goback'
Any valid CSS selector; separate multiple values with a comma
Defines elements that will trigger the “back” behavior of jQTouch when tapped. When the back behavior is invoked, the current panel moves off screen with a reverse animation and is removed from history.
cacheGetRequests true true or false If set to true, automatically caches GET requests, so subsequent clicks reference the already-loaded data.
cubeSelector '.cube' Any valid CSS selector; separate multiple values with a comma
Defines elements that will trigger a cube animation from the current panel to the target panel.
dissolveSelector '.dissolve' Any valid CSS selector; separate multiple values with a comma
Defines elements that will trigger a dis- solve animation from the current panel to the target panel.
fadeSelector '.fade' Any valid CSS selector; separate multiple values with a comma
Defines elements that will trigger a fade animation from the current panel to the target panel.
Property Default Expects Notes
fixedViewport true true or false If set to true, prevents users from being able to zoom in or out of the page.
flipSelector '.flip' Any valid CSS selector; separate multiple values with a comma
Defines elements that will trigger a flip animation from the current panel to the target panel.
formSelector 'form' Any valid CSS selector; separate multiple values with a comma
Defines elements that should receive the onsubmit handler.
fullScreen true true or false iPhone only; has no effect on Android. When set to true, your app will open in full-screen mode when launched from the user’s home screen. Has no effect on the display if the app is running in Mobile Safari.
fullScreenClass 'fullscreen' String iPhone only; has no effect on Android. Class name that will be applied to the
body when the app is launched in full- screen mode. Allows you to write custom CSS that only executes in full- screen mode.
icon null null or a relative or absolute path to a .png
image file
The home screen icon for your app. This is the image that will be displayed when a user adds a bookmark for your app to his home screen.
popSelector '.pop' Any valid CSS selector; separate multiple values with a comma
Defines elements that will trigger a pop animation from the current panel to the target panel.
preloadImages false An array of image paths Defines images that will be loaded be- fore the page loads. For example:
['images/link_over.png', 'images/link_select.png'] slideInSelector 'ul li a' Any valid CSS selector;
separate multiple values with a comma
Defines elements that will trigger a slide left animation from the current panel to the target panel.
slideupSelector '.slideup' Any valid CSS selector; separate multiple values with a comma
Defines elements that will cause the tar- get panel to slide up into view in front of the current panel.
startupScreen null null or a relative or ab- solute path to an image file
iPhone only; has no effect on Android. Pass a relative or absolute path to a 320px × 460px startup screen for full- screen apps. Use a 320px × 480px image if you set statusBar to
black-translucent.
Property Default Expects Notes
statusBar 'default' default, black- translucent, black
iPhone only; has no effect on Android. Defines the appearance of the 20-pixel status bar at the top of the window in an app launched in full-screen mode.
submitSelector '.submit' Any valid CSS selector; separate multiple values with a comma
Selector that, when clicked, will submit its parent form (and close keyboard if open).
swapSelector '.swap' Any valid CSS selector; separate multiple values with a comma
Defines elements that will cause the tar- get panel to swap into view in front of the current panel.
useAnimations true true or false Set to false to disable all animations.
What You’ve Learned
In this chapter, you’ve learned how to add native-looking animations to a web app using jQTouch. In the next chapter, you’ll learn how to use the new local storage and client-side database features of HTML5 to add persistent data storage to your app.
CHAPTER 5
Client-Side Data Storage
Most software applications need to store data in some sort of persistent fashion in order to be useful. When it comes to web apps, this task has traditionally been handled with either a server-side database or cookies set in the browser. With the advent of HTML5, web developers now have a couple more options: Web Storage, and Web SQL Database.