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"> < ...
随机推荐
- 写一个安全的Java单例
单例模式可能是我们平常工作中最常用的一种设计模式了.单例模式解决的问题也很常见,即如何创建一个唯一的对象.但想安全的创建它其实并不容易,还需要一些思考和对JVM的了解. 1.首先,课本上告诉我,单例这 ...
- 【JavaWeb】JSP九大内置对象
内置对象特点: 1. 由JSP规范提供,不用编写者实例化. 2. 通过Web容器实现和管理 3. 所有JSP页面均可使用 4. ...
- XML入门介绍(什么是XML及XML格式)
什么是 XML? XML 指可扩展标记语言(EXtensible Markup Language). XML 是一种很像HTML的标记语言. XML 的设计宗旨是传输数据,而不是显示数据. XML 标 ...
- OAuth2.0 入门与进阶
一.基础知识 1.OAuth产生背景 很多网站.APP 弱化甚至没有搭建自己的账号体系,而是直接使用社会化登录的方式,这样不仅免去了用户注册账号的麻烦.还可以获取用户的好友关系来增强自身的社交功能. ...
- Hadoop ->> 关于数据分割(Data Split)的思考
今天开始学习Hadoop这门热门的数据库技术.直接从被奉为Hadoop圣经的<Hadoop The Definitive Guide 4th Edition>入手.第一章作者写到一个关于分 ...
- 【Leetcode】【Easy】Palindrome Number
Determine whether an integer is a palindrome. Do this without extra space. 判断一个整数是不是回文整数(例12321).不能使 ...
- Linux文件压缩和解压缩命令
Linux文件压缩和解压缩命令: tar 命令(打包并压缩的话,原文件也会默认存在) -c 建立打包档案 -x 解包 -t 查看包里的类容 -r 向包里追加文件 -v 显示打包过程 -f 文件 比如: ...
- March 22 2017 Week 12 Wednesday
Satisfaction doesn't come from the outside, but from the inside. 满足感并非来自外界,而是来自内心. Everything that e ...
- mysql数据库 BETWEEN 语法的用法和边界值解析
between用法: 用于where表达式中,选取两个值之间的数据,如: SELECT id FROM user WHERE id BETWEEN value1 AND value2; 当betwee ...
- 最新DNS汇集
最近几日DNS大规模抽风,网络环境是一天比一天恶劣,于是收集了一些良心的DNS服务器地址,以备不时之需. 国内服务器: 1.OpenerDNS:42.120.21.30 2.114DNS:114.11 ...