jQuery Mobile操作HTML5的常用函数总结


Posted in Javascript onMay 17, 2016

一. $.mobile.changePage() & $.mobile.loadPage()
1.$.mobile.changePage()

$.mobile.changePage() 方法会在页面加载时自动调用,若这个页面为当前文档中的不同 "page",则会转到这个新页面隐藏旧页面;若这个页面为外部页面,即页面与当前页面不在同一文档中(本质上是新页面不在当前 DOM 中),$.mobile.changePage() 首先会调用 $.mobile.loadPage() 把外部页面的元素插入到 DOM 中,再显示新页面。这也是对页面加载过程的简单复述。

$.mobile.changePage() 有两个参数 to (string or object, 必须) 和 options (object, 可选),具体如下:

(1)—— to (string or object, 必须)

to 为必要参数,其值可以为 string(字符串,如 "about/us.html") 或 object(对象,如 $("#about")),这主要是面向两种不同的页面,string 形式的为外部页面链接,而 object 为同一文档中的不同 "page" ,如 "#page2" ,$.mobile.changePage() 会把其处理成包含这个 DOM 的 jQuery 对象,即 $('#page2') 这种形式,而 $.mobile.changePage() 内部会判断 to 参数的形式,若是 string 则调用 $.mobile.loadPage() 把外部页面的元素插入到 DOM 中,再显示页面。

(2)—— options (object, 可选)

options 为可选参数,其值为 object (对象),这个 object 包含多个属性,这些属性储存一个页面的各种参数,jQuery Mobile 会根据这些参数来控制如何加载页面,以及对页面进行初始化。具体属性值如下:

allowSamePageTransition (boolean, 默认值: false) 默认情况下,$.mobile.changePage() 是不会理会跳转到当前页面的请求。把这个属性设置为 "true" ,则可以允许这种请求

changeHash (boolean, 默认值: true) 判断地址栏上的哈希值是否应该被更新。

data (object 或 string, 默认值: undefined) Ajax 请求时发送的数据。仅当 to 参数的值为一个 URL 时可用。

dataUrl (string, 默认值: undefined) 当浏览器完成页面转换时要更新浏览器的地址栏上的 URL 。如不特别指定,则使用 data-url 的属性值。

pageContainer (jQuery collection, 默认值: $.mobile.pageContainer) 指定包含页面的 DOM 对象的 jQuery 对象。

reloadPage (boolean, 默认值: false) 强制刷新页面,即使页面容器的 DOM 已经准备好仍然会执行刷新。仅当 to 参数的值为一个 URL 时可用。

reverse (boolean, 默认值: false) 设置页面转场动画的方向。当该属性设置为 "true" 时页面转场反向。

role (string, 默认值: undefined) 显示页面的时候使用 data-role 值。默认情况下为 undefined,即取决于元素的 @data-role 属性值(标签上 data-role 的值)。

showLoadMsg (boolean, 默认值: true) 设置当加载外部页面时是否显示加载提示信息。

transition (string, 默认值: $.mobile.defaultPageTransition) 设置页面加载时使用的过场动画。

type (string, default: "get") 设置请求页面时使用的方法 ("get" 或 "post") 。仅当 to 参数的值为一个 URL 时可用。

这里引用例子说明一下 $.mobile.changePage() 的使用方法,手动调用该方法可以触发跳转到一个新页面,例如,在 Web Apps 发生错误时可以跳转到一个提示错误的页面。

// 转入到 "about us" 页面并使用 "slideup" 转场动画
$.mobile.changePage( "about/us.html", { transition: "slideup"} );
 
// 转入到 "search results" 页面, 使用 来自 id 为 search 的表单数据,并把页面请求方式改为 "post"
$.mobile.changePage('searchresults.php', {
  type: "post",
  data: $("form#search").serialize()
});
 
// 转入到 "confirm" 页面并使用 "pop" 转场动画,不更新历史记录(地址栏哈希值不更新)
$.mobile.changePage('../alerts/confirm.html', {
  transition: "pop",
  reverse: false,
  changeHash: false
});

发生错误时可以跳转到一个提示错误的页面。

$(function(){
  // 发生错误
  // 已 "slideup" 的方式弹出对话框提示发生了错误
  $.mobile.changePage('../alerts/confirm.html', {
    transition: "slideup",
    role: "dialog"
  });
});

2.$.mobile.loadPage()

如上面所述,$.mobile.loadPage() 用于加载一个外部页面,但这里的加载是指把外部页面的元素插入到当前 DOM 中,并在插入之前对页面内容进行 jQuery Mobile 增强 。该方法会被 $.mobile.changePage() 调用,条件是 $.mobile.loadPage() 的第一个参数 to 为 string (即加载的页面为外部页面)。这个方法仅仅是进行插入 DOM 操作,不会影响当前激活的页面,所以它可以用于在后台加载页面(只插入 DOM 而不显示页面),该方法会返回一个 deferred 对象,包含页面请求成功与否等相关信息,并会在页面增强和插入 DOM 后分解这个对象。

$.mobile.loadPage() 有两个参数 url (string or object, 必须) 和 options (object, 可选),具体情况如下:

(1)—— url (string or object, 必须)

该参数的值可以为 string 或 object ,无论是何种形式,必须为一个绝对或相对 URL 。若是由 $.mobile.changePage() 调用本方法时,则该参数值为 $.mobile.changePage() 的 to 参数值。

(2)—— options (object, 可选)

options 为可选参数,其值为 object (对象),实际上如由 $.mobile.changePage() 调用本方法时,该参数值为 $.mobile.changePage() 的 options 参数值。因此这个 object 与 $.mobile.changePage() 的 options 选项值相同,其具体属性值请参考 $.mobile.changePage() 中 options 的属性值。

这里引用例子说明一下 $.mobile.loadPage() 的使用方法,手动调用该方法可以在后台加载外部页面的元素并且不影响当前激活页面。
    

// 把 "about us" 页面加载到 DOM
$.mobile.loadPage('about/us.html');
 
// 转入到 "search results" 页面, 使用来自 id 为 search 的表单数据,并把页面请求方式改为 "post"
$.mobile.loadPage('searchresults.php', {
  type: "post",
  data: $('form#search').serialize()
});

二. $.fn.jqmData() & $.fn.jqmRemoveData()
当页面中使用了 jQuery Mobile ,jQuery Mobile 会使用 jqmData 和 jqmRemoveData 代替 jQuery 核心的 data 和 removeData 方法(注意,这包括了 jQuery 中的 $.fn.data , $.fn.removeData , $.data , $.removeData 和 $.hasData),这两个方法会自动获取和设置 data 属性的命名空间(即使当前没有使用命名空间)。

这两个方法的参数对应着 jQuery 的 data 和 removeData 方法的参数,具体如下:

(1)—— jqmData( jQuery.data() )

element 与该 data 属性相关联的 DOM 对象
key data 的命名字符串
value data 属性的值
(2)—— jqmRemoveData ( jQuery.removeData() )

element 与需要移除 data 属性相关联的 DOM 对象
name 需要移除的 data 的命名字符串
注意:当通过 jQuery Mobile data 属性寻找元素时,请使用自定义选择器:jqmData() ,它会在查询元素时自动合并 data 属性的命名空间。例如,你应该使用 $('div:jqmData(role="page")') 代替 $('div[data-role="page"]') ,因为前者会自动映射到 $("div[data-"+ $.mobile.ns +'role="page"]') ,而不需要强制把选择器与命名空间连接起来。例如:命名空间为 rn ,若使用后者即为 $('div[data-rn-role="page"]') ,这时如果更改了命名空间,则这个选择器便会失效,而使用前者则会自动映射到当前选择器中,即使更改命名空间也不会造成这个选择器失效。

但是也有例外的情况,就是根据 URL 值在命名空间中选择 data 属性,例如,jQuery Mobile 可以使用 :jqmData(url) 跟踪一个页面来自哪里,根据 URL 中的命名空间来选择空间内的 data 属性。这要求需要在选择器的括号内填写一个有效的 URL 。

三. $.fn.jqmEnhanceable()
这是判断元素是否要进行 jQuery Mobile 增强的方法,默认情况下,所有 jQuery Mobile 组件都会通过此方法放入 jQuery Mobile 增强集,以交给另一函数进行 jQuery Mobile 增强,包括添加相应的 HTML , CSS class 和交互。这是 jQuery Mobile 默认调用的方法,并且没有任何可选参数,但该方法仍有一个很值得注意的地方,在方法的实现函数内部,会判断默认配置 $.mobile.ignoreContentEnabled 的值,若为 true ,则会对调用该方法的 jQuery 对象的 DOM 父节点遍历,若父节点标签上设置了 data-enhance = "false" ,则不让该 DOM 对象加入增强集。事实上 jQuery Mobile 的官方文档并没有阐述 $.fn.jqmEnhanceable() 的具体使用方法,反而用了不少篇幅介绍这个注意事项。

另外还需要注意的是,遍历操作会设计元素的所有父节点,因此即使遍历一个很小的 jQuery 对象集的父节点也会消耗很多资源,开发则需要谨慎使用。若开发时已经明确不需要对某元素进行增强,建议还是直接不使用 data-role 触发相应的组件。

而如何设置 $.mobile.ignoreContentEnabled 的值,可以参考《使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 默认配置与事件基础》

四. $.fn.jqmHijackable()
这是判断元素是否加入 jQuery Mobile Ajax 导航,即使用 Ajax 进行处理的方法,与 $.fn.jqmEnhanceable() 相似,默认情况下这也是会为所有链接和表单提交执行,使到它们可以加入 jQuery Mobile Ajax 处理集合,交给另一函数处理。在 jQuery Mobile 内部,本方法与 $.fn.jqmEnhanceable() 最终都是调用了 haveParents 方法,来判断元素是否应该加入相应的集合。因此,本方法执行时会判断默认配置 $.mobile.ignoreContentEnabled ,若为 true ,则会对调用该方法的 jQuery 对象的 DOM 父节点遍历,若父节点上标签上设置了 data-ajax = "false" ,则不让该 DOM 对象加入 Ajax 导航集。当然,在使用这个特性时也需要注意遍历带来的大量资源消耗。

五. $.mobile.loading()
该方法从 jQuery Mobile 1.2 开始正式引进,控制显示或隐藏页面加载信息,包含两个参数,第一个是控制页面信息加载与否,只有 "show" 和 "hide" 两个值,第二个参数为多属性对象,具体的属性如下:

theme (string, 默认值: "a") 加载信息条的主题样式
text (string, 默认值: "loading") 加载信息条的文字内容
textonly (boolean, 默认值: false) 若设置为 true ,则加载页面时 "spinner" 图片(即旋形加载提示图,1.0 及之前版本为条形加载图)会被隐藏。
textVisible (boolean, 默认值: false) 若设置为 true ,提示的文字内容会置于 spinner 之下
html (string, 默认值: "") 如果个属性值不为空,则这个值会替代整个加载信息条的 HTML
下面引用例子说明 $.mobile.loading 的使用方法。
  

// 提示页面正在加载
$.mobile.loading('show');
 
// 加载信息条使用主题样式 "b" , 自定义提示文字内容,隐藏 "spinner" 图片
$.mobile.loading('show', { theme: 'b', text: '给力的加载中', textonly: true });

以下两个方法在 jQuery Mobile 1.2 中不赞成使用

六. $.mobile.hidePageLoadingMsg()
显示页面加载信息,基于 $.mobile.loadingMessage 配置出来,具体有三个参数

theme (string, default: "a") The theme swatch for the message.
msgText (string, default: "loading") The text of the message.
textonly (boolean, default: false) If true, the "spinner" image will be hidden when the message is shown.
例子:

// 使用主题样式 "b" ,自定义提示文字内容,隐藏 "spinner" 图片
$.mobile.showPageLoadingMsg('b', 'This is only a test', true);

在 jQuery Mobile 1.2 中,建议使用 $.mobile.loading('show') 代替。

七. $.mobile.hidePageLoadingMsg()
隐藏页面加载信息,基于 $.mobile.loadingMessage 配置出来,没有参数。

例子:

// 隐藏页面加载提示信息
$.mobile.hidePageLoadingMsg();

在 jQuery Mobile 1.2 中,建议使用 $.mobile.loading('hide') 代替。

八. $.mobile.fixedToolbars.show()
固定工具栏(包括固定的头部栏和尾部栏)可以通过点击屏幕在显示与隐藏之间切换,而这个方法则是手动显示一次工具栏。

它具有一个参数 immediately(boolean, 可选) 。把它设置为 true ,当前激活页面的所有固定工具栏都会立即显示出来。若设置为 false 或者没有指定,则会通过 100ms 的渐变显示出来。注意如 document 的 resize 和 scroll 等事件会导致额外的延时显示。

例子:
 

// 显示固定工具栏并且显示默认的渐变动画
$.mobile.fixedToolbars.show();
 
// 立即显示固定工具栏
$.mobile.fixedToolbars.show(true);

   
在 jQuery Mobile 1.1 中,不建议使用该方法,jQuery Mobile 并没有明确原因,但根据 jQuery Mobile 的习惯,这很可能是因为这个方法有很多不稳定性,如上面提到的遇到某些方法会出现额外的延时显示,这对于建立 Web Apps 是很不好的影响因素,它会从底层部分为 Web Apps 带来不可预知的问题。

九. $.mobile.fixedToolbars.hide()
固定工具栏(包括固定的头部栏和尾部栏)可以通过点击屏幕在显示与隐藏之间切换,而这个方法则是手动隐藏一次工具栏。

与 $.mobile.fixedToolbars.show() 相似,它具有一个参数 immediately(boolean, 可选) 。把它设置为 true ,当前激活页面的所有固定的工具栏都会立即隐藏。若设置为 false 或者没有指定,则会通过 100ms 的渐变隐藏起来。注意如 document 的 resize 和 scroll 等事件也会增加隐藏动画的时间。

例子:
   

// 隐藏固定工具栏并显示默认的渐变动画
$.mobile.fixedToolbars.hide();
 
// 立即隐藏固定工具栏
$.mobile.fixedToolbars.hide(true);

      
在 jQuery Mobile 1.1 中,也不建议使用该方法。

十. $.mobile.path.parseUrl()
本方法用于解析一个 URL 和它的相对形式,并且它的相关成分放入一个对象中,方便访问这些 URL 相关成分。当解析相对形式的 URL 时,返回的对象会自动为绝对形式 URL 中没有的成分(如 protocol, host , etc )添加空字符串作为值。另外,当解析的 URL 没有 authority (见下面的列表),返回的对象中的 pathname 属性会包含通信协议冒号后的数据。

$.mobile.path.parseUrl() 只有一个参数 URL (string, 可选) ,其值为一个 URL 的相对或绝对形式。

另外,$.mobile.path.parseUrl() 会返回一个包含 URL 相关成分的对象,这个对象的属性是模仿浏览器中的 location 对象。具体的属性如下:

hash URL 中的一个部分,从 URL 中第一个 "#" 开始的部分。
host URL 的主机名及端口。
hostname URL 的主机名。
href 被解析的原始 URL 。
pathname URL 所引用的文件或目录的路径。
port URL 中指定的端口。大多数 URLs 依赖于数据传输协议所用的默认端口,所以这个值在大多数时候都可能是空字符串。
protocol 数据传输协议,URL 中 ':' 之前的部分。
search URL 中的从 "?" 字符开始的部分,代表 URL 查询。另外它也包括提供给入口的额外成分,如一些常见形式的开发者访问。
authority URL 的用户名,密码,主机名
directory pathname 中的目录部分,并且不包括任何文件名。
domain URL 中的数据传输协议和用户名,密码,主机名等信息,即域。
filename pathname 中的文件部分,并且不包括任何目录名。
hrefNoHash 从原始 URL 中减去 hash 部分。
hrefNoSearch 从原始 URL 中减去 hash 和 search 部分。
password authority 中的 password 部分。
username authority 中的 username 部分。
例子:

// 解析一个 URL
var obj = $.mobile.path.parseUrl("http://jblas:password@mycompany.com:8080/mail/inbox?msg=1234");
 
// 解析这个 URL 会返回一个包含以下属性的对象
 
// obj.href:     http://jblas:password@mycompany.com:8080/mail/inbox?msg=1234&type=unread#msg-content
// obj.hrefNoHash:  http://jblas:password@mycompany.com:8080/mail/inbox?msg=1234&type=unread
// obj.hrefNoSearch: http://jblas:password@mycompany.com:8080/mail/inbox
// obj.domain:    http://jblas:password@mycompany.com:8080
// obj.protocol:   http:
// obj.authority:  jblas:password@mycompany.com:8080
// obj.username:   jblas
// obj.password:   password
// obj.host:     mycompany.com:8080
// obj.hostname:   mycompany.com
// obj.port:     8080
// obj.pathname:   /mail/inbox
// obj.directory:  /mail/
// obj.filename:   inbox
// obj.search:    ?msg=1234&type=unread
// obj.hash:     #msg-content

十一. $.mobile.path.makePathAbsolute()
把一个相对的文件或目录路径转化为绝对路径。

具有两个参数 relPath (string, 必须) 和 absPath (string, 必须) ,具体如下:

(1)—— relPath (string, 必须)

其值为一个相对的文件或目录路径。

(2)—— absPath (string, 必须)

用于解析的一个绝对的文件或相对的路径。

$.mobile.path.makePathAbsolute() 会返回一个包含相对路径的绝对路径版本的字符串。

例子:
      

// 返回: /a/b/c/file.html
var absPath = $.mobile.path.makePathAbsolute("file.html", "/a/b/c/bar.html");
 
// 返回: /a/foo/file.html
var absPath = $.mobile.path.makePathAbsolute("../../foo/file.html", "/a/b/c/bar.html");

十二. $.mobile.path.makeUrlAbsolute()
把一个相对 URL 转化为绝对 URL 。

具有两个参数 relUrl (string, 必选) 和 absUrl (string, 必选) ,具体如下:

—— relUrl (string, 必选)

一个相对形式的 URL 。

—— absUrl (string, 必选)

用于解析的一个绝对的文件或相对的路径。

$.mobile.path.makeUrlAbsolute() 会返回一个包含相对 URL 的绝对 URL 版本的字符串。

例子:

// 返回: http://foo.com/a/b/c/file.html
var absUrl = $.mobile.path.makeUrlAbsolute("file.html", "http://foo.com/a/b/c/test.html");
 
// 返回: http://foo.com/a/foo/file.html
var absUrl = $.mobile.path.makeUrlAbsolute("../../foo/file.html", "http://foo.com/a/b/c/test.html");
 
// 返回: http://foo.com/bar/file.html
var absUrl = $.mobile.path.makeUrlAbsolute("//foo.com/bar/file.html", "http://foo.com/a/b/c/test.html");
 
// 返回: http://foo.com/a/b/c/test.html?a=1&b=2
var absUrl = $.mobile.path.makeUrlAbsolute("?a=1&b=2", "http://foo.com/a/b/c/test.html");
 
// 返回: http://foo.com/a/b/c/test.html#bar
var absUrl = $.mobile.path.makeUrlAbsolute("#bar", "http://foo.com/a/b/c/test.html");

十三. $.mobile.path.isSameDomain()
比较两个 URL 的域。

具有两个参数 url1 (string, 可选) 和 url2 (string, 可选) 具体情况如下:

—— url1 (string, 可选)

一个相对 URL。

—— url2 (string, 可选)

url2 (string, required) 一个需要解析的绝对 URL 。

返回值为 boolean 型变量,若两个域匹配,则返回 "true" ,否则返回 "false" 。

例子:
       

// 返回: true
var same = $.mobile.path.isSameDomain("http://foo.com/a/file.html", "http://foo.com/a/b/c/test.html");
 
// 返回: false
var same = $.mobile.path.isSameDomain("file://foo.com/a/file.html", "http://foo.com/a/b/c/test.html");
 
// 返回: false
var same = $.mobile.path.isSameDomain("https://foo.com/a/file.html", "http://foo.com/a/b/c/test.html");
 
// 返回: false
var same = $.mobile.path.isSameDomain("http://foo.com/a/file.html", "http://bar.com/a/b/c/test.html");

十四. $.mobile.path.isRelativeUrl()
判断一个 URL 是否是相对 URL 。

它具有一个参数 URL (string, 必选) ,其值为一个相对或绝对的 URL 。

返回值为 boolean 型变量,若 URL 为相对形式的 URL ,则返回 "true" ,否则返回 "false" 。

例子:

// 返回: false
var isRel = $.mobile.path.isRelativeUrl("http://foo.com/a/file.html");
 
// 返回: true
var isRel = $.mobile.path.isRelativeUrl("//foo.com/a/file.html");
 
// 返回: true
var isRel = $.mobile.path.isRelativeUrl("/a/file.html");
 
// 返回: true
var isRel = $.mobile.path.isRelativeUrl("file.html");
 
// 返回: true
var isRel = $.mobile.path.isRelativeUrl("?a=1&b=2");
 
// 返回: true
var isRel = $.mobile.path.isRelativeUrl("#foo");

十五. $.mobile.path.isAbsoluteUrl()
判断一个 URL 是否是绝对 URL 。

它具有一个参数 URL (string, 必选) ,其值为一个相对或绝对的 URL 。

返回值为 boolean 型变量,若 URL 为绝对形式的 URL ,则返回 "true" ,否则返回 "false" 。

例子:

// 返回: true
var isAbs = $.mobile.path.isAbsoluteUrl("http://foo.com/a/file.html");
 
// 返回: false
var isAbs = $.mobile.path.isAbsoluteUrl("//foo.com/a/file.html");
 
// 返回: false
var isAbs = $.mobile.path.isAbsoluteUrl("/a/file.html");
 
// 返回: false
var isAbs = $.mobile.path.isAbsoluteUrl("file.html");
 
// 返回: false
var isAbs = $.mobile.path.isAbsoluteUrl("?a=1&b=2");
 
// 返回: false
var isAbs = $.mobile.path.isAbsoluteUrl("#foo");

十六. $.mobile.path.get()
该方法可以判断一个 URL 的目录部分。如果 URL 末尾没有反斜杠,则 URL 最后的部分会被认为是文件名。这个情况对于站长来说应该不陌生,如 http://kayosite.com/aaa/ ,URL 中最后的部分 "aaa/" 应该是一个目录,而 http://kayosite.com/aaa/xxx.zip 中最后的部分 "xxx.zip" 则应该是一个文件名。这也是 Kayo 之前建议注意网址末尾是否需要添加反斜杠的原因。

这个方法具有一个参数 url (string, 必选) ,其值是一个相对或绝对的 URL 。

返回值为 URL 中的目录部分。

例子:
      

// 返回: http://foo.com/a/
var dirName = $.mobile.path.get("http://foo.com/a/file.html");
 
// 返回: http://foo.com/a/
var dirName = $.mobile.path.get("http://foo.com/a/");
 
// 返回: http://foo.com/a
var dirName = $.mobile.path.get("http://foo.com/a");
 
// 返回: //foo.com/a/
var dirName = $.mobile.path.get("//foo.com/a/file.html");
 
// 返回: /a/
var dirName = $.mobile.path.get("/a/file.html");
 
// 返回: ""
var dirName = $.mobile.path.get("file.html");
 
// 返回: /
var dirName = $.mobile.path.get("/file.html");
 
// 返回: ?a=1&b=2
var dirName = $.mobile.path.get("?a=1&b=2");
 
// 返回: foo
var dirName = $.mobile.path.isAbsoluteUrl("#foo");

十七. $.mobile.base
获取根元素。

十八. $.mobile.silentScroll()
静默滚动到某个 Y 值处,并且不触发任何事件。

它具有一个参数,yPos (number, 默认为 0),其值为需要滚动到的 Y 位置。

十九. $.mobile.activePage
引用当前激活的页面。

二十. 关于方法的调用
1. 方法调用相应 JavaScript 的引入

在介绍自定义 jQuery Mobile 默认配置时,曾经说明了相应的 JavaScript 语句需要放置在 jQuery 库和 jQuery Mobile 库之间,而 jQuery Mobile 方法是对 jQuery Mobile 的调用,因此需要在引入 jQuery Mobile 库之后调用,具体如下:

<script src="jquery.min.js"></script>
<!-- 引入自定义 jQuery Mobile 默认配置相应的 JavaScript -->
<script src="custom-mobile.js"></script>
<script src="jquery-mobile.min.js"></script>
<!-- 引入 jQuery Mobile 的调用,包括 jQuery Mobile 的方法、事件检测等全部应用性 JavaScript -->
<script src="my-site.js"></script>

2. 方法的调用

对于 jQuery 开发者,应该比较习惯在触发 ready 事件后执行 JavaScript ,例如:

$(document).ready(function(){
  // 执行 JavaScript
});

或简写为,

$(function(){
  // 执行 JavaScript
});

这里说明一下,当 DOM 已经加载,并且页面(包括图像)已经完全呈现出时,会触发 ready 事件。

而在系列文章的上一篇中,Kayo 介绍了 pageinit 事件,它在 DOM 加载完成后(包括 jQuery Mobile 对元素的 DOM 增强),就会触发,即它比 ready 更早的触发。

但由于 jQuery Mobile 驱动的网站由 Ajax 导航,因此即使一个文档中包含多个 'page' ,当第一个 'page' 的 DOM 和内容加载完毕后就会触发 ready 事件,而 pageint 也只需第一个 'page' 的 DOM 加载完毕后即触发。

而最终利用那种事件作为开始调用方法的合适时机,会涉及很多方便的考虑,开发者应该根据实际情况作出选择。

下面例举一个例子说明如何调用 jQuery Mobile 方法,由于 jQuery Mobile 的方法很多,这里只使用 $.mobile.changePage() 方法演示如何调用方法。例子中的 JavaScript 代码如下:

$(function(){
 
  $("#home").bind('swipeleft', function(){
 
    $.mobile.changePage('./page-2.html', {
      transition: "slide",
      role: "dialog"
    });
 
  });
});

上例中通过检测向左划动事件触发跳转到一个外部页面,同时使用 'slide' 转场动画并以对话框形式显示新页面。

Javascript 相关文章推荐
一个很简单的办法实现TD的加亮效果.
Jun 29 Javascript
10个实用的脚本代码工具
May 04 Javascript
javascript异步处理工作机制详解
Apr 13 Javascript
Javascript递归打印Document层次关系实例分析
May 15 Javascript
jquery easyui datagrid实现增加,修改,删除方法总结
May 25 Javascript
使用vue.js编写蓝色拼图小游戏
Mar 17 Javascript
Zepto实现密码的隐藏/显示
Apr 07 Javascript
微信小程序基于slider组件动态修改标签透明度的方法示例
Dec 04 Javascript
详解webpack+ES6+Sass搭建多页面应用
Nov 05 Javascript
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
Nov 16 Javascript
vue 实现LED数字时钟效果(开箱即用)
Dec 08 Javascript
JS自定义对象创建与简单使用方法示例
Jan 15 Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
May 17 #Javascript
基于Bootstrap3表格插件和分页插件实例详解
May 17 #Javascript
Winform客户端向web地址传参接收参数的方法
May 17 #Javascript
Bootstrap carousel轮转图的使用实例详解
May 17 #Javascript
js和jq使用submit方法无法提交表单的快速解决方法
May 17 #Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
May 17 #Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(二)
May 17 #Javascript
You might like
《魔兽争霸3:重制版》更新 多项视觉效果调整
2020/05/04 魔兽争霸
php学习笔记之面向对象
2014/11/08 PHP
使用php的HTTP请求的库Requests实现美女图片墙
2015/02/22 PHP
PHP中的命名空间详细介绍
2015/07/02 PHP
用js实现的一个Flash滚动轮换显示图片代码生成器
2007/03/14 Javascript
JavaScript实现快速排序(自已编写)
2012/12/19 Javascript
使用JS取得焦点(focus)元素代码
2014/03/22 Javascript
实例详解ECMAScript5中新增的Array方法
2016/04/05 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
2016/12/01 Javascript
js仿微信语音播放实现思路
2016/12/12 Javascript
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
2017/09/10 Javascript
vue.js与element-ui实现菜单树形结构的解决方法
2018/04/21 Javascript
vue移动端路由切换实例分析
2018/05/14 Javascript
js 将线性数据转为树形的示例代码
2019/05/28 Javascript
vue 保留两位小数 不能直接用toFixed(2) 的解决
2020/08/07 Javascript
python学习笔记之调用eval函数出现invalid syntax错误问题
2015/10/18 Python
Python cookbook(数据结构与算法)在字典中将键映射到多个值上的方法
2018/02/18 Python
python实现隐马尔科夫模型HMM
2018/03/25 Python
python将回车作为输入内容的实例
2018/06/23 Python
Python读取txt文件数据的方法(用于接口自动化参数化数据)
2018/06/27 Python
Python判断一个文件夹内哪些文件是图片的实例
2018/12/07 Python
基于Django框架的权限组件rbac实例讲解
2019/08/31 Python
Python如何用filter函数筛选数据
2020/03/05 Python
python re模块常见用法例举
2021/03/01 Python
CSS3动画:5种预载动画效果实例
2017/04/05 HTML / CSS
俄罗斯的精英皮具:Wittchen
2018/01/29 全球购物
英国邮购活的植物主要供应商:Gardening Direct
2019/01/28 全球购物
会计毕业生求职简历的自我评价
2013/10/20 职场文书
《美丽的公鸡》教学反思
2014/02/25 职场文书
幼儿园毕业典礼主持词
2014/03/21 职场文书
企业精细化管理实施方案
2014/03/23 职场文书
乡党委干部党的群众路线教育实践活动个人对照检查材料思想汇报
2014/10/01 职场文书
2015年南京大屠杀纪念日活动总结
2015/03/24 职场文书
k-means & DBSCAN 总结
2021/04/27 Python
使用Python开发贪吃蛇游戏 SnakeGame
2022/04/30 Python
MySQL导致索引失效的几种情况
2022/06/25 MySQL