在jQuery Mobile頁面中顯示和隱藏內容

Question

我的jQuery移動應用程序中有兩個頁面。當第一頁上的列表項被輕敲時，用戶被帶到第二個html頁面。第二頁有一個有兩個按鈕的導航欄。我希望這兩個導航欄按鈕在頁面的內容區域中顯示/隱藏div。我找不到要使用哪種事件處理機制。 document.ready不起作用，pageinit也不起作用。有人可以指導我做一個樣本嗎？

Answer 1

如果你的意思是你有兩個（或更多）獨立的HTML文件，你需要了解如何正確處理事件JQM，所以這裏有一個快速的介紹。

1. JQM增添了單獨的HTML文件合併爲一個DOM，通通過AJAX

2. 是通過AJAX加載的每個頁面加載它們觸發一個pageinit和pageshow事件，不同之處在於pageshow重新火災當您瀏覽回到頁面

3. 後的第一個頁面只加載<div data-role="page/dialog"></div>元素中的內容，因此，如果您的後續頁有JS在<head/>未在perha拉每一頁ps你有你的第二頁的導航欄JS代碼在你的第二頁，這是一件值得注意的事情

4. 那麼你如何管理你的JS並保持它的組織？在我們的生產jQM應用程序中，我們在開始時加載了所有JS，反正它不會太大。我們有一個入口點，每個頁面都包含JS代碼，因此無論您輸入什麼頁面，都只需加載一次我們需要的所有JS，並且不再加載JS。 警告如果您<div data-role="page"/>將重燒每次內有JS您訪問的頁面只有做到這一點，如果你知道它是如何作用

5. 你的切入點應該是一個單一的功能$(document).on('pageinit pageshow', 'div:jqmData(role="page"), div:jqmData(role="dialog")', function(event){現在每一頁/對話框，負載將觸發這個事件處理程序，你可以根據event.type確定它是否爲pageinit或pageshow，並且通過添加數據屬性或類或任何你想要的信息加載哪個頁面<div data-role="page" data-pageIdentifier="home etc.."></div> - 然後只需使用switch語句來處理所有情況。

6. 你現在有你需要和this是一個方便的參考當前頁面，綁定事件偵聽器與.on功能，讓你聽的頁面，而不是文檔根目錄，例如所有的信息你的導航欄的東西。 - 如果你使用.live它會監聽整個文檔（不是所有的頁面都是DOM緩存的），不管這樣做對性能不好！ 實際上，在頁面中，我們始終使用從頁面開始的.find，例如， $ this.find（'div.something'），我們從來沒有使用$（'div.something），它會抓取你的整個DOM可能擊中其他頁面，更糟的是給你錯誤的結果不在你的當前頁面所以另一個重大錯誤是做一些像$('img.selectItem').bind('click'...你可能有一個IMG。選擇信息在其他DOM緩存頁面，所以你會綁定到比你更想 - 我會做類似$this.find('img.selectItem').bind(（其中$這是當前頁）

顯然，我們有很多的代碼最終，所以我們編寫了一個處理程序對象，在其他JS文件中調用函數 - 並且您可以使用RequireJS，但我們不需要

Answer 2

檢查此的jsfiddle代碼：http://jsfiddle.net/nirmaljpatel/6UbGp/