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>">的内容，取代以前的内容。

由于应用程序显示大量数据，我不想使用jQuerymobiles的嵌套列表。

你有什么提示我如何使用框架功能实现这一点吗？

编辑：

我有以下情况：

<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"是默认的"起始页"，并按预期显示。

我为click((添加了一个事件监听器，通过：动态创建<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中的hash变为#list_123。但该页面不会显示。这里的问题是<div data-role="page" id="list_123">...</div>位于<div data-role="page" class="type-interior" id="main_window">标签内吗？我下一步会试试的！

Answer 1

它很简单
使用href导航到任何类似的页面

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

要返回，请使用数据rel="返回"，如

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

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

Answer 2

如上所述-我遇到的问题是，要导航到的新页面必须始终位于<div data-role='page'><div data-role='content'>....</div></div>标记和body标记的子元素中。

现在它工作得很好！

谢谢！