如何在jQuery Mobile中正確分離頁面？

我正在做一些與jQuery Mobile的測試，並試圖找出如何設置應用程序及其各種頁面。理想情況下，我希望框架能夠加載帶有轉換的頁面，但仍然保持每個頁面的分離。特別是，它似乎是通過Ajax加載的頁面沒有「清除」的JavaScript或前一頁面的CSS：如何在jQuery Mobile中正確分離頁面？

例1 - JavaScript的

舉例來說，如果我有這樣的事情page1.html：

<script> 
    setInterval(function() { 
     console.info('Interval' + (new Date())); 
    }, 1000); 
</script>

然後，如果我加載page2.html，間隔仍在運行。如果我回到page1，一個新的時間間隔開始，所以現在有兩個間隔正在運行，而3和4等每次我回到page1。

例2 - CSS

的另一個問題是，與定型。假設兩個開發人員在兩個不同的頁面上獨立工作，創建一個元素my-element。在page1，該元素的樣式：

<style> 
    #my-element { 
     color: red; 
    } 
</style> 

<span id="my-element">This one is red</span>

在page2，該元素是不是風格：

<span id="my-element">This one has no style</span>

同樣，如果我去page1.html先page2.html，my-element最終是紅色，甚至儘管它不是在page2.html中設計的。

所以我想我有兩個問題：

目前似乎jQuery Mobile的方式來加載頁面是不可擴展的。 CSS，JS創建在一個頁面上，繼續下一個。那麼是否有任何方法可以「乾淨地」製作jQuery Mobile加載頁面。即完全刪除前一頁中的所有內容，以便JS或CSS的位不影響下一頁？
如果不是，在jQuery Mobile中以可擴展的方式處理多個頁面的正確方法是什麼？

來源

2012-11-04 this.lau_

您所描述的行爲是JQM的工作原因。你的DOM持久化（包括你加載的第一頁的js和css），直到你使用'data-ajax = false'或'rel = external'來加載一個頁面，這會執行常規的頁面加載（沒有ajax）。

通過ajax加載頁面，您將主要在DOM中至少有兩個頁面 - 您開始的頁面（如錨頁）以及您通過ajax加載的任何其他頁面（一旦下一頁被加載）。

該方法允許您可以跨頁面共享轉換和其他功能。

您仍然可以輕鬆地使用js/css定位特定頁面。我總是在我的應用程序中運行一個controller.js文件，它通過綁定到任何JQM事件（pagebeforeshow，pageshow ...）來處理頁面特定的事情。同樣，對於頁面特定的CSS，只需使用頁面ID屬性來製作特定的CSS頁面。

來源

2012-11-04 07:40:20 frequent

如何在jQuery Mobile中正確分離頁面？

回答

相關問題