使用jQuery mobile ajax導航加載多頁面模板

Question

默認情況下，如果您使用jQuery Mobile的jj導航來加載多頁面模板html文件，那麼它不起作用並且只加載第一頁。

一種方法是使用rel="external"，但它不會在手機或平板看的話......（它應該有動畫！）

是不是有什麼更好的辦法？如何使用jQuery Mobile ajax導航完全加載多頁面模板html？

Answer 1

可以通過編程方式使用

pageContainerElement.page({ domCache: true }); 

DOM緩存的缺點是DOM可以得到非常大，導致在某些設備上減速和內存問題頁面加載到DOM。如果您啓用DOM緩存，請注意自己管理DOM並在各種設備上進行徹底測試。

這裏的鏈接：http://jquerymobile.com/test/docs/pages/page-cache.html

更新1

你會把這些代碼在一個單獨的文件，即custom-code.js並把它放在你的頭，你加載的jQuery之後，但在加載jQuery Mobile的。

所以，如果你的頁面的容器是這樣的：

<div data-role="page" data-theme="a" data-dom-cache="false" class="page blog-post"> 

你會把div.page({ domCache: true });，然後在所有的地方，你在jQuery和jQuery Mobile的拉頁的頭部，它應該是這樣的：

// Pull in jQuery 
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
// Pull in your custom jQuery Mobile rules/scripts 
<script src="../path/to-file/custom-code.js"></script> 
// Pull in jQuery Mobile 
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script> 

UPDATE 2

上面的代碼將緩存特定頁面。如果要將所有頁面加載到DOM中，請在custom-code.js文件內部放置此代碼並分別指定（每個頁面一個實例）每個要加載到DOM的頁面：

$.mobile.loadPage(pageUrl, { showLoadMsg: false }); 

預取頁面自然會創建額外的HTTP請求並使用 帶寬，所以僅在 很有可能訪問預取頁面的情況下使用此功能纔是明智之舉。

另外，如果您想要預取所有鏈接到當前頁面的頁面，只需將data-prefetch添加到鏈接即可。

例如：

<a href="page_2.html" data-prefetch>Link to other page</a> 

Answer 2

默認情況下，jQuery手機不會加載多頁面模板的所有頁面。但有jQuery Mobile的a plugin，它允許你加載一個帶有ajax導航的多頁面模板。

Check out jQuery-Mobile-Subpage-Widget here.