jQuery Mobile Pagecontainer load()用法及代码示例

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

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

句法：

调用load方法：

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

加载外部页面，增强其内容，并将其插入到 DOM 中：

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

Parameters: 此方法接受两个参数，如下所示：

url:该参数是加载页面的 URL。这可以是绝对或相对 URL(例如“about/us.html”)。
options: 这个参数是包含影响方法行为的选项的散列。
- type: 它的默认值为“get”。使用的HTTP请求类型是“get”, “post”等。
- data:其默认值未定义。它是通过 Ajax 页面请求发送的数据。
- reloadPage: 它表示是否强制重新加载页面，即使该页面已经在 DOM 中。仅当 ‘url’ 参数是 URL 时才使用此选项。它的默认值为 false，并且是 boolean 类型。从 jQuery Mobile 1.4.0 开始，此属性已弃用，并将在 1.5.0 中删除。请改用属性重新加载。
- reload: 这表示是否强制重新加载页面，即使它已经在 DOM 中。仅当 ‘url’ 参数是 URL 时才使用此选项。它是布尔类型，默认值为 false。
- role: 这是显示页面时要使用的data-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 页面容器load()方法。

HTML


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

输出：

参考： https://api.jquerymobile.com/pagecontainer/#method-load

相关用法

注：本文由纯净天空筛选整理自Kanchan_Ray大神的英文原创作品 jQuery Mobile Pagecontainer load() Method。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。