Thursday, March 26th, 2009

jQTouch: a mobile WebKit JavaScript framework

Category: iPhone, JavaScript, Library, Mobile

<p>

David Kaneda has created jQTouch a “jQuery plugin with native animations, auto list navigation, and default application styles for Mobile WebKit browsers like iPhone, G1, and Pre.”

Features

Setup

jQTouch can now be initialized with one function:

javascript
< view plain text >
  1. $(document).jQTouch({
  2.    icon: 'jqtouch.png',
  3.    statusBar: 'black-translucent'
  4. });

This function writes all of the meta tags needed for an iPhone web app. Here are the default settings:

javascript
< view plain text >
  1. fullScreen: true,
  2.  slideInSelector: 'ul li a',
  3.  backSelector: '.back',
  4.  flipSelector: '.flip',
  5.  slideUpSelector: '.slideup',
  6.  statusBar: 'default', // options: black-translucent, black
  7.  icon: null,
  8.  iconIsGlossy: false,
  9.  fixedViewport: true

Animations

There are now functions for sliding a page up, and “flipping” to a page, using WebKit’s built-in 3D capabilities. Both can be seen in the new preview

These new animations are integrated into the page history, and can be navigated by using the back button.

Image Preloading

I’ve added a quick-and-dirty function for preloading images, which you just send as an array. For example:

javascript
< view plain text >
  1. $.preloadImages([
  2.      'themes/jqt/img/chevron_white.png',
  3.      'themes/jqt/img/bg_row_select.gif',
  4.      'themes/jqt/img/back_button.png'
  5.      ]);
  6.  });

Minor Improvements

  • New HTML structure to ease toolbar button variations and improve animations.
  • Various performance improvements
  • Added minified code
  • Started a custom theme, which will be offered alongside the standard Apple theme
  • Created a new Home Screen icon
  • Removed some iPhone-dependent code

David also answered some questions for us:

How does it compare to iUI?

It is similar in the way it can load views via built-in HTML or dynamic GET/POST requests, but it uses hardware-accelerated animations, and also includes transitions like slide up and 3D page flip. It also includes code for image preloading, a custom theme, and a much easier setup function which eliminates the need to write META tags for the app icon, viewport settings, etc.

What kind of extended functionality are you looking into

Ultimately, I plan on testing extensively on the G1 and, eventually, the Palm Pre. Other plans include a more robust theming system, and various callback methods to make extending jQTouch even easier.

With PhoneGap, would it just be a script that you can get built in?

I am currently in talks with the PhoneGap crew, and we are planning on including it stock with the kit. We’re currently unsure if the script should be ported to XUI or remain based on jQuery.

Related Content:

Posted by Dion Almaer at 4:02 am
9 Comments

+++--
3.5 rating from 54 votes

9 Comments »

Comments feed TrackBack URI

Would it not be a great idea to implement a jQuery version that removes all IE and FireFox specific code so that it runs lighter on mobile WebKit devices?

Comment by beh — March 27, 2009

Great minds think a like.. I just gave a talk on this very subject — the benefit of using jQuery / phonegap-type strategy in my iPhone talk from yesterday night. I’ve got a video here: http://www.teamsoa.com – Alex

Comment by gjetson — March 27, 2009

it does not work that well in my G1 … is it broken?
For mobiles, I would have time to create lQuery (lightQuery) following the same jQuery style/API but rewriting code from the scratch (too many things are different from desktop environment, imo)

Comment by WebReflection — March 27, 2009

Wow cool. Works good on my iPhone. This is great work and there is a real need to provide a mobile framework based on an opensource js library. I was thinking of trying it with MooFx but Jquery is even better.

You are planning on opening it up in GoogleCode and letting others assist you in developing it?

Great work !!! I am very excited about this. Cheers. I send you a virtual beer or refreshing beverage of choice. :D

Comment by starfruitman — March 30, 2009

Hmmm. A WAP-like interface for a phone that needs no WAP-like interface. Not surprised to see iUI mentioned (a similar mistake abandoned two years ago.)

The built-in animations are part of WebKit and they work fine on the desktop as well. This is just one of reasons the idea of a separate “framework” for iPhones is silly.

And somehow this required jQuery? You couldn’t pick a worse script to deploy on a Website. Using it to target iPhones is clearly ridiculous.

http://groups.google.com/group/comp.lang.javascript/browse_thread/thread/9ba20706f3b3fc73#

http://groups.google.com/group/comp.lang.javascript/browse_thread/thread/e943370bc1b2f7c5#

Why do these two post nothing but jQuery fluff? This site is the World Weekly News of browser scripting.

On a similar note, are they ever going to fix this site? Granted, the incompetence goes well with the misconceptions and misinformation.

Comment by DavidMark — April 17, 2009

Hey, great work. I made a rails plugin, rails_jqtouch, is available at github: http://github.com/rrodrigu3z/rails_jqtouch/tree/master. Comments are welcome!

Comment by rrodrigu3z — May 1, 2009

Looks brilliant, and exactly the kind of thing I will be pushing the company I work for to adopt for in terms of a mobile presence. There is definitely a time and place for native development on each of the mobile platforms, but for the vast majority of applications a well coded web application will meet all requirements.

Comment by doehlman — August 31, 2009

I am new to JQuery and JQTouch. I do like what I see and have downloaded with the examples.

My question is “How to fail gracefully if the content is brought up in a non-webkit browser, say Firefox for example? Most examples work to some degree, but the main issue is overall size: in particular, width.

Is it possible to restrict the demo’s width to the 320 / 480 size variations? A simple wrapper fails due the JS and CSS. Is there a solution to this issue I have failed to find?

Thank you,

Greg

Comment by gregBaker — September 3, 2009

Well… to answer my own question, yes. It takes changing/adding some CSS to makeup for the webkit specific CSS; javascript to manage some of the transitions; and put it all into an HTML page with an iFrame. This is easily done with a simple js sniffer and if not an iPhone or iPod touch device, create a dynamic iFrame and load into it instead. Using win-Safari, this becomes a good, although not perfect, Phone emulator for page/site development and testing.

Hummmm… It seems kind’a dumb to answer my own question, but maybe some one will find it useful, I hope.

Comment by gregBaker — December 19, 2009

Leave a comment

You must be logged in to post a comment.