DailyJS

jQTouch: Build iPhone Apps With JavaScript

Ric Roberts

Subscribe

@dailyjs

Facebook

Google+

tutorials libraries jquery iPhone

jQTouch: Build iPhone Apps With JavaScript

Posted by Ric Roberts on .
Featured

tutorials libraries jquery iPhone

jQTouch: Build iPhone Apps With JavaScript

Posted by Ric Roberts on .

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:

  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
\$.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
.