Question

在通过面板导航离开第一页后，在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>

复制的步骤很简单：

打开面板，然后点击“两个”
点击“一个”
Panel现已损坏。

有谁知道可能导致这种情况的原因？

小提琴：http://jsfiddle.net/jVzNk/

Answer 1

jQuery Mobile基于 Ajax Navigation ，用于在页面之间切换和加载新页面。当您使用data-ajax="false"链接页面时，您禁用 Ajax Navigation 并跳转/跳转到该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

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

1 个答案: