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"> < ...
随机推荐
- union、except和intersect查询
1. union联合查询 (合并) select r.room_id from room r union select rp.num from room_type rp 要求表1和表2的查询结果结构 ...
- Java中使用MongoUtils对mongodb数据库进行增、删、查、改
本文主要介绍在java应用中如何使用MongoUtils工具类对 mongodb进行增.删.查.改操作. 一.配置 1.将 common.jar库引入到项目环境中: (源代码:https://gite ...
- Java使用UDP聊天程序
主要想测试Java UDP通信.Java UDP使用DatagramSocket和DatagramPacket完成UDP通信 主要思路: 1.本机通信,ip地址为:127.0.0.1 2.开一个线程监 ...
- oracle学习篇十一:视图
视图是存储的查询定义. 1. 创建视图的语法如下: Create [OR REPLACE] [FORCE | NOFORCE] VIEW view_name[(alias,alias,...)] AS ...
- 二维数组针对某字段排序 - array_multisort()
/** * 针对二维数组下的某字段排序 * @param array $myarr 被排序数组 * @param string $sort_key 排序根据字段 * @param flag $sort ...
- html-框架标签的使用
<frameset> - rows:按照行进行划分 ** <frameset rows="80,*"> - cols:按照列进行划分 ** <fram ...
- 转:ArcGIS提取面状道路中心线(转载)
1.首先把所有的面要素merge成一个要素 2.把merge后的数据转成线数据 3.此时转换后的线数据一定是闭合的,为了防止提取中心线失败(只提取出外围轮廓)我们在随意一个道路末端使用打断工具打一个开 ...
- selenium(2.4.0)中不能导出web drive 代码
最近在学习selenium.要做web自动化测试.咱只会C# .就想了,这个测试用例要是能用C# 控制,保存起来,就可以以后自动运行了,不用每次点击运行了. 看了看它的文档,就开始试验了,录脚本折腾了 ...
- AMOLED原理介紹
1. OLED发光原理 OLED(Organic Light Emitting Display,有机发光显示器)是指有机半导体材料在电场驱动下,通过载流子注入和复合导致发光的现象.其基本原理是用ITO ...
- 64位系统中连接Access数据库文件的一个问题
近日在windows 7 64位系统中编译以前写的程序,发现在连接Access数据库时总是出现异常,提示“Microsoft.Jet.OLEDB.4.0”未在本机注册,同样的代码在32位的xp系统中却 ...