jQuery Mobile |頁面之間的導航

我在JQM相當新，我正在嘗試使用jQuery Mobile構建移動應用程序。jQuery Mobile |頁面之間的導航

下面是我想實現..

我有每個有它自己的CSS一些HTML頁面，JavaScript和JQM頁面。我需要的是，當我改變到另一個HTML文件，並使用data-rel =「back」返回後退按鈕時，我恢復到之前的狀態中的HTML文件，我離開它。

我試過使用pagecontainer更改函數，但它不會在新加載的html文件上加載JavaScript。它嘗試使用以下代碼。

$(document).on("vclick", '.openTutorial', function(){ 
    $.mobile.pageContainer.pagecontainer("change", "tutorial.html", { 
     reload : true 
    }); 
});

此外，我試過另一種選擇這是pagecontainer負載，但這次它甚至沒有重定向。我使用了下面的代碼。

$(document).on("vclick", '.openTutorial', function(){ 
    $.mobile.pageContainer.pagecontainer("load", "tutorial.html", { }); 
});

它是否可以在JQM中實現。

如果是，那麼我如何導航到另一個html文件，以便它的JavaScript和css在頭部加載。當我回去使用data-rel =「back」時，之前的狀態被恢復。

如果沒有，那麼我該如何實現這一點。我的意思是我應該做些什麼改變..

謝謝..非常感謝任何幫助。

來源

2014-04-04 planet260

可以發表你的頁面的狀態的屏幕截圖。還有一些代碼，因爲你可能有錯誤。這將有助於瞭解究竟顯示的是什麼，例如列表視圖，表單，圖片等。 – Tasos

簡短的回答..

支持AJAX：不，這是不可能的。
阿賈克斯禁用：是的，這是可能的。

詳細

支持AJAX：

當您使用單頁型號，你必須確保你滿足以下幾點：

對於每個HTML，將jQuery，jQM.css和jQM.js放入head。
自定義JS應該去data-role=page股利。
每個data-role=page div在一個單獨的HTML文件中。

注意：JQM只加載第一data-role=page DIV每個HTML文件到DOM的。 data-role=page div之外的任何內容都被忽略。這就是爲什麼定製JS應放置在該div內。

當您離開頁面（加載的第一頁除外）時，jQuery Mobile會從DOM中刪除該頁面。除非你緩存它加data-dom-cache="true"到data-role=page div。該頁面從DOM中刪除，但是，CSS和JS被緩存。要刪除它們，您需要完全刷新/重新加載頁面。因此，當您通過Ajax從pageX.html導航到pageY.html時，如果您在pageZ中覆蓋CSS，則它們將應用於pageX（如果您使用了相同的選擇器）。

要安全地覆蓋不同頁面的CSS，請根據頁面創建自定義類和addClass()/removeClass()。或者，在覆蓋CSS時，使用#pageID選擇器更具體。這同樣適用於JS，當您使用頁面事件時，您應該具體。

阿賈克斯禁用：

你可以做任何你想要的，該網站將使用HTTP不是阿賈克斯。

Demo

來源

2014-04-04 10:37:41 Omar

謝謝男人..這真的很有幫助.. – planet260

不客氣@ planet260 :) – Omar

不確定您是否可以使用多個html文件恢復以前的狀態。

您應該使用JQM的多頁面模板，每個頁面與數據角色=「頁面」和特定ID的DIV設置所有的HTML在一個文件中：

<div data-role="page" id="foo"> 
</div> 
<div data-role="page" id="bar"> 
</div>

隨着那樣，你將能夠保持每個頁面的狀態。

的JQM文件：http://demos.jquerymobile.com/1.4.2/pages/#Multi-pagetemplatestructure

來源

2014-04-04 10:21:49 Finrod

每個HTML文件都有3到4頁。大約15個HTML文件。所以不可能將所有頁面保存在一個HTML文件中。 – planet260

是的，這就是爲什麼我不使用JQM的複雜應用程序。也許你可以整合一個MVC框架，這將允許你有一個主要的html文件和每個頁面的子html文件，這將在主文件 – Finrod

jQuery Mobile |頁面之間的導航

回答

簡短的回答..

詳細

相關問題