Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.
- Create BookmarkCreate Bookmark
- Create Note or TagCreate Note or Tag
- DownloadDownload
- PrintPrint
Chapter 4. Animation > Sliding Home
4.2. Sliding Home
We are going to build a simple calorie-tracking application called Kilo that allows the user to add and delete food entries for a given date. All told, there will be five panels: Home, Settings, Dates, Date, and New Entry. We’ll start off with two panels and work our way up as we go.
Note:
I’ll be assigning CSS classes to some of the HTML elements (toolbar, edgetoedge, arrow, button, back, etc.). In every case, these classes correspond to predefined CSS class selectors that exist in the default jQTouch theme. Bear in mind that you can create and use your own classes by modifying existing jQTouch themes or building your own from scratch; I’m just using the defaults.
To begin, let’s create a file named index.html and add the HTML shown in Example 4-1 for the Home and About panels.
Figure 4-1. Kilo before jQTouch...
Example 4-1. HTML for the Home and About panels in index.html
|
Code View:
Scroll
/
Show All <html>
<head>
<title>Kilo</title>
</head>
<body>
<div id="home">
<div class="toolbar">
<h1>Kilo</h1>
</div>
<ul class="edgetoedge">
<li class="arrow"><a href="#about">About</a></li>
</ul>
</div>
<div id="about">
<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>
</body>
</html>
|
The HTML here basically amounts to a head with a title, and a body with two children, both divs:
Note:
Note that the href on the back button is set to #. Normally, this would tell the browser to return to the top of the current document. But when using jQTouch, it navigates back to the previous panel instead. In more advanced scenarios, you might want to use a specific anchor, such as #home, which would instruct the back button to navigate to a particular panel regardless of what the previous panel was.
With the basic HTML in place, it’s time to add jQTouch to the party. Once you’ve downloaded jQTouch and unzipped it in the same directory as the HTML document, you just add a few lines of code to the head of your page (Example 4-2).
Note:
For this and other examples in this book, you will need to download jQTouch from http://jqtouch.com, unzip it, and move the jqtouch and themes directories into the same directory as your HTML document. You will also need to go into the jqtouch directory and rename the jQuery JavaScript file (such as jquery.1.3.2.min.js) to jquery.js.
Example 4-2. Adding these lines to the head of your document will activate jQTouch
|
Code View:
Scroll
/
Show All <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',
statusBar: 'black'
});
</script>
|
Note:
By the way, jQTouch assumes that you want the app to run in full screen mode because, hey...that’s how you roll. If you’d prefer to disallow full screen mode, you can add fullScreen: false to the property list.
The difference between the application before jQTouch (Figure 4-1) and after (Figure 4-2) is dramatic, but the truly astonishing thing is that you’ve just added gorgeous left/right sliding to your app with 10 lines of code. What’s more, you’ve also enabled full screen mode, defined a custom status bar color, and linked to your Web Clip icon. jQTouch is completely sick, and we’re just getting started.
Figure 4-2. ...and Kilo after jQTouch
