非jqueryMobile頁面加載到jQM DOM與jQM頁眉和頁腳

Question

我有一個單一的HTML頁面，我正在使用jquery移動創建一個具有data-role =「page」屬性的多個div的web應用程序。每個頁面都有一個固定的頁眉和頁腳，通過頁面轉換保持一致。

但是，我想加載另一個未構建在jquery-mobile框架中但在同一目錄中的html頁面，並在頁面上顯示持久的固定頁眉和頁腳。

這可能嗎？我已經看過使用$ mobile.changePage（）和$ mobile.loadPage（）的jquery Mobile文檔，但我不清楚如何實現它。

我迄今這個（每@編輯傑克的說明）：

HTML

<div data-role="page" id="dog_bars"> 
    <div data-role="header" data-position="fixed" data-id="dog_header" class="custom_dog_header"> 
     <h1>Dog About Town</h1> 
    </div> 
    <div data-role="content"> 
     <ul data-role="listview" data-filter="true"> 
      <li data-icon="home"><a href="#external_page" data-transition="slide" id="external_link"> 
       <h2>303 Bar &amp; Grill</h2> 
       <p>303 W. Davis St., Dallas</p> 
     </a></li> 
      </ul> 
    </div> 
    <div data-role="footer" data-id="bestFooter" data-position="fixed"> 
     <nav data-role="navbar"> 
      <ul>     
       <li><a href="#home" data-transition="slide" data-role="button" data-icon="home">Home</a></li> 
       <li><a href="#about" data-transition="slide" data-role="button" data-icon="gear">About</a></li>      
      </ul>    
     </nav> 
    </div><!-- end footer -->   
</div> 


<!-- page to be loaded into --> 

<div data-role="page" class="content_page" id="external_page"> 
    <div data-role="header" data-position="fixed" data-id="dog_header" class="custom_dog_header"> 
     <h1>Casual Dining</h1> 
    </div><!-- end header --> 
    <section data-role="content" class="content" id="external"> 

    </section> 
    <div data-role="footer" data-id="bestFooter" data-position="fixed"> 
     <nav data-role="navbar"> 
      <ul>     
       <li><a href="#home" data-transition="slide" data-role="button" data-icon="home">Home</a></li> 
       <li><a href="#dog_casual" data-transition="slide" data-role="button" data-icon="back">Back</a></li>      
       <li><a href="#about" data-transition="slide" data-role="button" data-icon="gear">About</a></li>      
      </ul>    
     </nav> 
    </div><!-- end footer --> 
</div><!--end page--> 

jQuery的

$(document).on('pageinit'(function() { 
$("#external").load("external_page.html").trigger("create"); 
})); 

目前，點擊鏈接加載#external_page只是罰款頁眉和頁腳，但external_page.html的內容不加載。 #external_page的部分仍爲空。

想法？

Answer 1

你應該使用jQuery的load加載外部頁面，然後包裹在一個div與適當的頁眉/頁腳一個data-role="page"，它追加到DOM，然後觸發create event以初始化頁面能夠這樣。或者，您也可以在第一頁上準備頁面包裝（div與data-role="page"），並將外部頁面的內容插入到那裏（您現在試圖這樣做）。

看着您當前的JavaScript，您的語法爲.on有點關閉，並且您遺漏了一個逗號。

使用您的標記，你應該能夠做到以下幾點

<div data-role="page" id="dog_bars"> 
    <div data-role="header" data-position="fixed" data-id="dog_header" class="custom_dog_header"> 
     <h1>Dog About Town</h1> 
    </div> 
    <div data-role="content"> 
     <ul data-role="listview" data-filter="true"> 
      <li data-icon="home"><a href="#external_page" data-transition="slide" id="external_link"> 
       <h2>303 Bar &amp; Grill</h2> 
       <p>303 W. Davis St., Dallas</p> 
     </a></li> 
      </ul> 
    </div> 
    <div data-role="footer" data-id="bestFooter" data-position="fixed"> 
     <nav data-role="navbar"> 
      <ul>     
       <li><a href="#home" data-transition="slide" data-role="button" data-icon="home">Home</a></li> 
       <li><a href="#about" data-transition="slide" data-role="button" data-icon="gear">About</a></li>      
      </ul>    
     </nav> 
    </div><!-- end footer -->   
</div> 


<!-- page to be loaded into --> 

<div data-role="page" class="content_page" id="external_page"> 
    <div data-role="header" data-position="fixed" data-id="dog_header" class="custom_dog_header"> 
     <a href="#" data-rel="back" data-icon="back">Back</a> <h1>Casual Dining</h1> 
    </div><!-- end header --> 
    <section data-role="content" class="content" id="external"> 

    </section> 
    <div data-role="footer" data-id="bestFooter" data-position="fixed"> 
     <nav data-role="navbar"> 
      <ul>     
       <li><a href="#home" data-transition="slide" data-role="button" data-icon="home">Home</a></li> 
       <li><a href="#dog_casual" data-transition="slide" data-role="button" data-icon="back">Back</a></li>      
       <li><a href="#about" data-transition="slide" data-role="button" data-icon="gear">About</a></li>      
      </ul>    
     </nav> 
    </div><!-- end footer --> 
</div><!--end page--> 


    <script type="text/javascript"> 
     $(document).on('pageinit', '#dog_bars', function() { 
      //you can probably leave out the trigger('create') since the wrapper 
      //is already part of the DOM and JQM should enhance it 
      $('#external').load("external_page.html").trigger("create"); 
     }); 
    </script> 

external_page.html

<!DOCTYPE > 
<html > 
<head> 
    <title></title> 
</head> 
<body> 
    <div id="pageWrapper"> 
     <p>Some test text</p> 
     <input type="text" /> 

     <select> 
      <option value="value">Option1</option> 
      <option value="value2">Option2</option> 
     </select> 

    </div> 
</body> 
</html>