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/