当前位置: 首页 > 工具软件 > jQTouch > 使用案例 >

jqtouch初解

赵炯
2023-12-01

 

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

 

写本文的目的是为了那些想实现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/

 

 

 

 

 

 

 

 

 

 

 

 类似资料: