jqtouch初解

 

第一次做博客，不到之处请包涵。

 

写本文的目的是为了那些想实现iphone手机上滑动动画效果，想使用该插件却搁浅在配置上的童鞋能够快速搭建起开发环境，具体的技术笔者没有涉及。

由于工作需要，上头分配我研究下iphone页面滑动效果，于是乎，笔者就接触到了jqtouch这个jquery插件。大概是由于笔者是第一次接触该插件的原因，笔者在google上虽然找到了一些相关的资料，但是都不怎么实用，主要原因在于网上所提供的配置所对应的jqtouch版本比较老旧，和目前最新的版本jqtouch-1.0-b4-rc不匹配（ps：其实主要原因是笔者英语太烂，搜到的资料很多都看不懂）。经过研究与参考demos的实例，笔者总算成功搭建起该插件的环境效果。

 

首先给出网上的一般向配置版本，只需在编辑文件中引入如下四个文件即可：

 

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

  

 

该配置方法所对应的版本可在http://code.google.com/p/jqtouch/ 下载得到，该版本的动画效果仅支持iphone，对chrome等运用webkit内核的浏览器暂不支持。

 

目前最近版本的jqtouch插件可在 http://www.jqtouch.com/ 下载得到，该版本的动画效果支持iphone以及所有试用webkit内核的浏览器。当然，对IE暂不支持，firefox的话，能实现显示效果，但是没有动画效果。配置方式只需在编辑文件中引入如下三个文件即可：

 

<style type="text/css" media="screen">@import "themes/css/apple.css";</style>
<script src="src/lib/zepto.min.js" type="text/javascript" charset="utf-8"></script>
<script src="src/jqtouch.min.js" type="text/javascript" charset="utf-8"></script>

 

其中，如果您把插件下载下来后，会发现src包中共有8个js文件，其中jqtouch.js的效果与jqtouch.min.js的效果一样，同理，min文件只是正常文件的精简版，具体什么作用我想大家都能了解，themes/css下的三个css文件分别是不同的样式，不管用哪个都会有动画效果，只不过样式不同而已。

 

当然，大家也可以用sencha touch框架实现滑动动画效果，由于笔者对该框架没有太多的接触，就不多说了。

 

相关连接：

 

老版本jqtouch插件下载http://code.google.com/p/jqtouch/

最近版本jqtouch插件下载 http://www.jqtouch.com/