jQTouch: Build iPhone Apps With JavaScript

2010-03-02 00:00:00 +0000 by Alex R. Young

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
, 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

So the head of your document might look a bit like this:

  jQTouch Example
  @import "../../jqtouch/jqtouch.min.css";
  @import "../../themes/jqt/theme.min.css";

    var jQT = new $.jQTouch({
      icon: 'jqtouch.png',
      addGlossToIcon: false,
      startupScreen: 'jqt_startup.png',
      statusBar: 'black'

    // ... more js here ...

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

(function($) {
    if ($.jQTouch)
        $.jQTouch.addExtension(function Counter(jQTouch){
            var mycount = 0;
            function addOne() {
            function getCount() {
                return mycount;
            return {
                addOne: addOne,
                getCount: getCount

It's even possible to make your jQTouch sites run
, like a
native iPhone app, by using HTML5's Cache

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
, and online in a
Creative Commons O'Reilly book called Building iPhone Apps with HTML,
CSS, and