javascript＆jQuery mobile：導航到<div data-role="page"></div>

Question

我對jQuery Mobile比較陌生。所以，我不知道框架功能的每個角落。

我目前面臨着一些歷史和動態頁面導航問題。

基本上，我要實現以下目標：

我有一個網頁，通過改變按鈕點擊的內容。 「主頁」頁面應顯示<div data-role="page" id="list_root">...</div>。通過點擊一個按鈕，頁面應該導航到<div data-role="page" id="list_123">...</div>。我希望能夠通過使用後退按鈕回到div「#list_root」的內容。

在使用jQuery之前，我自己用history.pushState(divContent, null, "#list_<id>")自己實現了這個功能，並用新的替換了舊的內容。但是，默認情況下，使用jQuery mobile停用pushState插件。

被按下導航按鈕的定義如下所示：

<a href='#list_<id>' class='...'>...</a> 

我曾嘗試通過實施「onhashchange」回調來實現新的div內容（list_）的創建。但是這個事件從未被調用過。

此外，如果我能夠在點擊鏈接時創建內容，我想顯示內容<div id="list_<id>">，取代以前的內容。

由於應用程序呈現海量數據 - 我不想使用jQuery手機的嵌套列表。

你對我有什麼提示嗎？我可以如何使用框架功能來實現？

編輯：

我有以下情況：

<div data-role="page" class="type-interior" id="main_window"> 
    <div id="current" class="ui-content" data-role="content" role="main"> 
     <div id="list_root" data-url="list_root"> 
     <div id="list_123" data-url="list_123" data-role="page"> 
    </div> 
</div> 

正如你看到的 「list_root」 是默認的 「起始頁」，並如預期得到顯示。

我添加點擊事件監聽器（）動態創建通過的<div id="list_123">內容：

document.addEventListener('click', function(e) { 
     ... create it ... 
     e.stopPropagation(); 
    }, true) 

這工作。

按鈕創建類似如下：

<a href="#list_123" data-role="button">List_123</a> 

DIV的內容被成功之後創建的URL更改＃list_123哈希值。但該頁面不顯示。問題在這裏，<div data-role="page" id="list_123">...</div>站在<div data-role="page" class="type-interior" id="main_window">標籤內嗎？我會接下來嘗試！

Answer 1

如說以上 - 問題我的意思是，你想要瀏覽的新頁面始終在<div data-role='page'><div data-role='content'>....</div></div>標籤和body標籤的子元素中。

現在它工作正常！

謝謝！

Answer 2

它很簡單。
使用HREF用於導航到任何網頁一樣

<a href='#pageId' data-role="button>Page 2</a> 

並取回使用的數據相對= '回' 像

<a href="javascript:;" data-role="button" data-rel="back">Back</a> 

演示：http://jsfiddle.net/nachiket/5rLAf/