The JavaScript blog.


mobile iPhone interface mootools


Posted on .

MooTouch is a framework for iPhone web app development that uses
MooTools, made by Jacky Nguyen. The code hasn't actually been released yet, but the author promises that it will be
released under the MIT license. You can see the framework in this video:
Native-like iPhone Web Application - Powered by MooTouch and on this site:

MooTouch allows you to build pages that load using Ajax with location
hashes. It uses Safari's native CSS3 features so transitions feel
snappy. The source code has some Android webkit support as well. There
are also interesting references like orientation change support. The
source doesn't appear to have specific multitouch support in the API.

Someone has kindly posted the source, processed through a beautifier, to
GitHub. You can see how the library is used in
ExpatLiving.js, and the source itself in


tutorials libraries jquery iPhone

jQTouch: Build iPhone Apps With JavaScript

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