使用 jQuery Mobile 与 HTML5 开发 Web App (十四) —— jQuery Mobile 方法下

本文承接上文《使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 方法上》，继续说明 jQuery Mobile 的方法，这部分内容主要与页面 URL 解析相关，除此之外还有其他一些实用方法。

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

八. $.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:[email protected]:8080/mail/inbox?msg=1234");
 
// 解析这个 URL 会返回一个包含以下属性的对象
 
// obj.href:         http://jblas:[email protected]:8080/mail/inbox?msg=1234&type=unread#msg-content
// obj.hrefNoHash:   http://jblas:[email protected]:8080/mail/inbox?msg=1234&type=unread
// obj.hrefNoSearch: http://jblas:[email protected]:8080/mail/inbox
// obj.domain:       http://jblas:[email protected]:8080
// obj.protocol:     http:
// obj.authority:    jblas:[email protected]: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, 必须) ，具体如下：

—— relPath (string, 必须)

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

—— 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' 转场动画并以对话框形式显示新页面。

也可以看 Demo（建议使用 PC 上的 Firefox、Chrome 等现代浏览器和 IE9+ 或 Android , iPhone/iPad 的系统浏览器浏览，下同）。

在这个例子中，并不适合利用 pageinit 事件，下面再放上一个 Demo ，其内容与上例大致相同，只是利用的 pageinit 事件，读者可以测试这个 Demo ，可能会发生不断在两个页面往复来回的问题。这是因为，从第二页返回第一页并触发 pageinit 事件时，第一页的 DOM 已加载完毕，包括 JavaScript 语句，但页面过场并未开始，这时页面再直接滑动，可能会重新触发 swipeleft 事件，于是不断往复。因此，在使用 pageinit 事件时需要考虑 jQuery Mobile 中其他事件、方法之间的互相影响。

pageinit 版本 Demo

原文由 Kayo Lee 发表，原文链接：http://kayosite.com/web-app-by-jquery-mobile-and-html5-methods-part-two.html