Get in touch with jQTouch

January 13, 2010 – 5:02 pm by Pixeldust Interactive, Austin Web Design

jQTouch is a jQuery plugin with native animations, automatic navigation, and themes for mobile WebKit browsers like iPhone, G1, and Pre. Created by David Kaneda, jQTouch is easy to install and entirely customizable. Features include:

* Flexible themes, including default Apple and jQTouch custom themes.
* Callback functions throughout, including swipe and orientation change detection.
* Page history management and CSS3 page transitions, including 3d flip.
* Easily allow apps to run in full screen mode with custom icons and start up screens.
* The power of jQuery to build AJAX applications.
* Native WebKit Animations.

jQTouch is initialized with one function that writes all the meta tags needed to create an iPhone web app.

JavaScript:

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

Default Settings:

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.

With the built-in 3D capabilities, the WebKit provides functions to slide a page up and flip to a page. Animations appear in the page history. Use the back button to navigate.

You can also send preloaded images as an array.

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.

We believe jQTouch is an excellent tool to help increase the realm of possibility for app development. The video below covers more beginner-level topics such as structure and styling with a little advanced Javascript/jQuery and Ajax mixed in. For a more in-depth introduction to jQTouch, see Jonathon Stark’s book Building iPhone Apps with HTML, CSS, and Javascript.

Meet jQTouch from David Kaneda on Vimeo.