jQTouch: Build iPhone Apps With JavaScript
jQTouch is a jQuery plugin for mobile web development. It lets you create native-feeling iPhone applications using just HTML, CSS and JavaScript by taking advantage of native webkit animations and by capturing events such as swipes and orientation changes.
As the author, David Kaneda, writes in the online documentation, it’s easy to get started: Just include jQuery and jQTouch along with any themes and extensions in your page, then initialize jQTouch with any options.
So the head of your document might look a bit like this:
<head>
<meta charset="UTF-8" />
<title>jQTouch Example</title>
<style type="text/css" media="screen">@import "../../jqtouch/jqtouch.min.css";</style>
<style type="text/css" media="screen">@import "../../themes/jqt/theme.min.css";</style>
<script src="../../jqtouch/jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script>
<script src="../../extensions/jqt.location.js" type="application/x-javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
var jQT = new $.jQTouch({
icon: 'jqtouch.png',
addGlossToIcon: false,
startupScreen: 'jqt_startup.png',
statusBar: 'black'
});
// ... more js here ...
</script>
</head>
There are a few extensions provided (including one for access to the iPhone’s geo-location features, and another for auto-setting the title in the toolbar from the referrer page), but it’s possible to add your own by writing a function and passing it to $.jQTouch.addExtension().
(function($) {
if ($.jQTouch)
{
$.jQTouch.addExtension(function Counter(jQTouch){
var mycount = 0;
function addOne() {
++mycount;
}
function getCount() {
return mycount;
}
return {
addOne: addOne,
getCount: getCount
}
});
}
})(jQuery);
It’s even possible to make your jQTouch sites run offline, like a native iPhone app, by using HTML5’s Cache Manifest feature.
A great way to get started with jQTouch is by exploring the demos that David has provided in the download. These cover all of the features I’ve mentioned here, plus lots more besides: I’ve only scraped the surface.
If you want to dig deeper, there’s a screencast on PeepCode, and online in a Creative Commons O’Reilly book called Building iPhone Apps with HTML, CSS, and JavaScript.
