Getting started with jQTouch plug-in for iPhone mobile phone Development

JQTouch is a jQuery plug-in that allows you to implement various common UI effects such as animation, list navigation, and default application styles on Mobile WebKit browsers of iPhone, iPod Touch, and other devices. With the increasing use of iPhone, iPod Touch and other devices, jQTouch undoubtedly reduces a lot of work for the development of mobile website, and has greatly improved style and compatibility.

JQTouch Official Website: http://www.jqtouch.com
Open the home page to download the latest plug-in package and some instance code. The following describes some simple jQTouch usage.
Getting started with jQTouch

1. Load the plug-in
First, include necessary script files and style files in the header of the page.
 

 
 

  
  
<style type="text/css" media="screen">@import "jqtouch/jqtouch.min.css";</style> 
  
  
<style type="text/css" media="screen">@import "themes/jqt/theme.min.css";</style> 
  
  
<script src="jqtouch/jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script> 
  
  
<script src="jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script> 
 
 

The corresponding files can be found in the downloaded code package.
2. initialize jQTouch

 
 

  
  
<script type="text/javascript" charset="utf-8"> 
  
  
var jQT = new $.jQTouch({  
  
  
icon: 'jqtouch.png',  
  
  
addGlossToIcon: false,  
  
  
startupScreen: 'jqt_startup.png',  
  
  
statusBar: 'black',  
  
  
preloadImages: [  
  
  
'img/back_button.png',  
  
  
'img/back_button_clicked.png',  
  
  
'img/button_clicked.png',  
  
  
'img/grayButton.png',  
  
  
'img/whiteButton.png',  
  
  
'img/loading.gif'  
  
  
]  
  
  
});  
  
  
</script> 
 
 

3. Usage
When the jQTouch plug-in is loaded in HTML, the first HTML object is displayed by default. Other HTML objects are not displayed, such as div1, div2, and div3 under the body... At this time, only the first div is displayed, and none of the other div is displayed. in the control of the page tag,
It is controlled by class and id. For example, by default, jQTouch configures eight animations: slide, slideup, and dissolve ), fade, flip, pop, swap, and cube ).
To present these animation effects, you can use the following method:
 

 
 

  
  
<a class="slide" href="#animdemo">Slide</a> 
  
  
<a class="slideup" href="#animdemo">Slide Up</a> 
  
  
<a class="dissolve" href="#animdemo">Dissolve</a> 
  
  
<a class="fade" href="#animdemo">Fade</a> 
  
  
<a class="flip" href="#animdemo">Flip</a> 
  
  
<a class="pop" href="#animdemo">Pop</a> 
  
  
<a class="swap" href="#animdemo">Swap</a> 
  
  
<a class="cube" href="#animdemo">Cube</a> 
 
 

The id pointed to in href is the HTML object to be displayed after clicking the link. This requires that the page contains an HTML object whose id is animdemo.
Of course, the implementation of these animation effects can also be customized during initialization. The plug-in provides us with many optional parameters. The new version has improved the scalability of the system:
Improved 3D flip transition
Callback events: Transition of the entire page, swipe events, and changes in the direction
Add Demo: Clock, To-Do, and some main functions
Topic: currently, the subject is gray with Apple and jQuery)
The page effect implemented by the jQTouch plug-in is really amazing. Some iPhone or iPod Touch friends may wish to give it a try.