jquery mobile 移动web(6)

时间:2022-04-23
本文章向大家介绍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();