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 移动web(6)的更多相关文章
- JQuery Mobile移动Web应用开发(1): UI开发工具RID介绍
工欲善其事,必先利其器. UI工具可以提高我们开发界面的效率,下面对几款工具做个对比: 1. Codiqa,在JQuery Mobile主页能看到这款工具,看到网上这么多人吹捧这个工具,不过是收费的. ...
- 利用JQuery Mobile开发web app
什么是web app web app 是基于web的应用程序,是针对移动设备优化后的web站点,它具有 开发成本低——采用web开发技术,不需要考虑跨平台以及底层适配问题: 升级简单——不需要通知用户 ...
- jquery mobile 移动web
轻量级框架jQuery Mobile 所需文件 <link rel="stylesheet" href="jquery.mobile-1.1.2/jquery.mo ...
- jQuery Mobile 移动 web 应用程序框架
在这里我们主要讲一下如何引用jQuery Mobile(引用了jQuery Mobile,你就能引用jQuery Mobile里已经封装好的代码,让开发更加快捷简单) 从 CDN 引用 jQuery ...
- jquery mobile 移动web(5)
有序列表 <div data-role="content"> <ol data-role="listview" data-theme=&quo ...
- jquery mobile 移动web(2)
button 按钮 data-role="button" 将超链接变成button. 具有icon 图标的button 组件. 提供了18常用的图标 data-icon =&quo ...
- jquery mobile 移动web(1)
轻量级框架jQuery Mobile 所需文件 <link rel="stylesheet" href="jquery.mobile-1.1.2/jquery.mo ...
- jquery mobile 移动web(4)
下拉菜单: 设置label 元素的for 属性为 select label 元素的文本内容作为选项的名称 定义div元素并设置data-role 属性值为 fieldcontain. <div ...
- jquery mobile 移动web(3)
可折叠功能块. div 元素的 data-role 属性设置为 collapsible 代码如下: <div data-role="collapsible"> < ...
随机推荐
- js Base64与字符串互转
1.base64加密 在页面中引入base64.js文件,调用方法为: <!DOCTYPE HTML> <html> <head> <meta charset ...
- 《本博客将搬至CSDN》 博客主QQ 654436731 有关于本博客任何文章的问题欢迎打扰
地址 http://blog.csdn.net/sajiazaici
- java常用API之字符串缓冲区
StringBuffer类: StringBuffer是个字符串的缓冲区,是可变的字符串数组,即就是它是一个容器,容器中可以装很多字符串.并且能够对其中的字符串进行各种操作 StringBuffer的 ...
- css-css简介
CSS:层叠样式表 ** 层叠:一层一层的 ** 样式表:很多的属性和属性值 * 使页面显示效果更好 * CSS将网页内容和显示样式进行分离,提高了显示功能.
- java参数传递之值传递
一 概述 1.什么是参数传递? 调用方法时向形参传递数据的过程叫做参数传递.在编程语言中有两种传递方式:值传递与引用传递.必须强调的是,这里提到的两种传递方式不是仅限于java使用到的传递方式,而是出 ...
- jQuery使用最广泛的javascript函数库
网站建设中,jQuery之最方便的的库了,当用到其中的JavaScript函数库的时候,不禁会想居然还有这么简单的操作? 一.选择网页元素 jQuery的基本设计思想和主要用法,就是"选择某 ...
- Python进阶篇四:Python文件和流
摘要: Python对于文件和流的操作与其他编程语言基本差不多,甚至语句上比其他语言更为简洁.文件和流函数针对的对象除了这两者之外还有,类文件(file-like),即python中只支持读却不支持写 ...
- 前端小课堂 js:what is the function?
js 函数: 概念:函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块. 说白了就是响应用户操作所执行的代码,通过js事件触发,然后调用执行函数里代码的操作. 比如常见的用户点击事件,用户点击 ...
- win环境下jdk7与jdk8共存问题
1.jdk安装包 安装步骤略 2.jdk等配置文件修改 在安装JDK1.8时(本机先安装jdk1.7再安装的jdk1.8),会将java.exe.javaw.exe.javaws.exe三个文件cop ...
- IOS Google语音识别更新啦!!!
旧版本的API: —Google提供了一个在线语音识别的API接口,通过该API可以进行中文.英文等语言的识别. API地址:http://www.google.com/speech-api ...