gpt4 book ai didi

javascript - jquery 移动圆形导航后退按钮

转载 作者:行者123 更新时间:2023-11-30 06:38:33 24 4
gpt4 key购买 nike

我在使用 jQuery 移动应用后退按钮时遇到了一些问题。这个论点已经讨论了很多,但我仍然需要找到正确的答案。

我有 2 个 html 文件:我们称它们为 list.html 和 description.html

它们每个都包含一个 data-role="page"。

现在,从列表中我将使用

$.mobile.changePage('description.html')

在描述中,我有几个用于填充列表的链接。所以当我点击一个链接时,我使用

$.mobile.changePage('list.html')

然后我可以从列表中再次转到描述等等。

现在的问题是,如果我只打开 1 个时间列表和描述,一切都是完美的。后退按钮工作正常。但是当我打开另一个列表时,它不会将它添加到主体内的 div,而是替换旧的。这样,当我在第一个列表中单击返回时,我会看到第二次调用的结果。

我试过

window.location = 'list.html'

但它带来了更多问题。而且速度更慢。

我希望我已经足够清楚地解释了我的问题。我不知道这听起来是否令人困惑。

希望有人能够提供帮助。谢谢。

编辑:

我忘了说,我曾尝试使用类来识别页面(包括页眉、内容和页脚),但并没有解决问题。

最佳答案

您将使用这样的方法解决您的问题:

    <script>
$('#pageDescription').click(function(){
$('yourdiv').html(content);
$.mobile.changePage('#pageList','slide');
});
$('#pageList').click(function(){
$('yourdiv').html(content);
$.mobile.changePage('#pageDescription','slide');
});
</script>
<body>
<div data-role="page" id="pageDescription">
//Your html from description.html
</div>
<div data-role="page" id="pageList">
//Your html from list.html
</div>
</body>

查看更多信息: http://jquerymobile.com/demos/1.2.0/docs/pages/page-anatomy.html

注意:不要忘记准备后退按钮!

新代码:

<script>
var oldHtml;
$('div li a').click(function(){
oldHtml = $('yourdiv').html();
$('yourdiv').html(content);
$.mobile.changePage('#pageDescription','slide');
});
$('a[data-icon=back]').click(function(){
$('yourdiv').html(oldHtml);
});
</script>
<body>
<div data-role="page" id="pageDescription">
//Your html from description.html
</div>
<div data-role="page" id="pageList">
<div data-role="header">
<a data-role="button" data-icon="back" data-iconpos="notext"></a>
</div>
//Your html from list.html like this
<ul>
<li><a>link1</a></li>
<li><a>link2</a></li>
</ul>
</div>
</body>

关于javascript - jquery 移动圆形导航后退按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13045715/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com