iPhone手机开发的插件jQTouch入门

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

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


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

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

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

里面相应的文件都可以在下载的代码包里找到
2. 初始化jQTouch

  1. <script type="text/javascript" charset="utf-8"> 
  2. var jQT = new $.jQTouch({  
  3. icon: 'jqtouch.png',  
  4. addGlossToIcon: false,  
  5. startupScreen: 'jqt_startup.png',  
  6. statusBar: 'black',  
  7. preloadImages: [  
  8. 'img/back_button.png',  
  9. 'img/back_button_clicked.png',  
  10. 'img/button_clicked.png',  
  11. 'img/grayButton.png',  
  12. 'img/whiteButton.png',  
  13. 'img/loading.gif'  
  14. ]  
  15. });  
  16. </script> 

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

  1. <a class="slide" href="#animdemo">Slide</a> 
  2. <a class="slideup" href="#animdemo">Slide Up</a> 
  3. <a class="dissolve" href="#animdemo">Dissolve</a> 
  4. <a class="fade" href="#animdemo">Fade</a> 
  5. <a class="flip" href="#animdemo">Flip</a> 
  6. <a class="pop" href="#animdemo">Pop</a> 
  7. <a class="swap" href="#animdemo">Swap</a> 
  8. <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/

责任编辑:佚名 来源: IT驿站
相关推荐

2012-04-26 13:26:58

iPhone应用技巧

2011-07-21 10:29:18

iPhone 开发

2011-01-11 11:35:17

jQueryAndroidgoogle

2011-10-28 10:56:24

jQTouchjQueryiPhone

2023-11-13 18:01:15

开发工具Java

2010-06-17 09:18:57

Ext JSSencha

2011-07-29 11:28:58

iPhone开发

2011-07-25 17:13:31

iPhone 图形 动画

2012-04-26 13:36:30

iPhone运行程序

2012-04-26 13:23:31

iPhone程序画面控件调整

2012-04-26 13:30:05

iPhoneApp Store发布程序

2010-09-01 09:19:33

Objective-CiPhone开发iPhone

2010-08-31 14:01:23

iPhone

2011-02-01 17:32:38

App StoreiPhone手机游戏

2011-04-29 10:46:32

iPhone开发入门iPhoneiOS

2011-07-06 17:53:40

iPhone SDK Xcode

2011-08-08 09:53:22

云手机iPhone

2022-10-13 08:32:44

手机故障IO

2009-04-17 09:17:04

2011-07-25 18:02:51

iPhone LibFetion 移植
点赞
收藏

51CTO技术栈公众号