Powered by Max Banner Ads 

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:

PLAIN TEXT

JAVASCRIPT:

1.  
2. $(document).jQTouch({
3.    icon: ‘jqtouch.png’,
4.    statusBar: ‘black-translucent’
5. });
6.  

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

PLAIN TEXT

JAVASCRIPT:

1.  
2.  fullScreen: true,
3.  slideInSelector: ‘ul li a’,
4.  backSelector: ‘.back’,
5.  flipSelector: ‘.flip’,
6.  slideUpSelector: ‘.slideup’,
7.  statusBar: ‘default’, // options: black-translucent, black
8.  icon: null,
9.  iconIsGlossy: false,
10.  fixedViewport: true
11.  

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:

PLAIN TEXT

JAVASCRIPT:

1.  
2.  $.preloadImages([
3.      ‘themes/jqt/img/chevron_white.png’,
4.      ‘themes/jqt/img/bg_row_select.gif’,
5.      ‘themes/jqt/img/back_button.png’
6.      ]);
7.  });
8.  

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.