1

我对 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>")并用新内容替换了旧内容。但是，pushState 插件默认使用 jQuery mobile 禁用。

按下导航按钮的定义如下：

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

我确实尝试通过实现“onhashchange”的回调来实现新 div 内容的创建（对于 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">via 的内容：

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">标签内吗？我下次试试！

4

2 回答 2

1

这很简单。
使用 href 导航到任何页面，例如

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

并返回使用 data-rel='back' 喜欢

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

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

于 2012-07-07T08:04:17.463 回答
0

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

现在它工作正常！

谢谢！

于 2012-07-09T10:25:00.920 回答