I had the pleasure of working with some jQTouch this past week while integrating a mobile site into our CMS.
jQTouch is, boiled down to basics, a simple framework for creating a mobile site that, when viewed on a phone, looks and feels like a native app. The site I was working with was more or less designed with iPhone-like interface elements, but it was all HTML and CSS, no native phone code whatsoever.
Creating a simple site is easy. First, we create the jQTouch object:
// Create jQTouch object
var jqt = new $.jQTouch(
{
addGlossToIcon: false,
statusBar: 'black',
preloadImages: [
'/images/mobile/back_button_tapped.png',
'/images/mobile/back_button_tapped@2x.png',
'/images/mobile/button_tapped.png',
'/images/mobile/button_tapped@2x.png'
]
});
Some things you can set in this include class selectors that trigger navigation events (like "back", "cancel", "submit"), preloading assets so that they display quicker (as seen above), animation options, "app" options like home screen icons, etc. See a whole list here:
https://github.com/senchalabs/jQTouch/wiki/initoptions
The jQTouch object is used throughout your code after it is made primarily for history navigation, but you can also add custom animations. Making a custom animation involves some CSS3 transitions, but we're not going to get into that here.
Let's talk about how a basic jQTouch page is set up...
<html>
<head>
<meta charset="UTF-8" />
<title>jQTouch demo</title>
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript"> google.load('jquery', '1.4.2'); </script>
<script type="text/javascript" src="js/jqtouch.min.js"></script>
</head>
<body>
<div id="jqt">
<div id="home">
<div class="toolbar">
<h1>Tech demo</h1>
</div>
<a href="#test" class="slideUp">Test</a><br /><br />
<a href="#test2" class="flip">Test2</a><br /><br />
<a href="#ajax" class="slideLeft">Let's try some AJAX</a>
</div>
<div id="test">
<div class="toolbar">
<h1>Tech demo</h1>
<a href="#" class="back">Go back</a>
</div>
<div class="container">
OMG!
</div>
</div>
<div id="test2">
<div class="toolbar">
<h1>Tech demo</h1>
<a href="#" class="back">Go back</a>
</div>
<div class="container">
Hello!<br />
</div>
</div>
<div id="ajax">
<div class="toolbar">
<h1>Tech demo</h1>
<a href="#" class="back">Go back</a>
</div>
<div>Put data here: <br /></div>
<div class="container">
Waiting...
</div>
</div>
</div>
</body>
</html>
Brutally simple, it consists of a container called "jqt", in which you put a div for every "screen" your "app" will have.
Animations are specified through classes. Some animations that exist by default are:
- slide (Normal links, by default, use the "slide" animation.)
- flip
- slideUp
- swap
- pop
- dissolve
- cube
- fade
Most of the stuff we do requires sending queries and transforming blocks of XML from data sources, but everything is on one page, so you have to resort to ajax to grab your data. Let's look at an example of how we'd do an ajax call to load some data.
$(function() {
$("#ajax").bind("pageAnimationStart", function() {
$("#ajax .container").load("test.txt");
});
});
Looks easy enough, right?
We're still missing something. "pageAnimationStart" is an event that throws when you enter the page, AND when you exit the page. Luckily, you can pass some parameters into the empty function to grab the direction you are going. Then we just check for when the direction is "in" to only grab data when we are visiting the page.
$(function() {
$("#ajax").bind("pageAnimationStart", function(e, info) {
if (info.direction == 'in') {
$("#ajax .container").load("test.txt");
}
});
});
Now we'll only get data once we visit the page, and avoid extra ajax calls, which can bog down mobile phones and use up their data. I'm using load in this example, but any sort of ajax function will work.
View this site live at
http://www.nessthehero.com/junk/jqtdemo
Resources:
