gpt4 book ai didi

javascript - 在多页面模板中的页面之间导航后,Jquery 移动面板停止工作

转载 作者:搜寻专家 更新时间:2023-10-31 08:32:17 25 4
gpt4 key购买 nike

在通过面板导航离开第一页后,在 jquery 移动应用程序的多页面模板设置中。当通过另一种导航形式返回到第一页时,面板看起来“挂起”。

仔细观察,您可以看到左侧有一个小阴影,这是隐藏的面板。显示面板的按钮不再起作用。

这是一个复制问题的演示。

<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">

<title>Panel Issue Demo</title>


<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css">

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
</head>
<body>

<div data-role="page" id="one">
<div data-role="header" data-position="fixed">
<h1>One</h1>
<a href="#one-menu" class="ui-btn ui-btn-icon-notext ui-corner-all ui-icon-bars ui-nodisc-icon ui-alt-icon ui-btn-left">Menu</a>
</div>

<div role="main" class="ui-content">
</div>

<div data-role="panel" data-position="left" data-display="overlay" data-theme="a" id="one-menu">
<ul class="ui-listview ui-alt-icon ui-nodisc-icon" data-role="listview">
<li><a href="#two" data-ajax="false">Two</a></li>
</ul>
</div>
</div>

<div data-role="page" id="two">
<div data-role="header" data-position="fixed">
<h1>Two</h1>
</div>

<div role="main" class="ui-content">
<a href="#one" data-ajax="false">One</a>
</div>
</div>
</body>

复制的步骤很简单:

  1. 打开面板并点击“Two”
  2. 点击“一个”
  3. 面板现在坏了。

有谁知道这可能是什么原因造成的?

fiddle :http://jsfiddle.net/jVzNk/

最佳答案

jQuery Mobile 基于 Ajax 导航,用于在页面之间切换和加载新页面。当您使用 data-ajax="false" 链接页面时,您会禁用 Ajax 导航 并跳转到该 div 作为 内部 div页面。

要在 jQuery Mobile 中的页面之间建立链接,应启用 Ajax 导航。

<div data-role="page">
<a href="#step3" data-ajax="false">Step 3</a>

<div id="step1">
<!-- content -->
</div>

<div id="step2">
<!-- content -->
</div>

<div id="step3">
<!-- You jump to this div -->
</div>
</div>

可以在 jQM 中使用它,但不能用于在多页面模型 中更改页面。此外,当您希望通过 HTTP 而不是 Ajax 正常加载页面以及提交表单时,请使用data-ajax="false"

Demo

关于javascript - 在多页面模板中的页面之间导航后,Jquery 移动面板停止工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21294024/

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