JQUERY MOBILE 1.0 BETA 3 中文基础——方法

方法

在$.mobile对象中JQM开放了一些非常有用的方法和属性,开发人员在开发应用时可以很方便的操控JQM中的元素和对象。

$.mobile.changePage (method)

控制页面跳转,用代码来使这个页面跳转到另一个页面。在点击链接或者提交表单的时候也会被动调用此方法。

参数:

l 字符,绝对或者相对的URL。例如:”../eddy.html”

l 对象,jQuery对象。例如:$("#about")

可选项:

l transition(字符)默认:$.mobile.defaultPageTransition;

在页面转换时的切屏效果,可用的参数:’slide’、’slideup’、‘slidedown’、‘pop’、‘fade’、 ‘flip’、‘none’

l reverse(布尔)默认:false;

切屏效果动画是否反向显示,可用的参数:true、false

l changeHash(布尔)默认:true

是否更新地址栏中的哈希信息,如果设置为false,将无法使用浏览器中的后退功能返回上一个页面。可用的参数:true、false

l role(字符)默认:undefined

设置将要显示的页面的data-role的参数,默认情况下这个值是不定义的,因为JQM无法判断需要定义什么参数。

l pageContainer(jQuery对象)默认:$.mobile. pageContainer

将页面装载到指定的DOM元素中。

l type(字符)默认:”get”

定义请求页面时使用的方法(”get”或”post”)。

注意:此属性只有当$.mobile.changePage()的跳转目标是URL的时候才有效。

l data(对象或字符)默认:undefined

在发送Ajax页面请求时附带的数据。

注意:此属性只有当$.mobile.changePage()的跳转目标是URL的时候才有效。

l reloadPage(布尔)默认:false

强制重新载入页面,重新加载已经加载过的页面。

注意:此属性只有当$.mobile.changePage()的跳转目标是URL的时候才有效。

例子:

   1: $.mobile.changePage( "searchresults.php", {
   2:     type: "post", 
   3:     data: $("form#search").serialize(),
   4:     role:”dialog”
   5: });

$.mobile.loadPage (method)

从外部加载一个页面,在渲染后插入到当前页面的DOM中,并且不会影响到当前显示的页面内容。这个方法可以让我们在不影响当前显示页面的情况下在后台加载页面,这个方法经常用在需要预加载页面的情况下,并且可以通过$.mobile.changePage()方法来跳转到这个预加载的页面,只需配置URL参数就可以了。

参数:

l URL(字符或对象)相对或者绝对的URL。

可选项:

l role(字符)默认:undefined

设置将要显示的页面的data-role的参数,默认情况下这个值是不定义的,因为JQM无法判断需要定义什么参数。

l pageContainer(jQuery对象)默认:$.mobile. pageContainer

将页面装载到指定的DOM元素中。

l type(字符)默认:”get”

定义请求页面时使用的方法(”get”或”post”)。

注意:此属性只有当$.mobile.changePage()的跳转目标是URL的时候才有效。

l data(对象或字符)默认:undefined

在发送Ajax页面请求时附带的数据。

注意:此属性只有当$.mobile.changePage()的跳转目标是URL的时候才有效。

l reloadPage(布尔)默认:false

强制重新载入页面,重新加载已经加载过的页面。

注意:此属性只有当$.mobile.changePage()的跳转目标是URL的时候才有效。

l loadMsgDelay(数字)默认:50

在页面加载时间超出所设置的时间后显示加载信息框。在所设置的时间内加载完成将不会出现加载提示框。时间单位为毫秒。

例子:

   1: $.mobile.loadPage( "searchresults.php", {
   2:     type: "post", 
   3:     data: $("form#search").serialize()
   4: });    

jqmData(), jqmRemoveData(),jqmHasData() (method)

在元素上存取数据,使用方式和jQuery中的data和removeData完全相同。这些方法同样绑定到$和$.fn命名空间下,可以很方便的调用。

JQM扩展用法:选择器,在需要查找含有JQM定义的data属性的元素时,可以使用扩展的选择器”:jqmData()”,它会自动的匹配自定义的data命名空间(ns)。例如:$("div[data-role='page']")可以写为$("div:jqmData(role='page')") 。这个选择器将会经过内部的$("div[data-"+ $.mobile.ns +"role='page']")方法来解析,避免了手动匹配命名空间的麻烦。

$.mobile.showPageLoadingMsg ()

显示加载信息框,可以通过$.mobile.loadingMessage来配置加载信息框中的文本内容。

$.mobile.hidePageLoadingMsg ()

隐藏加载信息框。

$.mobile.path.parseUrl (method)

将一个URL地址解析并返回成为一个对象。返回的对象中包含类似浏览器中的location 对象信息,在相对路径URL中某些返回值可能为空值。

参数:

l URL(字符)相对或者绝对路径的URL。

返回值:

l hash

包含”#”的URL部分。

l host

URL中包含的主机和端口号。

l hostname

URL中包含的主机名称。

l href

被解析的原始URL。

l pathname

URL中引用的文件或者或目录的路径。

l port

URL中指定的端口,一般情况下为空。

l protocol

URL的协议,包含”:”。

l search

URL中附带的参数,一般标记”?”,也有其他形式的参数传递方式。

l authority

URL中用户名、密码、主机信息。

l directory

URL中的路径信息,不包含文件名。

l domain

URL中协议、地址信息。

l filename

URL中的文件名,不包含路径。

l hrefNoHash

不包含哈希信息的URL。

l hrefNoSearch

不包含传参和哈希信息的URL。

l password

URL授权信息中的密码部分。

l username

URL授权信息中的用户名部分。

$.mobile.path.makePathAbsolute (method)

将相对路径转换为绝对路径的方法。

参数:

relPath:(字符)相对路径。

absPath:(字符)用以参照的文件或者相对路径。

返回值:

(字符)返回一个绝对路径。

$.mobile.path.makeUrlAbsolute (method)

把相对URL地址转换为绝对的URL地址。

参数:

relUrl:(字符)相对的URL。

absUrl:(字符)用以参照的绝对URL。

返回值:

转换后绝对的URL

$.mobile.path.isSameDomain (method)

比较两个URL是否在相同的域。

参数:

url1:(字符)用于比对的URL

url2:(字符)参照的URL

返回值:

(布尔)如果在相同的域返回true,反之返回false。

$.mobile.path.isRelativeUrl (method)

判断一个URL是否是相对路径的方法。

参数:

url:(字符)一个相对或者绝对的URL。

返回值:

(布尔)如果是相对路径就返回true,如果是绝对路径就返回false。

$.mobile.path.isAbsoluteUrl (method)

判断一个URL是否是绝对路径的方法。

参数:

URL:(字符)一个相对或者绝对的URL。

返回值:

(布尔)如果是绝对路径的URL则返回true,如果是相对路径则会返回false。

$.mobile.base (methods, properties)

待完善

$.mobile.silentScroll (method)

在不触发滚动事件的情况下滚动到指定的Y轴位置。

参数:

yPos:(数字)默认:0;设置要滚动的位置。

$.mobile.addResolutionBreakpoints (method)

在页面中添加宽度断点。

参数:(数字或数组)通过数字或者数组来添加断点值。

$.mobile.activePage (property)

待完善



[本日志由 eddy 于 2011-10-09 10:39 AM 编辑]
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags:
相关日志:
评论: 2 | 引用: 0 | 查看次数: 8695
回复回复lei[2011-10-30 05:37 PM | del]
l pageContainer:(jQuery对象)默认:$.mobile. pageContainer
将页面装载到指定的DOM元素中。
这个属性到底是怎么用的可以讲解一下吗。我用了和没用一样啊,都是更新了整个页面。
回复来自 eddy 的评论 eddy 于 2011-10-31 11:51 AM 回复
pageContainer是$.mobile.changePage中的一个配置项。默认情况下,JQM会把AJAX加载的page页面追加到其他的的page页面之后,所有加载的page都并列的div。pageContainer可以把要加载的page插入的一个你预先定义的div中(前提是要有一个div容器).
例如:
<div id='eddyDemo'></div>

$.mobile.changePage( "next.html", {
    pageContainer:$('#eddyDemo')
   });
  
next.html中的page将会被加载到id=‘eddyDemo’的div中

回复来自 eddy 的评论 eddy 于 2011-10-31 12:36 AM 回复
这个设置和视觉结构没有关系,只是为了便于管理代码。
回复回复阿强[2011-10-18 02:27 PM | del]
jQM开发完毕,可以打包提供给客户端下载安装吗?就像是一个真正的客户端一样
回复来自 eddy 的评论 eddy 于 2011-10-19 01:55 PM 回复
jQM是web框架,但可以通过PhoneGap之类的工具将web应用打包为客户端应用
发表评论
昵 称:
密 码: 游客发言不需要密码.
内 容:
验证码: 验证码
选 项:
虽然发表评论不用注册,但是为了保护您的发言权,建议您注册帐号.
字数限制 300 字 | UBB代码 关闭 | [img]标签 关闭