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内容（for list_）的创建。但这个事件从未被调用过。

此外，如果我能够在点击链接时创建内容，我想显示<div id="list_<id>">的内容，替换之前的内容。

由于应用程序提供海量数据 - 我不想使用jQuery mobiles的嵌套列表。

您是否有任何关于我如何使用框架功能实现此功能的提示？

修改

我有以下情况：

<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中的哈希值变为＃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>

要回来使用data-rel =＆＃39;返回＆＃39;像

<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>标记内，并且是正文标记的子元素。

现在它运作正常！

谢谢！

javascript＆amp; jQuery mobile：导航到<div data-role =“page”> </div>

2 个答案: