第一次做博客,不到之处请包涵。
写本文的目的是为了那些想实现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/
分享到:
相关推荐
jQTouch
移动开发者必备工具:开源jqTouch初探
jqtouch-1.0-beta-2-r109.zip
基于JQuery的一个框架,优化了移动端的显示,采用了ios的设计元素
官方提供的JQT_Demo,用于jqtouch的示例展示
jqtouch-1.0-b4-rc
In this chapter you will see how you can use the Open Source jQTouch Library to extend the functionality built into jQuery to build websites that run on your iOS and Android phones but look and ...
jQTouch是一个jQuery的插件,主要用于手机上的Webkit浏览器上实现一些包括动画、列表导航、默认应用样式等各种常见UI效果的JavaScript库。支持包括iPhone、Android等手机。
同时,JQTouch的创始人David Kaneda,以及Raphaël的创始人也已加盟Sencha团队。“在未来的几个月内,我们的合作将会创造出令人惊叹的新东西来。不会等太久的,我保证!”Sencha的CEO Abraham Elias如是说。 ...
主流移动应用框架比较jqueryMobile jqtouch senchatouch
前不久基于JavaScript编写的Ajax框架ExtJS,将现有的ExtJS整合JQTouch、Raphaël库,推出适用于最前沿Touch Web的Sencha Touch框架,该框架是世界上第一个基于HTML5的Mobile App框架。同时,ExtJS更名为Sencha,...
with JavaScript libraries such as jQuery/jQTouch), and it will turn these web apps into native Android apps (in fact, PhoneGap supports multiple platforms such as Android, iPhone, Palm, Windows ...
jQ.Mobi与Sencha Touch、JQTouch一样属于JavaScript框架。但不同的是,后两者基于HTML4且源于网页浏览器,jQ.Mobi是基于HTML5重写的jQuery 框架。在手机上运行效率那是相当给力。
Add animation with jQTouch to make your web app look and feel like a native Android app Take advantage of client-side data storage with apps that run even when the Android device is offline Use ...
Add animation with jQTouch to make your web app look and feel like a native Android app Take advantage of client-side data storage with apps that run even when the Android device is offline Use ...
* Add native-looking animations to your web app using jQTouch * Take advantage of client-side data storage with apps that run even when the iPhone is offline * Hook into advanced iPhone features — ...
部件注册表 关于 是针对移动智能手机浏览器简单界面。 它是使用 、 、 和构建的。...jQTouch 界面的旧截图(现在看起来有点不同) ** 开发安装 如果您只想在支持 Webkit 的智能手机上浏览 mPartsRegistry,请转
ProductBuzz移动原型 这是移动CRM网站的UI原型,提供产品提示和技巧。 UI堆栈利用jQuery,jQTouch和一些轻微PHP来模拟表单提交。 在此处查看其运行情况: :
介绍如何用html,css,和javascirpt来构建原生的iphone应用,介绍pohonegap框架 http://blog.csdn.net/rat9912345/archive/2011/03/07/6229000.aspx