iPhone手机开发的插件jQTouch入门

jQTouch是jQuery的一款插件，可以在iPhone，iPod Touch等设备的Mobile WebKit浏览器上实现一些动画、列表导航、默认应用样式等各种常见UI效果。随着iPhone，iPod Touch等设备的使用日益增多，jQTouch无疑为手机网站的开发减少了很多工作，而且在样式和兼容性方面也得到了很大的提高。

jQTouch官方网站：http://www.jqtouch.com
打开首页即可下载***的插件包和一些实例代码。下面介绍一下jQTouch的一些简单用法。
开始使用jQTouch

1.  加载插件
首先在页面的头部包含必要的脚本文件和样式文件
 

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

里面相应的文件都可以在下载的代码包里找到
2. 初始化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. 使用方法
当HTML加载了jQTouch插件，将会默认***个HTML对象显示，其他所有的HTML对象都不显示，比如body下有div1，div2，div3…此时只有***个div是显示的，其他所有的div都不会显示，在页面标签的控制上，
则是通过class和id来控制的，比如说在默认情况下，jQTouch配置了8项动画：滑动(slide), 向上滑动(slideup), 溶解(dissolve), 褪色(fade), 翻转(flip), 弹出(pop), 交替(swap), 和多维数据块(cube)。
想要呈现这些动画效果，可以通过下面的方法来实现：
 

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

其中href中指向的id，就是点击链接后要显示HTML对象，这就要保证页面里还有一个id为animdemo的HTML对象。
当然上述这些动画效果的实现方式也可以在初始化的时候自定义，插件给我们提供了很多可选的参数。现在新版本改进了系统的可扩展性：
改进了3D flip transition
回调事件:整个页面的过渡、swipe事件以及方向的改变
添加演示：Clock、To-Do，和一些主要功能演示
主题：目前拥有Apple和jQuery主题（灰色）
jQTouch插件实现的页面效果真的是很绚，有作iPhone或iPod Touch朋友不妨去试一试。

原文链接：http://www.ityizhan.com/iphone-mobile-web-development-plug-ins-jqtouch/