九、方法与工具

在本章中，我们将介绍以下配方：

使用loadPage()加载页面
使用changePage()更改页面
使用jqmData()和jqmRemoveData()
使用jqmEnhanceable()
使用jqmHijackable()
使用$.mobile.base
解析 URL
使用$.mobile.path实用方法
使用无声滚动

导言

jquerymobile 框架提供了许多方法和实用程序来处理$.mobile对象。本章介绍如何使用这些方法和实用程序。

本章中所有配方的源文件位于档案的code/09文件夹下。每个配方都列在其自己的子文件夹中，并相应地命名。

使用 loadPage（）加载页面

使用$.mobile.loadPage()方法，您可以将背景中的外部页面加载到 DOM 中，并在不影响当前页面的情况下增强其内容。这个食谱告诉你如何做同样的事情。

准备好了吗

从code/09/loadpage源文件夹复制此配方的完整代码。您可以使用 URL:http://localhost:8080/09/loadpage/main.html启动此代码。

怎么做。。。

使用id="main"页面创建main.html，并添加一个空的div标签和一个指向#page1的链接，如下图：

<div data-role="content">
  <div id="msgdiv"></div>
  <a href="#page1" data-role="button">Show Page 1</a>
</div>

为#main的pagebeforeshow事件添加事件处理程序，并使用loadPage()方法加载#page1：

$("#main").live("pagebeforeshow", function(event, data) {
  $("#msgdiv").html("<p>Current Active Page : " 
    + $.mobile.activePage.attr("data-url") + "</p>");
 $.mobile.loadPage( "page1.html", {role: "dialog"});
});

为#page1的pagebeforeshow事件添加事件处理程序，更新显示的消息：

$("#page1").live("pagebeforeshow", function(event, data) {
  $("#page1content").html("<p>Current Active Page : " 
 + $.mobile.activePage.attr("data-url") + "</p>");
});

最后创建page1.html，如下图：

<div id="page1" data-role="page" data-theme="e">
  <div data-role="header">
    <h1>Header of Page 1</h1>
  </div>
  <div id="page1content" data-role="content"></div>
</div>

它是如何工作的。。。

使用#main页面创建 main.html，并在其中添加一个空的div和一个打开#page1的链接。#page1参考在pageinit期间不可用，因为它来自外部page1.html文件。在#main页面上添加pagebeforeshow事件的事件处理程序。这里，使用$.mobile.activePage()方法获取当前活动页面，并使用 jQueryattr()方法在#msgdiv中显示其data-url属性。接下来，使用$.mobile.loadPage()调用加载page1.html。另外，设置loadPage()选项，并将属性设置为dialog。页面现在在后台加载。

为#page1的pagebeforeshow事件添加事件处理程序。如前所述获取活动页面的data-url，并将其显示在#page1contentdiv 容器中。最后，用空 div 和id="page1content"创建page1.html。

当main.html加载时，您将看到显示第 1 页按钮。点击它，page1.html将显示为一个使用默认 pop 转换的对话框。此外，活动页面数据 URL 将正确显示在两个页面中。

还有更多。。。

$.mobile.loadPage()返回一个延迟的promise对象，一旦页面被增强并加载到 DOM 中，该对象将自动得到解析。

加载页面（）选项

loadPage()方法接受可选的options对象作为第二个参数。可以在options对象上设置以下属性：

data：这是 Ajax 页面请求的数据
loadMsgDelay（默认 50 秒）：这是页面加载消息显示之前的延迟
pageContainer：这是包含加载页面的元素
reloadPage（false默认）：强制页面重新加载
role：这是页面加载的data-role值
showLoadMsg（false默认）：决定是否显示页面加载消息
type（默认为get：指定 Ajax 请求的类型（get或post）

另见

使用 changePage（）更改页面配方
第 8 章、事件中的使用页面加载和删除事件配方

使用 changePage（）更改页面

本食谱向您展示了如何使用$.mobile.changePage()方法使用 JavaScript 将从一个页面更改为另一个页面。此配方使用第 6 章、列表视图中的拆分按钮列表配方扩展*，并在新页面中显示从列表项中选择的图像。*

准备好了吗

从code/09/changepage源文件夹复制此配方的完整代码。此外，使用第 6 章中的拆分按钮列表重新访问*。您可以使用 URL:http://localhost:8080/09/changepage/main.html启动此代码。*

怎么做。。。

创建带有拆分按钮列表的main.html，其中<img>标签的href属性具有file参数，图像文件的路径位于左侧按钮中，如下所示：

<div data-role="content">
  <ul data-role="listview" data-inset="true" 
    data-theme="b" data-split-theme="e" 
    data-split-icon="arrow-d">
    <li>
 <a href="#viewphoto&file=img1.png">
        <img style="margin: 10px" 
          src="../../resourcimg/img1.png" />
          <h3>Lal Bagh</h3>
      </a>
      <a href='#' data-rel='dialog'>Download</a>
    </li>
    <li>
 <a href="#viewphoto&file=img2.png">
        <img style="margin: 10px" 
          src="../../resourcimg/img2.png" />
          <h3>Peacock</h3>
      </a>
      <a href='#' data-rel='dialog'>Download</a>
    </li>
    <li>
 <a href="#viewphoto&file=img3.png">
        <img style="margin: 10px"  
          src="../../resourcimg/img3.png"
          height=75% />
          <h3>Ganesha</h3>
      </a>
      <a href='#' data-rel='dialog'>Download</a>
    </li>
  </ul>
</div>

添加#viewphoto页面，点击拆分按钮左侧打开：

<div id="viewphoto" data-role="page" data-theme="e" data-add-back-btn="true">
….....
  <div data-role="content">
    <div id="imgid">
    <p>Displaying Image ...</p>
    </div>
  </div>
</div>

将以下脚本添加到<head>部分，并在pagebeforechange事件处理程序中调用$.mobile.changePage()：

$(document).live( "pagebeforechange", function( e, data ) {
  if ( typeof data.toPage === "string" ) {
    var u = $.mobile.path.parseUrl( data.toPage );
    var re = /^#viewphoto&file/;
    if ( u.hash.search(re) !== -1 ) {
 $.mobile.changePage("main.html#viewphoto",
      {
        transition: "pop",
        dataUrl: u.hash.split("=")[1],
        type: "get"
      });
 e.preventDefault();
    }
  }
});

在#viewphoto页面的pagebeforeshow事件处理程序中显示图像：

$("#viewphoto").live( "pagebeforeshow", function( e, data ) {
  var u = $.mobile.path.parseUrl( document.location.href );
  var re = /^#img/;
  if ( u.hash.search(re) !== -1 ) {
    var str="<img src='../img/" + u.hash.substr(1) + "' />";
    $("#imgid").html(str).trigger("refresh");
  }
});

它是如何工作的。。。

在main.html中增加拆分按钮列表和#viewphoto页面，如代码所示。在#viewphoto页面的div标签中添加一个空的#imgid属性，以显示完整图像。拆分按钮列表和#viewphoto页面代码已在第 6 章中说明。右键的href属性只指向#，因为它不在本配方中使用。更改左侧按钮中的列表项href属性，以包含文件参数；例如，href="#viewphoto&file=img1.png"。当应用启动时，将显示以下带有缩略图的屏幕，如拆分按钮列表所示。

但是，当您单击拆分列表按钮时，不会发生任何事情，因为框架不理解具有href属性的文件参数。要打开并显示图像，您必须手动处理页面更改。要手动调用pageChange()，请为pagebeforechange事件添加事件处理程序。这里，检查目标页面（data.toPage是否为 URL 字符串，并使用$.mobile.path.parseUrl()方法获取 URL 组件。现在，使用正则表达式-#viewphoto&file在 URL 哈希中搜索文件参数。如果找到，则是查看图像的请求。您现在必须处理页面更改。

调用pageChange()方法并将main.html#viewphotoURL 传递给它。另外，使用transition、type和dataUrl的自定义值设置options参数。您可以通过拆分 URL 哈希将文件名信息存储在dataUrl中，如图所示。最后，防止默认的pagebeforechange事件处理，因为您已经在这里处理页面更改。

接下来，您需要查询pageChange()提供给file参数的 URL 字符串，并显示图像。为此，请为#viewphoto页面的pagebeforeshow事件添加事件处理程序。使用$.mobile.path.parseUrl()方法获取 URL 组件。搜索img表达式；如果找到，从 URL 散列中获取文件名，并在#imgiddiv 容器中显示图像，如代码所示。现在，如果您点击任何列表项，相应的图像将以较大的尺寸显示在#viewphoto页面中，如下图所示：

还有更多。。。

$.mobile.changePage()方法在页面更改期间内部使用$.mobile.loadPage()方法获取新页面。

更改页面（）选项

changePage()方法接受可选的options对象作为第二个参数。可以在options对象上设置以下属性：

allowSamePageTransition（false默认）：默认情况下忽略到当前活动页面的转换，但可以使用allowSamePageTransition选项启用
changeHash（true默认）：更新位置栏中的哈希值
data：这是 Ajax 页面请求的数据
dataUrl：这是页面更改后更新浏览器位置的 URL
pageContainer：这是包含加载页面的元素
reloadPage（false默认）：强制页面重新加载
reverse（false默认）：这是页面显示的过渡方向
role：提供显示页面的data-role值
showLoadMsg（false默认）：决定是否显示页面加载消息
transition：这是用于页面更改的转换
type（默认为get：指定 Ajax 请求的类型（get或post）

另见

使用 loadPage（）加载页面和解析 URL配方
使用拆分按钮列表配方，在第 6 章中列表视图
第 8 章、事件中的使用页面加载和删除事件配方

使用 jqmData（）和 jqmRemoveData（）

jqmData()和jqmRemoveData()方法可用于向 jQueryMobile 应用的元素添加或删除数据属性。它们自动处理自定义名称空间。本食谱向您展示了如何使用这些方法。

准备好了吗

从code/09/jqmdata源文件夹复制此配方的完整代码。您可以使用 URL:http://localhost:8080/09/jqmdata/main.html启动此代码。

怎么做。。。

在包含jquery.``mobile.js之前，在main.html中添加以下脚本：

$(document).bind("mobileinit", function() {
 $.mobile.ns = "my-";
});

在页面中添加两个文本输入和一个按钮，如下所示：

<div data-my-role="content">
  <div data-role="fieldcontain">
    <label for="pgtheme">Page Theme : </label>
    <input type="text" id="pgtheme" />
  </div>
  <div data-role="fieldcontain">
    <label for="customdata">Custom Data : </label>
    <input type="text" id="customdata" />
  </div>
  <button id="clearbtn">Clear Custom Data</button>
</div>

在<head>部分添加以下脚本以调用jqmData()和jqmRemoveData(``)方法：

$("#main").live("pageinit", function(event) {
 var pg = $("div:jqmData(role='page')");
 pg.jqmData("custom", "Custom data text");
   $("#pgtheme").attr("value", pg.jqmData("theme"));
   $("#customdata").attr("value", pg.jqmData("custom"));
   $("#clearbtn").bind("click", function(event, ui) {
 pg.jqmRemoveData("custom");
 $("#customdata").attr("value", 
 ""+pg.jqmData("custom")); 
   });
});

它是如何工作的。。。

在main.html中，在包含对jquery.mobile.js的引用之前，为mobileinit事件添加事件处理程序。此在应用启动时调用。在这里，设置$.mobile.ns="my-"名称空间配置。

使用id="pgtheme"和id="customdata"添加两个文本输入，分别显示页面主题和自定义数据。添加带有id="clearbtn"的按钮。接下来，将pageinit事件绑定到回调函数。在此函数中，使用div:jqmData(role='page')自定义选择器获取page元素。使用jqmData()可确保自动处理具有自定义命名空间的数据属性（data-my-role的查找。

使用jqmData()方法在页面上设置自定义数据属性，值为自定义数据文本，如下图所示。最后，在两个文本输入中显示页面主题和自定义数据属性。页面显示如下：

接下来，为#clearbtn添加click事件处理程序，使用jqmRemoveData()方法删除页面上设置的自定义数据属性，并更新自定义数据文本字段的值。现在，当您点击清除自定义数据按钮时，文本输入将显示未定义。

还有更多。。。

jQuery 方法data()、hasData()、removeData()、没有考虑data-属性的名称空间。您必须编写一个自定义代码来处理它。相反，使用jqmData()和jqmRemoveData()方法，如本配方所示。您可以使用 DOM 检查器检查代码，以验证自定义命名空间的使用。

另见

第 7 章配置中的配置默认名称空间配方

使用 jqmEnhanceable（）

当父元素上设置了data-enhance="false"时，它将被所有子元素继承。为了搜索可以使用手动增强或自定义插件创作的元素，jQueryMobile 框架提供了一个名为jqmEnhanceable()的过滤方法。这个食谱告诉你如何使用它。

准备好了吗

从code/09/jqmenhance源文件夹复制此配方的完整代码。您可以使用 URLhttp://localhost:8080/09/jqmenhance/main.html启动此代码。

怎么做。。。

在包含j``query.mobile.js之前，在main.html中添加以下脚本：

$(document).bind("mobileinit", function() {
 $.mobile.ignoreContentEnabled = true; 
});

如图所示，向页面添加两个定位按钮。第二个按钮位于具有data-``enhance="false"的div标签内。

<div data-role="content">
  <div>
    <a href="#">Link 1</a>
  </div>
 <div data-enhance="false">
    <a href="#">Link 2</a>
  </div>
</div>

在<head>部分添加以下脚本以调用jqmEnha``nceable()方法：

$("#main").live("pagecreate", function(event) {
 $("a").jqmEnhanceable().attr("data-role", "button");
});

它是如何工作的。。。

在main.html中，在包含对jquery.mobile.js的引用之前，为mobileinit事件添加一个事件处理程序，该引用在应用启动时调用。设置$.mobile.ignoreContentEnabled=true配置。

在#main的内容中增加两个div标签。向这两个div标签添加#链接。不要在任何一个链接上设置data-role="button"属性。第二个div标记设置了data-enhance="false"属性。接下来，将pagecreate事件绑定到事件处理程序。此时，页面已经initialzied，但小部件仍有待增强。现在调用锚元素上的jqmEnhanceable()方法，如图所示。这将过滤并仅提供那些没有从其父级继承data-enhance="false"的锚元素。因此，在代码中，Link 1是可用的。使用 jQueryattr()调用将其data-role属性设置为button，如代码所示。

现在，当您打开应用时，只有链接 1被增强为一个按钮，而链接 2没有被增强，如下图所示：

还有更多。。。

jqmEnhanceable()方法仅在$.mobile.ignoreContentEnabled=true配置设置时有效。访问每个元素的父节点并检查中的data-enhance值，任何具有false设置的父节点都将与其子元素一起从过滤集移除。

注

即使在一小部分元素上使用jqmEnhanceable()也是代价高昂的，因为所有父元素都会检查data-enhance值。

另见

*使用 jqmjackable（）*配方

使用 JQM 可劫持

当父元素上设置了data-ajax="false"时，所有子元素都会继承它。有一个名为jqmHijackable()的过滤方法用于搜索可以使用自定义表单和链接绑定的子元素。这个食谱告诉你如何使用这个方法。

准备好了吗

从code/09/jqmhijack源文件夹复制此配方的完整代码。您可以使用 URL:http://localhost:8080/09/jqmhijack/main.html启动此代码。

怎么做。。。

在包含jquery.mobile.js之前，在main.html中添加以下脚本：

$(document).bind("mobileinit", function() {
  $.mobile.ignoreContentEnabled = true;   
});

在页面中添加两个锚定按钮，如图所示。第二个按钮位于div标签内，标签上有data-ajax="false"：

<div data-role="content">
  <div>
    <a href="page1.html" data-role="button">Link 1</a>
  </div>
 <div data-ajax="false">
    <a href="page1.html" data-role="button">Link 2</a>
  </div>
</div>

将以下脚本添加到<head>部分以调用jqmHijackable()方法：

$("#main").live("pageinit", function(event) {
 $("a").jqmHijackable().each(function() {
    $(this).attr("data-transition", "flip");
  });
});

最后创建page1.html，如下代码片段所示：

<div id="page1" data-role="page" data-theme="e">
….....
  <div data-role="content">
    <p>Page 1 Content</p>
 <a href="main.html" data-direction="reverse" data-ajax="false"
      data-role="button">Go Back</a>
  </div>
</div>

它是如何工作的。。。

在main.html中，在包含对jquery.mobile.js的引用之前，为mobileinit事件添加一个事件处理程序。这将在应用启动时调用。设置$.mobile.ignoreContentEnabled=true配置。

在#main的内容中增加两个div标签。在这两个div标记中添加指向外部page1.html文件的链接。第二个div标记设置了data-ajax="false"属性。接下来，将pageinit事件绑定到事件处理程序，并在锚元素上调用jqmHijackable()方法，如图所示。这将过滤并仅提供那些没有从其父级继承data-ajax="false"的锚元素。因此，在代码中，Link 1是可用的。使用 jQueryattr()调用将其data-transition属性设置为flip，如代码所示。最后创建page1.html，添加返回链接返回#main页面。

现在，当您单击链接 1时，page1.html将打开翻转过渡。但是，如果您点击链接 2，则page1.html将在没有翻转的情况下打开。

还有更多。。。

在此配方中，链接 2使用data-ajax="false"打开page1.html。这将从 DOM 中清除main.html。返回到main.html会将main.html加载到 DOM 中，但不会触发mobileinit事件。这将导致链路 1在打开page1.html时不使用翻转过渡。要解决此问题，请添加data-ajax="false"属性以返回page1.html中的链接。这会将main.html重新加载到 DOM 中并触发mobileinit事件。现在，通过两条链路从main.html移动到page1.html可以顺利地工作任意次数。

$.mobile.ignoreContentEnabled 配置

jqmHijackable()方法仅在$.mobile.ignoreContentEnabled=true配置设置时有效。访问每个元素的父节点并检查其data-ajax值，任何具有false设置的父节点都将与其子元素一起从过滤集移除。

注

即使在一小部分元素上使用jqmHijackable()也是代价高昂的，因为所有父元素都会检查data-ajax值。

另见

*使用 jqmEnhanceable（）*配方

使用$.mobile.base

$.mobile.base对象提供对原始文档库的引用。您可以使用set()方法在基础对象上设置自定义值。您可以使用reset()方法还原到原始值。本食谱向您展示了如何使用这些实用方法。

准备好了吗

从code/09/base源文件夹复制此配方的完整代码。您可以使用 URL:http://localhost:8080/09/base/main.html启动此代码。

怎么做。。。

用两个按钮创建main.html，如下代码片段所示：

<div id="content" data-role="content">
  <div id="dispdiv"></div>
  <button id="changebtn">Set Document Base</button>
  <button id="resetbtn">Reset Document Base</button>
</div>

添加以下脚本以显示文档库对象值：

function disp() {
 var str = "<p>Original Document Base: " + $.mobile.getDocumentBase()
    + "</p>" + "<p>Document Base set to : " 
    + $.mobile.base.element.attr("href");
  $("#dispdiv").html(str);
}

调用pageinit事件处理程序中的$.mobile.base实用程序方法：

$("#main").live("pageinit", function(event) {
  disp();
  $("#changebtn").bind("click", function(event, ui) {
 $.mobile.base.set("http://localhost:8080/");
    disp();
  });
  $("#resetbtn").bind("click", function(event, ui) {
 $.mobile.base.reset();
    disp();
  });
});

它是如何工作的。。。

添加一个带id="dispdiv"的空div标签，并在main.html上添加两个按钮（#changebtn和#resetbtn，如图所示。增加disp()功能，显示#dispdivdiv 容器中的当前文档库和原始文档库值。您可以使用$.mobile.getDocumentBase()方法获取原始文档库。对pageinit事件调用disp()函数。第一次加载时，基本值显示如下：

现在，将#changebtn的点击事件绑定到事件处理程序，并使用$.mobile.base.set()方法将文档库设置为自定义值。现在点击设置文档库按钮，显示自定义库，如下图所示：

将#resetbtn绑定到事件处理程序，通过调用$.mobile.base.reset()方法重置文档库。点击重置单据基础按钮，您会看到基础值已经恢复。

解析 URL

$.mobile.path对象提供可用于处理 URL 的属性和方法。这个配方向您展示了如何使用$.mobile.path.parseUrl()方法获取 URL 的组件。

准备好了吗

从code/09/parseurl源文件夹复制此配方的完整代码。您可以使用 URL:http://localhost:8080/09/parseurl/main.html启动此代码。

怎么做。。。

使用空的div标记和锚定链接创建main.html，如下面的代码片段所示：

<div data-role="content">
  <div id="msgdiv"></div>
 <a href="http://user:pwd@localhost:8080/09/main.html?img=img1.png#imgview"
    data-role="button">Link 1</a>
</div>

在<head>部分添加以下脚本，以获取点击锚定按钮时的 URL:

$("#main").live("pageinit", function(event) {
 dispPath($.mobile.getDocumentUrl());
  $("a").bind("click", function(event, ui) {
    dispPath($(this).attr("href"));
    event.preventDefault();
    event.stopPropagation();
  });

添加以下方法显示 URL 的各个组件：

  function dispPath(urlstr) {
 var urlcomp = $.mobile.path.parseUrl(urlstr);
    var str = "<p>href: " + urlcomp.href + "</p>"
      + "<p>hrefNoHash: " + urlcomp.hrefNoHash + "</p>"
      + "<p>hrefNoSearch: " + urlcomp.hrefNoSearch + "</p>"
      + "<p>domain: " + urlcomp.domain + "</p>"
      + "<p>protocol: " + urlcomp.protocol + "</p>"
      + "<p>authority: " + urlcomp.authority + "</p>"
      + "<p>username: " + urlcomp.username + "</p>"
      + "<p>password: " + urlcomp.password + "</p>"
      + "<p>host: " + urlcomp.host + "</p>"
      + "<p>hostname: " + urlcomp.hostname + "</p>"
      + "<p>port: " + urlcomp.port + "</p>"
      + "<p>pathname: " + urlcomp.pathname + "</p>"
      + "<p>directory: " + urlcomp.directory + "</p>"
      + "<p>filename: " + urlcomp.filename + "</p>"
      + "<p>hash: " + urlcomp.hash + "</p>"
      + "<p>search: " + urlcomp.search + "</p>";
    $("#msgdiv").html(str);
  }
});

它是如何工作的。。。

在main.html中添加一个带id="msgdiv"的空div标签。添加一个带有复杂href字符串的链接，如代码所示。创建一个接收 URL 字符串的dispPath函数。在这里，调用$.mobile.path.parseUrl方法以获取包含 URL 的各种组件的对象（#urlcomp。在#msgdivdiv 容器中显示这些 URL 组件。首次加载应用时，调用pageinit事件处理程序中的dispPath()方法，通过调用$.mobile.getDocumentUrl()方法将其传递给文档 URL 参数got。第一次加载时显示以下屏幕截图：

接下来，为锚链的click事件添加事件处理程序。调用dispPath()函数，a 并将href属性作为参数传递给它。通过调用锚对象上的 jQueryattr("href")方法获取href属性。最后，调用event.preventDefault()和event.stopPropagation()方法来阻止点击事件的默认动作。现在，当您点击链接 1时，复合href属性的 URL 组件显示如下：

还有更多。。。

$.mobile.parseUrl()方法返回一个对象，该对象包含各种 URL 组件的字符串值，如下所示：；未使用特定 URL 组件时，将存储空字符串：

href：这是解析的原始 URL
hrefNoHash：这是没有散列组件的href属性
hrefNoSearch：这是href属性，没有搜索查询和散列
domain：此具有协议和权限组件
protocol：此为协议（含:字符）
authority：此有用户名、密码和主机组件
username：此为用户名
password：此为密码
host：这是主机和端口
hostname：此为主机的名称
port：此为端口（协议使用默认端口时可以为空）
pathname：此为所引用文件或目录的路径
directory：此为路径名的目录部分，无文件名
filename：这个是没有目录的路径名的文件名部分
hash：这是的散列组件（包括#字符）
search：此为查询组件（包含?字符）

另见

使用$.mobile.path 实用方法配方

使用$.mobile.path 实用工具方法

此配方向展示如何使用应用中$.mobile.path对象提供的实用方法。

准备好了吗

从code/09/path源文件夹复制此配方的完整代码。您可以使用 URL:http://localhost:8080/09/path/main.html启动此代码。

怎么做。。。

创建具有四个锚定链接的main.html页面，如以下代码段所示：

<div data-role="content">
  <div id="msgdiv"></div>
  <a href="http://localhost:8080/09/base/main.html"
    data-role="button">
    1: http://localhost:8080/09/base/main.html
  </a>
  <a href="http://localhost:8080/09/base/" data-
    role="button">
    2: http://localhost:8080/09/base/
  </a>
  <a href="page1.html" data-role="button">
    3: page1.html
  </a>
  <a href="../" data-role="button">4: ../</a>
</div>

将以下脚本添加到<head>部分，以获取单击的链接的 URL。

$("#main").live("pageinit", function(event) {
 var docurl = $.mobile.getDocumentUrl();
  $("a").bind("click", function(event, ui) {
    dispPath($(this).attr("href"));
    event.preventDefault();
    event.stopPropagation();
  });

增加disppath()功能显示$.mobile.path实用方法的输出：

function dispPath(urlstr) {
  var urlcomp = $.mobile.path.parseUrl(urlstr);
  var str = "<p>Base: " + docurl + "</p>" 
    + "<p>Page: " + urlcomp.href + "</p>"
    + "<p>Same Domain: " + $.mobile.path.isSameDomain(
    docurl, urlcomp) + "</p>"
    + "<p>is Absolute: "
    + $.mobile.path.isAbsoluteUrl(urlcomp) + "</p>"
    + "<p>is Relative: "
    + $.mobile.path.isRelativeUrl(urlcomp) + "</p>";
 if ($.mobile.path.isRelativeUrl(urlcomp)) {
      str += "<p>Make Absolute Path: " 
          + $.mobile.path.makePathAbsolute(urlcomp.href, 
            $.mobile.path.parseUrl(docurl).pathname) + "</p>"
          + "<p>Make Absolute Url: " 
          + $.mobile.path.makeUrlAbsolute(urlcomp.href, 
          docurl) + "</p>"
    }
    $("#msgdiv").html(str);
  }
});

它是如何工作的。。。

在main.html中添加一个带id="msgdiv"的空 div 标签。添加具有不同 URL 的四个链接，如代码所示。在<head>部分添加脚本，使用pageinit事件处理程序中的$.mobile.getDocumentUrl()方法获取页面的原始文档 URL（#docurl。使用此 URL 作为此配方中比较的参考点。

接下来，为四个锚链接的click事件添加一个事件处理程序。调用dispPath()函数，并将linkhref 属性作为参数传递给它。您可以通过调用锚对象上的 jQueryattr("href")方法来获取href属性。还可以在此事件处理程序中调用event.preventDefault()和event.stopPropagation()方法，以防止对click事件执行任何进一步的操作。

在dispPath函数中，调用$.mobile.path.parseUrl方法获取传入 URL 的的href组件。现在，调用各种$.mobile.path实用程序方法，并在#msgdivdiv 容器中显示它们的输出，如代码所示。调用isRelativeUrl()方法检查传入的 URL 是否相对。使用makePathAbsolute()和makeUrlAbsolute()方法将其转换为绝对值。原始文档 URL 用作这些转换的参考。

当页面加载时，您将看到四个链接按钮。点击第一个链接http://localhost:8080/09/path/main.html，将显示类似于以下屏幕截图的输出。该 URL 与参考 URL 位于同一域中，并且该 URL 也是绝对的。

第二个链接http://localhost:8080/09/base/指向一个文件夹。可以看到以下输出：；域是相同的，URL 是绝对的：

第三个链接page1.html是一个相对 URL。绝对路径和绝对 URL 使用参考 URL 计算并显示，如以下屏幕截图所示；此处的相同域值为false。

最后一个链接指向父目录../，也是一个相对 URL。使用参考 URL 计算绝对路径和 URL，并显示如下屏幕截图所示；同域值再次为假：

还有更多。。。

本配方中使用的$.mobile.path实用方法如下：

isAbsoluteUrl：检查给定的 URL 是否为绝对 URL
isRelativeUrl：检查给定的 URL 是否是相对的
makePathAbsolute：将相对路径转换为绝对路径；该方法使用引用路径参数进行转换
makeUrlAbsolute：将相对 URL 转换为绝对 URL；该方法使用引用 URL 参数进行转换
isSameDomain：检查两个 URL 是否属于同一个域

另见

解析 URL配方

使用无声滚动

您可以使用$.mobile.silentScroll方法滚动到页面上的任何垂直位置，而无需触发滚动事件侦听器。本食谱向您展示了如何使用无声滚动。

准备好了吗

从code/09/silentscroll源文件夹复制此配方的完整代码。您可以使用 URL:http://localhost:8080/09/silentscroll/main.html启动此代码。

怎么做。。。

使用空的div标签和两个按钮创建main.html，这两个按钮将用于滚动到页面的顶部和底部：

<div data-role="content">
  <button id="bottombtn">Page Bottom</button>
  <div id="dispdiv"></div>
  <button id="topbtn">Page Top</button>
</div>

将以下脚本添加到<head>部分以创建一个较长的页面：

$("#main").live("pageinit", function(event) {
  var str="";
  for (var i=0; i<100; i++) {
    str += i + "<br/>";
  }
  $("#dispdiv").html(str);

现在，根据单击的按钮，滚动到页面的顶部或底部：

  $("#topbtn").bind("click", function(event, ui) {
 $.mobile.silentScroll($.mobile.defaultHomeScroll); 
  });
  $("#bottombtn").bind("click", function(event, ui) {
 $.mobile.silentScroll(2000);
  });
});

它是如何工作的。。。

向main.html添加两个带有 IDbottombtn和topbtn的按钮。用id="dispdiv"创建一个空的div标记，并用一些冗长的内容填充它。这里，在pageinit事件上使用脚本在#dispdiv循环中添加 100 行文本。该页面最初显示如下：

绑定#bottombtn按钮的click事件调用$.mobile.silentScroll，Y 参数为大值（此处为 2000px）。现在，当您点击页面底部按钮时，页面滚动到文档底部的 Y 位置（2000px），如下图所示：

接下来，绑定#topbtn按钮的click事件，并将$.mobile.defaultHomeScroll属性作为参数传递给$.mobile.silentScroll。现在，点击页面顶部按钮，页面滚动回到顶部。

还有更多。。。

silentScroll方法不调用滚动事件监听器。添加以下代码以验证单击任何按钮时未显示警报。但当您使用滚动条时，会显示此警报。

$(window).bind("scrollstop", function(event) {
  alert("Scroll event was fired");
});

美元.mobile.defaultHomeScroll 属性

此配方中使用的$.mobile.defaultHomeScroll属性在 jQueryMobile 框架内部用于滚动到页面顶部。此值是使用$.support.scrollTop属性从浏览器中获取的。如果该值不是0，则框架将其设置为0。

另见

第 8 章事件中使用滚动事件配方

Files

09.md

Latest commit

History

09.md

File metadata and controls

九、方法与工具

导言

使用 loadPage（）加载页面

准备好了吗

怎么做。。。

它是如何工作的。。。

还有更多。。。

加载页面（）选项

另见

使用 changePage（）更改页面

准备好了吗

怎么做。。。

它是如何工作的。。。

还有更多。。。

更改页面（）选项

另见

使用 jqmData（）和 jqmRemoveData（）

准备好了吗

怎么做。。。

它是如何工作的。。。

还有更多。。。

另见

使用 jqmEnhanceable（）

准备好了吗

怎么做。。。

它是如何工作的。。。

还有更多。。。

注

另见

使用 JQM 可劫持

准备好了吗

怎么做。。。

它是如何工作的。。。

还有更多。。。

$.mobile.ignoreContentEnabled 配置

注

另见

使用$.mobile.base

准备好了吗

怎么做。。。

它是如何工作的。。。

解析 URL

准备好了吗

怎么做。。。

它是如何工作的。。。

还有更多。。。

另见

使用$.mobile.path 实用工具方法

准备好了吗

怎么做。。。

它是如何工作的。。。

还有更多。。。

另见

使用无声滚动

准备好了吗

怎么做。。。

它是如何工作的。。。

还有更多。。。

美元.mobile.defaultHomeScroll 属性

另见