問題與面板數據顯示推

我剛剛進入jQuery Mobile - 愛它，但現在擊中學習曲線。基本上我想要一些調用同一個面板的頁面。我有以下幾點。大部分工作。然而，每一次「推」都會失敗，因爲面板內容在推動結束時會貶低......看不出原因。問題與面板數據顯示推

page1.html

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
 
    <script> 
 
    $(function(){ 
 
     $("#includedContent").load("panel.html"); 
 
    }); 
 
    </script> 
 
</head> 
 
<body> 
 

 
<div data-role="page" id="pageone"> 
 

 
    <div data-role="panel" id="myPanel" data-display="push"> 
 
    <div id="includedContent"></div> 
 
    </div> 
 

 

 
    <div data-role="header"> 
 
    <h1>Page Header</h1> 
 
    </div> 
 

 
    <div data-role="main" class="ui-content"> 
 
    <p>Click on the button below to open the Panel.</p> 
 
    <a href="#myPanel" class="ui-btn ui-btn-inline ui-corner-all ui-shadow">Open Panel</a> 
 
    </div> 
 

 
    <div data-role="footer"> 
 
    <h1>Page Footer</h1> 
 
    </div> 
 
</div> 
 

 
</body> 
 
</html>

電話panel.html ...

<!DOCTYPE html> 
 
<html> 
 
<head> 
 

 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
 

 
</head> 
 
<body> 
 

 
    <div data-role="main" class="ui-content"> 
 
    <h2>List with data-inset="true":</h2> 
 
    <ul data-role="listview" data-inset="true"> 
 
     <li><a href="#">List Item</a></li> 
 
     <li><a href="#">List Item</a></li> 
 
     <li><a href="#">List Item</a></li> 
 
    </ul> 
 
    </div> 
 
    
 
</body> 
 
</html>

將不勝感激您的意見感謝

來源

2015-06-21 giles

爲什麼不使用外部的面板：http://demos.jquerymobile.com/1.4.5/panel-external/

見類似的問題：jQuery mobile - Panels with multiple internal pages

如果你真的想加載外部HTML面板，你應該使用每個頁面的JQM pagecreate事件，並有獨特的每個頁面上每個面板的ID。另外，在加載完成時，您應該增強面板小部件。

$(document).on("pagecreate","#pageone", function(){ 
    $("#includedContent").load("panel.html", function() { 
     $(this).closest('[data-role="panel"]').enhanceWithin(); 
    }); 
});

來源

2015-06-22 14:11:58 ezanker

嗨＆感謝您的答覆（這就是爲什麼我包括新手警告:)我注意你的措辭，「如果你真的想加載...」我的問題是：「爲什麼不呢？」我希望每個頁面上都有相同的面板，以便在所有頁面中提供一致的導航方式，因此只有1頁的頁面才能保持正確。 – giles

@giles，外部面板完成同樣的事情，除了在主頁面主體dom元素中包含一次標記外，請參閱此演示：http://jsfiddle.net/ezanker/8uq72ohn/。通用面板在運行時只包含DOM一次。在你的系統中，你要在每個頁面中創建一個空容器，所以你必須管理ID唯一性，所有的加載，並確保jQM小部件被正確初始化/增強。在訪問幾個頁面之後，最終將在每個頁面中複製相同的面板DOM元素。無論哪種方式都可以工作，只需選擇最適合您的應用的產品。 – ezanker

問題與面板數據顯示推

回答

相關問題