jQuery Mobile Pagecontainer load()方法

jQuery Mobile是一个基于web的跨平台用户界面框架，它提供了许多方法来操作DOM元素和执行异步操作，其中之一是load()方法。该方法属于pagecontainer对象，用于加载一个外部页面并将其插入当前页面的DOM结构中。

语法

load(url, options)

参数说明：

• url： 必填项，指定要加载的页面URL地址。
• options： 选填项，一个JavaScript对象，包含一些用于加载外部页面的选项设置，例如要向加载页面传递的数据、加载是否需要用动画效果等。

示例

示例一：基础用法

下面是一个最简单的load()方法调用示例：

$(document).on("pagecreate", function(){
  $(".btn").on("click", function(){
    $.mobile.pageContainer.load("page2.html");
  });
});

这个示例向pagecreate事件绑定了一个事件处理函数，当页面创建时，任何类名为btn的元素被点击时，load()方法将加载一个名为page2.html的外部页面并将其插入到当前页面的DOM结构中。

示例二：传递参数

你也可以使用load()方法传递参数到外部页面。例如，假设我们有一个名为page3.html的页面，需要接收一个名为id的查询参数，在当前页面的脚本中，我们可以这样编写代码：

$(document).on("pagecreate", function(){
  $(".btn").on("click", function(){
    var id = 123;
    $.mobile.pageContainer.load("page3.html?id=" + id);
  });
});

在外部页面page3.html中，我们可以通过以下方式访问id参数：

$(document).on("pagecreate", function(){
  var id = $.mobile.pageContainer.pagecontainer("getActivePage").data("url").split("=").pop();
  console.log(id); // 输出123
});

在上面的代码中，我们使用getActivePage()方法获取当前活动页面的jQuery对象，然后使用data()方法获取URL参数。最后，通过split()和pop()方法截取并输出id参数的值。

结论

load()方法是pagecontainer对象的一个有用的方法，用于动态地加载外部页面并将其插入到当前页面的DOM结构中。有了这个方法，你就可以轻松地实现动态加载内容的功能以及向外部页面传递参数。