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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。