Question

我正在使用jquery mobile打开面板小部件，其中包含一个列表。

在html文档中我有3个内部页面，索引，holzart，qualitat。加载页面并选择一个ex。 holzart内部页面不会显示。其他页面也会发生同样的事情。我注意到的是我有时不能打开孔板。我正在观看chrome调试窗口并且没有错误。我很感激任何建议。这是完整的代码：

<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

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

在脚本中初始化面板：

foreach(var step in steps)
{
    step.StepStatus =
        step.Tasks.All(x => x.Status == "DONE") ? "DONE" :
        step.Tasks.All(x => x.Status == "TODO") ? "TODO" :
        step.Tasks.Any(x => x.Status == "DOING") ? "DOING" :
        step.Tasks.Any(x => x.Status == "DONE ") && step.Tasks.Any(x => x.Status == "TODO") ? "DOING"
        : "UNKNOWN_STATUS";
}

从标记

中的页面ID中删除“＃”

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

应该是

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

将关闭<div data-role="page" id="holzart" data-title="Holzart">添加到索引页面，并在页面中添加内容div。现在你在索引中有另外两个页面。

<强> DEMO

jquery面板小部件不会打开内部页面

1 个答案: