jquery 面板小部件无法打开内部页面

Question

我正在使用 jquery 移动设备打开带有列表的面板小部件。

在 html 文档中我有 3 个内部页面，index、holzart、qualitat。加载页面并选择前任后。 holzart 内部页面不会显示。另一页也会发生同样的事情。我还注意到，有时我无法打开孔板。我正在观看 chrome 调试 window，其中没有任何错误。我很感激任何建议。这是完整的代码：

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="lib/jquery.mobile-1.4.5.min.css" />
    <script src="lib/jquery-2.1.4.min.js"></script>
    <script src="lib/jquery.mobile-1.4.5.min.js"></script>
</head>

<body>


<!--index page-->
<div data-role="page" id="index" data-title="Start" data-url="index">

    <!-- header -->
    <div data-role="header" data-position="fixed">
        <h1>Lager</h1>
        <a href="#nav-panel" data-icon="bars" data-iconpos="notext">Menu</a>
    </div>
    <!-- /header -->

    <!-- content -->
    <div role="main" class="ui-content jqm-content jqm-fullwidth">
        <h1>...</h1>
    </div>
    <!-- /content -->

    <!-- /footer -->
    <div data-role="footer" data-position="fixed">
        <h4>Lager</h4>
    </div>
    <!-- /footer -->



<!--holzart page-->
<div data-role="page" id="#holzart" data-title="Holzart">
    <!-- /header -->
    <div data-role="header" data-position="fixed">
        <h1>Lager</h1>
        <a href="#nav-panel" data-icon="bars" data-iconpos="notext">Menu</a>
    </div><!-- /header -->
    <div role="main" class="ui-content jqm-content jqm-fullwidth">
        <!--<script src="js/holzart.js"></script>-->
        <h1>Neue Holzart eingeben - Alle holzarten ansehen</h1>

        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />

    <table width="100%" border="0" align="center">
        <tr>
            <td colspan="2" align="left" valign="middle">
                <form id="form_holzart" action="php/holzart_ins.php" method="post">
                    <label for="holzart">Neue Holzart eingeben:</label>
                    <input type="text" data-clear-btn="true" name="holzart_txt" id="holzart_txt">
                </form>
            </td>
        </tr>
        <tr>
            <td align="center"  width="50%">
                <form>
                    <input type="button" id="speichern" name="speichern" value="Speichern">
                </form>
            </td>
            <td align="center"  width="50%">
                <form>
                    <input type="button" id="loschen" name="loschen" value="Eingabe löschen">
                </form>
            </td>
        </tr>
        <tr>
            <td colspan="2" align="left" valign="middle"><div id="message"></div></td>
        </tr>
    </table>

    <!--list populated from js and php-->
    <div>
        <ul id="holzart_h" style="list-style-type:none"></ul>
    </div>
    <!--list populated from js and php-->

    <!-- /footer -->
    <div data-role="footer" data-position="fixed">
        <h4>Lager</h4>
    </div>
    <!-- /footer -->

</div>
<!--end of holzart page  -->

<!--qualitat page-->
<div data-role="page" id="#qualitat" data-title="Qualität">
    <!-- /header -->
    <div data-role="header" data-position="fixed">
        <h1>Lager</h1>
        <a href="#nav-panel" data-icon="bars" data-iconpos="notext">Menu</a>
    </div><!-- /header -->
    <div role="main" class="ui-content jqm-content jqm-fullwidth">
        <!--<script src="js/holzart.js"></script>-->
        <h1>Neue Qualität eingeben - Alle Qualiteten ansehen</h1>

        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />

    <table width="100%" border="0" align="center">
        <tr>
            <td colspan="2" align="left" valign="middle">
                <form id="form_qualitat" action="php/qualitat_ins.php" method="post">
                    <label for="qualitat">Neue Qualität eingeben:</label>
                    <input type="text" data-clear-btn="true" name="qualitat_txt" id="qualitat_txt">
                </form>
            </td>
        </tr>
        <tr>
            <td align="center"  width="50%">
                <form>
                    <input type="button" id="speichern_q" name="speichern_q" value="Speichern">
                </form>
            </td>
            <td align="center"  width="50%">
                <form>
                    <input type="button" id="loschen_q" name="loschen_q" value="Eingabe löschen">
                </form>
            </td>
        </tr>
        <tr>
            <td colspan="2" align="left" valign="middle"><div id="message_q"></div></td>
        </tr>
    </table>

    <!--list populated from js and php-->
    <div>
        <ul id="qualitat_q" style="list-style-type:none"></ul>
    </div>
    <!--list populated from js and php-->

    <!-- /footer -->
    <div data-role="footer" data-position="fixed">
        <h4>Lager</h4>
    </div>
    <!-- /footer -->

</div>
<!--end of qualitat page  -->


</div>
<!--end of index page  -->


    <!-- /panel -->
    <div data-role="panel" data-position-fixed="true" data-display="overlay" data-theme="b" id="nav-panel">
        <ul data-role="listview">
            <li data-icon="delete"><a href="#" data-rel="close">Schließen</a></li>
            <li><a href="#index">Zum start</a></li>
            <li><a href="#holzart">Holzart</a></li>
            <li><a href="#starke">Stärke</a></li>
            <li><a href="#qualitat">Qualität</a></li>
            <li><a href="#lange">Länge</a></li>
            <li><a href="#reihe">Reihe</a></li>
            <li><a href="#platz">Platz</a></li>
            <li><a href="#strasse">Straße</a></li>
            <li><a href="#seite">Seite</a></li>
            <li><a href="#grosse_des_pakets">Große des pakets</a></li>
            <li><a href="#neuer_paket_anlegen">Neuer paket anlegen</a></li>
            <li><a href="#suchen">Suchen</a></li>
            <li><a href="#menge_nach">Menge nach...</a></li>
        </ul>
    </div>
    <!-- /panel --> 






</body>
</html>

Answer 1

您需要将面板放在页面顶部。

在脚本中初始化面板：

$(function () {
    $("body>[data-role='panel']").panel().find("ul").listview();
});

从标记中的页面 ID 中删除“#”

<div data-role="page" id="#holzart" data-title="Holzart">

应该是

<div data-role="page" id="holzart" data-title="Holzart">

将关闭 </DIV> 添加到您的索引页面和页面中的内容 div。现在您在索引中有其他 2 个页面。

DEMO

jquery 面板小部件无法打开内部页面

jquery panel widget won't open internal page

html

javascript

jquery

jquery-mobile