jQuery mobile 移动web(6)

jquery mobile 针对移动端设备的事件类型。

 

1.touch 事件。

 

tap 快速触摸屏幕并且离开，类似一种完整的点击操作。
 

taphold 触摸屏幕并保持一段时间。
 

swipe 在1秒内水平移动30px屏幕像素上时触发。
 

swipeleft 向左侧滑动
 

swiperight 像右侧滑动。

 

2.方向改变事件

 

orientationchange 事件函数当移动设备的方向发生改变触发，在事件的回调函数内的第二个参数返回一个用于识别当前方向的参数，
 

该参数有两种返回值：portrait(纵向)landscarp(横向)。

 　　3.滚动事件，

 

scrollstart 开始滚动时候触发该事件。
 

scrollend 滚动结束时触发该事件。

 

4.显示/隐藏

 

pagebeforeshow 当视图通过动画效果开始显示在屏幕之前触发事件。
 

pagebeforehide 当视图通过动画效果开始隐藏之前触发事件，
 

pageshow 当视图通过动画效果显示在屏幕之后触发事件。
 

pagehide 当视图通过动画效果隐藏后触发。

示例代码： 

$("div").live("pageshow",function(event,ui){ 




alert("this page just hidden"+ui.prevPage)



})

5.模拟鼠标事件

 

vmouseover 统一处理触摸和鼠标悬停事件。
 

vmousedown 统一处理触摸和鼠标按下事件。
 

vmousemove 统一处理触摸和鼠标移动事件。
 

vmouseup 统一处理触摸和鼠标按键松开事件。
 

vclick 统一处理触摸和鼠标点击事件。
 

vmousecancel 统一处理触摸和鼠标l离开事件。

页面视图辅助工具

 

1. $.mobile.changePage

通过函数编程的方式改变两个视图之间切换效果。通常在点击超链接或提交表单的时候自定义切换效果。

 

语法： 

　

　$.mobile.changePage(to,options);


to 是必选参数， 可以传递的参数类型包括字符串，对象。
 


options 可选，传递的是一个JSON 数据格式对象，
 


用法： 以下实例将改变decondPage.html 的页面效果
 


$.mobile.changePage("secondPage.html",{ 




transition:"slidedown"



})

　表单提交操作

　

　$.mobile.changePage("submit.php",{ 


type:"post";



data:$("form#add").seriaize();


})

 

2.$.mobile.loaPage

主要的作用是加载外部页面，并插入当前页面的DOM元素内。
 

$.mobile.loadPage(url,options);

url 是一个必选参数，传递一个绝对或者相对的 URL 地址
 

options 可选参数，传递的是一个JSON 数据对象。

示例：　

$.mobile.loadPage("secomdPage.html");

　提交表单并加载结果页面：
 

$.mobile.loadPage("result.php",{ 



type:"get",



data:$("form#search").serizlize();


})

数据存储：

 　　1.jqmData()方法;

可以在元素上绑定任意数据。

 

$.mobile.jqmData(element,key,value)

element 参数是指定需要绑定数据的元素；
 

key 需要绑定数据的属性名，
 

value 绑定的数据。

 

2.jqmRemoveData() 方法：

 

该方法是移除绑定在元素上的data数据，
 

$.mobile.jqmRemoveData([name])

name 是可选参数，指定需要移除哪个data属性，如果不穿参数，则需要移除元素上的所有数据。

 　　3.jqmHasData() 方法

 

判断元素上是否存在绑定 的数据，
 

$.mobile.jqmHasData(element);

element 参数是一个进行数据检查的DOM元素。

地址路径辅助工具：

 

1.解析URL 地址

 

$.mobile.path.parseUrl 函数解析一个Url 指定， 并返回一个含有所有参数值的对象，让我们很轻易的访问Url地址上的参数属性。

 

parseUrl 函数的语法

 

$.mobile.path.parseUrl(url);

url 参数是一个相对或者绝对的URL地址，必选传入的参数。
 

parseUrl 函数返回一个对象，对象内包含丰富的属性。
 

属性： hash 说明：#号后面的所有的字符内容，相当于location 的hash

属性： host 说明：URL的主机名和端口号
 

属性: hostname 说明：返回只包含URL 的主机名。
 

属性： href 说明：返回整个URL地址。
 

属性： pathname 说明:返回文件或目录的关联路径
 

属性： port 说明：请求返回Url的端口号
 

属性：portocol 说明：返回请求Url 地址的协议，如 http https

属性：search 说明：返回地址中“？”后面的请求参数
 

属性：authority 说明：返回用户名，密码，主机名，端口号组成的地址，
 

属性：directiry 说明：返回请求URL地址的目录路径，
 

属性：domain 说明：返回 protocal 协议和authority 组成的路径
 

属性：filename 说明：返回请求的Url文件名
 

属性：hrefOfHash 说明：返回不包含hash 值的URL 路径。
 

属性：hrefOfSearch 说明：返回不包含请求参数和hash值的URL 路径。
 

属性：password 说明：返回请求URL 中的密码 如ftp 协议密码。
 

属性： username 说明：返回请求URL中的用户名，如ftp 协议的用户名。

loading 显示/隐藏

 

显示loading 对话框的方法是
 

$.mobile.showPageLoadingMse();
 

隐藏loading 对话框的方法是
 

$.mobile.hidePageLoadingMse();

 JQuery Mobile 和 HTML5 的 3个优点

 1. 上手迅速并支持快速迭代：在一个星期多一点的时间里，通过阅读JQuery Mobile文档以及O'Reilly出版的JQuery Mobile书籍，我完成了一个可以工作的app初步版本。在此之前我没有HTML5 / JQuery Mobile开发经验。与Android和iOS相比，使用JQuery Mobile和HTML5构建你的UI和逻辑会比在原生系统下构建快得多。

译注：原生系统：原装的操作系统，例如Android原生系统是Google发布未经修改的系统。在本文中，原生应用指直接用系统提供的API开发的程序，与JQuery Mobile开发的程序相对应。

我发现Apple的Builder接口的学习曲线十分陡峭，同样学习令人费解的Android布局系统也很耗时间。此外，要使用原生代码将一个list view连接到远程的数据源并具有漂亮的外观是十分复杂的（在Android上是ListView, 在iOS上是UITableView）我能够通过已经掌握的JavaScript和HTML/CSS知识快速地实现同样的功能，无需学习新的adapter,delegate等等抽象概念，只要编写JQuery代码就可以做到。

2.避免麻烦的应用商店审批过程以及调试、构建带来的痛苦：为手机开发应用，尤其是iOS系统的手机，最痛苦的过程莫过于通过Apple应用商店的审批。想要让一个原生应用程序发布给iOS用户，你需要等待一个相当长的过程（需要好几天，甚至可能是好几周）。不仅在第一次发布程序时要经历磨难，以后的每一次升级也是如此。这使得QA和发布流程变得复杂，还会增加额外的时间。由于JQuery Mobile应用程序仅仅是一种web应用程序，因此它继承了所有web环境的优点：当用户加载你的网站时，他们就马上“升级”到最新的版本。可以马上修复bug和添加新的特性。即使是在Android系统——应用市场的要求比起Apple环境要宽松得多，在用户不知不觉中完成产品升级也是一件很好的事情。

进一步的好处是，发布beta或测试版本会更加容易。只要告诉用户用浏览器打开你的网址就可以了！不需要考虑iOS令人抓狂的DRM，也不需要理会Android必须的APK。

3.支持跨平台和跨设备开发：一个巨大的好处是，我的应用程序马上可以在Android和IOS上工作，同样也可以在其他平台上工作。作为一个独立开发者，为不同的平台维护基础代码是一项巨大的工作。为单个手机平台编写高质量的手机应用需要全职工作，为每个平台重复做类似的事情需要大量的资源。应用程序能够在Android和IOS设备上同时工作对我来说是一个巨大收获。

更进一步，尤其是对于运行Android各种分支的设备，它们大小和形状各异，想要让你的应用程序在各种各样屏幕分辨率的手机上看起来都不错，这是真正的挑战。对于要求严格的Android开发者来说，按照屏幕大小进行设屏幕分割（从完全最小化到最大进行缩放）会需要很多开发时间。由于浏览器会在每个设备上以相同的方式呈现，关于这个方面你不必有任何担心。