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"> < ...
随机推荐
- 使用网络技术---WebView
混合技术 1.使用WebView 权限声明: 定义WebView 填充网页: webView=findViewById() //启用js WebSetting seter = webView.sett ...
- node之log4js
log4js的配置文件: "log4js": { "appenders": { "out": { "type": &qu ...
- vs2013项目停止调试后 iis express也跟着退出
解决方法:项目—>XX属性—>Web—>调试器—>取消[启用编辑并继续]
- sp_addlinkedserver创建远程服务器查询
远程服务器查询可以分两步完成: 1.建立连接服务器 exec sp_addlinkedserver @server='Test_Server', --被访问的服务器别名 @srvproduct='', ...
- poi学习
需要节点 <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi</a ...
- fegin client使用http url合约时报: [Request processing failed; nested exception is feign.FeignException: status 400 reading
首先看feign client代码: @FeignClient(name = "SPRING-CLOUD-WEB-PROVIDER-GROUP2", url = "htt ...
- 创建简单的node服务器
昨天咱们说了封装ajax,今天咱们说一下 自己创建一个建议的node服务器: 话不多说直接上代码: var http = require('http') //对URL 解析为对象//1.导入模块 UR ...
- Android 软键盘弹出,界面整体上移
在做搜索功能的时候,点击搜索框,搜索框获取焦点,键盘弹出:现在问题出来了,android软键盘弹出的时候,android整个界面上移,布局被挤压,很难看:要解决这个问题,我们需要用到 windowSo ...
- wxpython 创建工具栏和菜单栏
下面看一下关于创建工具栏,状态栏和菜单的方法,看下面一个例子: import wx class ToolBarFrame(wx.Frame): def __init__(self,parent,id) ...
- jmeter简单录制
JMeter介绍 1.JMeter,一个100%的纯Java桌面应用,它是Apache组织的开放源代码项目,它是功能和性能测试的工具.JMeter可以用于测试静态或者动态资源的性能(文件.Servle ...