jQuery Mobile Pagecontainer load()方法

jQuery Mobile是一种基于网络的技术，用于制作可在所有智能手机、平板电脑和台式机上访问的响应式内容。

在这篇文章中，我们将使用jQuery Mobile Pagecontainer load()方法，从指定的URL加载页面。

语法:

调用加载方法。

$(".selector").pagecontainer("load");

加载一个外部页面，增强其内容，并将其插入DOM中。

$(":mobile-pagecontainer").pagecontainer(
    "load", "confirm.html", { 
        role: "dialog" 
    }
);

参数：该方法接受两个参数，如下图所示。

url。这个参数是用来加载页面的URL。这可以是一个绝对的或相对的URL（例如，”about/us.html”）。
options。这个参数是一个哈希值，包含影响方法行为的选项。
- type。它的默认值是 “get”。要使用的HTTP请求的类型是 “get”、”post “等。
- data。它的默认值是未定义的。它是与Ajax页面请求一起发送的数据。
- reloadPage。它表示是否强制重新加载页面，即使它已经在DOM中。只有当’url’参数是一个URL时，才会使用这个参数。它的默认值是false，它是布尔类型的。这个属性在jQuery Mobile 1.4.0中被废弃，并将在1.5.0中被删除。使用属性reload代替。
- reload。这表示是否要强制重新加载页面，即使它已经在DOM中。只有当’url’参数是一个URL时，才会使用这个参数。它是布尔类型的，其默认值是false。
- role。这是显示页面时要使用的数据角色值。它的默认值是未定义的。
- showLoadMsg: 它说的是是否要显示一个表明页面正在加载的信息。它是布尔类型的，其默认值是true。
- loadMsgDelay:这里说的是延迟出现加载信息的毫秒数。如果加载在这个时间内完成，就不显示加载信息。它的默认值是50。

返回值：该方法不返回任何值。

CDN链接：首先，添加你的项目需要的jQuery Mobile脚本。

<link rel=”stylesheet” href=”//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css” />
<script src=”//code.jquery.com/jquery-3.2.1.min.js”></script>
<script src=”//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js”></script>

例子：这个例子描述了jQuery Mobile Pagecontainer load()方法。

<!doctype html>
<html lang="en">
  
<head>
    <link rel="stylesheet" href=
"//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css"/>
  
    <script src=
"//code.jquery.com/jquery-3.2.1.min.js">
    </script>
  
    <script src=
"//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js">
    </script>
</head>
  
<body>
  <center>
    <div data-role="page" id="GFG1">
      <h1 style="color:green;">
          GeeksforGeeks
      </h1>
  
      <h3>
        jQuery Mobile Pagecontainer 
        load() Method
      </h3>
  
      <div data-role="header">
          <h1>First Page</h1>
      </div>
  
      <div role="main">
          <a href="#GFG2" data-transition="slide">
            Go To Second Page
          </a>
      </div>
  
      <input type="button" id="Button" 
             value="Invoke the load() Method">
      <div id="log"></div>
    </div>
  
    <div data-role="page" id="GFG2">
      <h1 style="color:green;">
        GeeksforGeeks
      </h1>
  
      <h3>
        jQuery Mobile Pagecontainer 
        load() Method
      </h3>
  
      <div data-role="header">
        <h1>Second Page</h1>
      </div>
  
      <div role="main">
        <a href="#GFG1" data-rel="back" 
          data-transition="slide">
          Go Back To First Page
        </a>
      </div>
  
      <input type="button" id="Button" 
        value="Invoke the load() Method">
      <div id="log"></div>
    </div>
  </center>
  
  <script>
     $(document).ready(function () {$ ("#Button").on('click', function () {
        $("#GFG2").pagecontainer("load");
      });
    });
  </script>
</body>
  
</html>

输出:

jQuery Mobile Pagecontainer load()方法