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

原创

zhangying2001 2023-05-12 22:29:47 ©著作权

文章标签 javascript 移动开发 ViewUI html jQuery 文章分类 办公效率

©著作权归作者所有：来自51CTO博客作者zhangying2001的原创作品，请联系作者获取转载授权，否则将追究法律责任

本文承接上文《使用 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: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, 必须) ，具体如下：

—— 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