- 浏览: 527933 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
landerson:
明显就有要求的嘛
ANDROID轻量级JSON序列化和反序列化[转] -
jimode2013:
很不错,就是需要这个方法
多个UIViewController使用addSubView,第二个 UIViewController 不响应旋转[转] -
w11h22j33:
...
[转]NSMutableArray中的自动释放对象让我郁闷了一整天 -
w11h22j33:
UILabel* label = [[UILabel a ...
Iphone开发 -
w11h22j33:
http://mobile.51cto.com/iphone- ...
获得通讯录中联系人的所有属性[转]
一、 前端使用技术
JavaScript、 jQuery、 Html、 Json、ajax
二、 jQtouch
jQtouch只是 jQuery的插件 ,它的作用是封装 iPhone中 Safari的特性效果实现 .
包含:
a) 页面的切换动画效果 (缺点:仅仅是页面切换不包含模块切换 )
b) 简单的 ajax应用
c) iPhone特性(重力感应、手势操作等)
以上三点用来开发 iPhone特性的 WEB足够了。
下面全面解析 jQtouch的运行原理:
a) 页面解析:
页面由三部分组成,标题栏、内容块、底部导航。这是正规的布局方式,当然随着项目需求这个布局可以打乱。但是从整体来看,每个显示的窗体即是一个页面,窗体等同于传统的页面。
b) 动画效果解析:
页面之间的切换其实就是通过 CSS的 display来操作,但是 Safari提供了一种更为流畅而且效果更好的方法,也是 CSS。所有 javascript操作有个弊端,那就是切换页面无法返回的问题,这里采用了记录 hash的方式来处理返回操作,当每次切换的时候都记录在 hash容器内了,所切换的效果、页面的 KEY都需要记录在内,为了保证切换后保存切换的动作。
这里简单的来看一段代码:
CSS :
@-webkit-keyframes fadein {
from { opacity: 0 ; }
to { opacity : 1 ; }
}
@-webkit-keyframes fadeout {
from { opacity: 1 ; }
to { opacity : 0 ; }
}
.fade.in {
z-index : 10 ;
-webkit-animation-name : fadein ;
}
.fade.out {
z-index : 0 ;
}
以上 CSS片段表示了渐显的效果,页面切换效果为渐变的方式来处理。 From to表示从和去。在程序中又如何去处理?
接下来再看 jQuery的处理:
jQuery :
toPage.addClass('fade in current' );
fromPage.addClass('fade out' );
当然上面代码可以正常切换页面,而且是渐显切换。但是这还不够,处理要 干净,当某些样式不需要的时候就必须把它清除。
jQuery :
if (animation) {
toPage.removeClass('in reverse fade' );
fromPage.removeClass('current out reverse fade' );
}
else {
fromPage.removeClass('current' );
}
上面是翻页的情况,下面返回依次类推 , 做逆向操作。当然仅仅只是页面对象逆向而已。如果是逆向代码有一点不一样:
jQuery :
toPage.addClass('fade in current reverse ');
fromPage.addClass('fade out reverse ' );
c) Ajax解析:
d) 重力感应解析:
iPhone中的 Safari本身就具有重力感应,我们可以通过两种途径来处理和判断是否发生了改变。
1) 通过 Safari的 onorientation 事件来监听
实现方式如下:
jQuery:
$('body' ).unbind('turn' ).bind('turn' , function (e, info) {
if (info.orientation == 'profile' ) {
//alert(' 正常显示屏幕 ');
} else {
//alert(' 变成顺时针屏幕 ');
}
});
Js:
window.onorientation = function () {
var orientation = window.orientation;
switch (orientation) {
case 90:
case -90:
//alert(' 侧 ');
break ;
default :
//alert(' 正 ');
break ;
}
}
2) 通过判断页面宽度来监听
实现方式如下:
$(window).unbind('resize' ).resize(function () {
if (!(window.innerWidth < window.innerHeight)) {
//alert(' 侧屏 ');
} else {
//alert(' 正屏 ');
}
});
上面两种方法都是处理重力感应的方法,其中第二种方法是判断浏览器变化而处理重力感应的。正常显示屏的尺寸是 420X320 , 侧屏的尺寸正好相反。所以可以利用这一点。
e) 手势操作解析:
手势操作分为:
1. 单指操作
单指可以理解为鼠标,即最普通常见的操作,单指操作在 iPhone中最常见的操作就是单指手刷翻页功能
2. 双指操作
双指操作用鼠标是模拟不出的,双指联合起来操作可以对图片放大缩小、文字的放大缩小操作,旋转图片。
单指操作用到的事件为 touchmove 和 touchend , touchmove 的用途是记录当前手指移动的区间( X 、 Y 坐标轴位置)和最后是否进行操作的决策。 Touchend 则是将记录清除。
双指操作作用到的事件为 gesturechange 和 gestureend , geaturechange 的用途是获取双指移动的区间大小(当然也可理解为指头之间的距离), gestureend 则是停止操作后,项目中用作来放大字体。预设字体大小加上区间大小来决定放大的字体大小。当然也应该有一个字体大小边界值。
三、 Android
Android手机也是基于 webkit的浏览器,同样兼容 jQtouch开发出来的 iPhone Web ,但是目前android手机关于 WEB方面的资料非常少,甚至找不到。所以目前还需要做大量的可行性分析。
比如重力感应,暂且只能用检测浏览器的变化,判断页面宽度来处理。手势操作则失效。而页面切换兼容,但是浏览器没有像 iPhone Safari那样做过性能处理。效果有点卡。
发表评论
-
iOS App性能优化
2014-01-03 11:23 1650http://www.hrchen.com/2013/05/ ... -
iOS多线程编程Part 3/3 - GCD
2014-01-03 11:21 1593http://www.hrchen.com/2013/07/ ... -
iOS多线程编程Part 2/3 - NSOperation
2014-01-03 11:20 4491http://www.hrchen.com/2013/06/ ... -
iOS多线程编程Part 1/3 - NSThread & Run Loop
2014-01-03 11:17 7046http://www.hrchen.com/2013/06/ ... -
iOS移动网络环境调优那些事[转]
2014-01-02 17:10 2661http://xiangwangfeng.com/201 ... -
生成APNS Service证书的步骤[转]
2013-05-23 09:19 5639要进行推送服务的第一件事就是获取推送证书。它用来对你通过SS ... -
xcode 环境,多工程联编设置【转】
2013-02-28 21:59 8881http://blog.csdn.net/vienna_zj ... -
干掉你程序中的僵尸代码【转】
2012-12-22 11:05 927随着万圣节越来越流行,我感觉有必要跟大家讨论一下一个 ... -
一个文本框搞定信用卡相关信息的输入[转]
2012-12-22 11:03 1089http://beforweb.com/node/134 ... -
android 开源 OCR 项目 及手写识别[转]
2012-12-11 18:21 57141)一个为Android平台,将识别由手机的相机拍摄的图 ... -
Android通过共享用户ID来实现多Activity进程共享【转】
2012-12-10 14:33 1074http://mypyg.iteye.com/blog/720 ... -
Android应用程序组件Content Provider的启动过程源代码分析【转】
2012-12-05 18:31 1091通过前面的学习,我们知道在Android系统中,Cont ... -
理解android上的安全性【转】
2012-12-03 18:08 855开发 Android 应用程序时,必须处理很多与安全性相关的方 ... -
Android 安全机制概述 Permission【转】
2012-12-03 18:07 11201 Android 安全机制概述 Android 是一个权限分 ... -
Android学习笔记之一谁动了我的接口附checkPermission流程(Dean)[转]
2012-12-03 18:06 18053前段时间接到一个有趣的需求!我们实现的某某功能的手机对外提供了 ... -
(JAVA) 使用异或进行简单的密码加密(JAVA实现)[转]
2012-11-12 16:44 1185http://blog.sina.com.cn/s/bl ... -
SL4A 之实现原理解析【转】
2012-10-23 23:52 1249关于SL4A的简介和在Android系统的安装及使用,请参 ... -
【转】深度技术分析“为什么ios比android流畅”
2012-09-23 19:41 1404原文 Andorid更新了一个版本又一个版本,硬 ... -
Iphone开发
2012-09-17 22:46 11651. NSClassFromString 这个方法 ... -
HowTo: Install iPhone SDK 2.0 – 3.1 for XCode 3.2[转]
2012-09-06 09:00 1179原文链接 So… you’ve installe ...
相关推荐
iPhone Safari Web开发经验
iPhone,iPad,AndroidWeb开发经验1.pdf
iphone android开发icon图标大全
我们致力于提供领先优质的软件项目开发服务,公司在海内外有丰富的案例,我们有开发经验丰富的强大技术团队,擅长iOS,MAC,DotNET,Android,Unity...iOS软件开发 iOS软件外包 iPhone开发 iPad开发 html5开发 android开发
仿造iPhone dTableView 接口开发的Android TableGroupView
Android开发 仿iPhone风格对话框示例源码 这个对话框完全继承、仿照AlertDialog,只是实现了自定义效果。 另外,没有实现setIcon,因为iphone中的对话框多数都没有图标。 附件包含例子、jar包、jar包源码。
iPhone上的Web前端开发,iPhone上的Web前端开发
本书全面探讨了iPhone平台的两种编程方式——Web开发和SDK编程。全在Web开发方面,分别介绍了三个iPhone Web库,即WebKit、iUI和Canvas,并讨论了Web开发环境Dashcode,最后阐述Web应用程序的调试。在SDK开发方面,...
iPhone和Android的开发前景对比(精辟) 详细分析了两种平台下目前的开发应用前景和市场需求分析
然而,以Android和iPhone手机为代表 的智能移动设备的发明却敲响了PC时代的丧钟!移动互联网时代(3G时代)已经来临,谁会成为这些移动设备上的主 宰?毫无疑问,它就是Android——PC时代的Windows! 移动互联网...
这份文档是iPhone4部分是我分解的,Android部分是我下属分解后我修改的,用于普通用户检验新/旧手机的功能点指导,主要侧重于功能点的测试,不涉及功能点的性能测试... 文档虽小,但是前前后后也花了两三个月才完成的,...
本科毕业设计论文,android解密游戏开发,从 1 绪论 1.1 课题的背景及意义1.2 研究现状1.3 论文主要工作1.4 论文结构安排 2 Android平台研究2.1 Android特征 2.2 Android应用的构成2.2.1 活动2.2.2 意图接收器2.2.3...
android开发仿iphone开关按钮
UiUIKit (Universal iPhone UI Kit) 是一個模擬iPhone native UI的HTML/CSS3 framework,並提供原始的PSD影像檔。
卡iphone Android永久在线 离线挂Q1.5倍
开发iphone风格的网页必备,强大的iui功能。 内含iui.css 和一个 iui.js 来实现强大的iphone风格网页应用。
Iphone开发系列源码——Iphone主题源码Iphone开发系列源码——Iphone主题源码Iphone开发系列源码——Iphone主题源码Iphone开发系列源码——Iphone主题源码Iphone开发系列源码——Iphone主题源码Iphone开发系列源码...
iPhone开发实战 iPhone开发 iPhone iPhone4 iPhone开发实战 iPhone开发 iPhone iPhone4