Question

我使用jQuery mobile遇到了一个问题。我按照here的说明尝试设置面板。

这是我的代码：

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="js/panelfix.js"></script>
<script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
</head>
<body>
<!-- main page -->
<div data-role="page" class="jqm-demos ui-responsive-panel" id="panel-responsive-page1" data-title="Virksomheds Booking">

    <!-- header -->
    <div data-role="header">
        <h1>Virksomheder</h1>
        <a href="#nav-panel" data-icon="bars" data-iconpos="notext">Menu</a>
        <a href="#add-form" data-icon="gear" data-iconpos="notext">Add</a>
    </div>
    <!-- /header -->

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

        <h1>Virksomheds Liste</h1>
    <div data-role="collapsibleset">
      <div data-role="collapsible" data-inset="false">
        <h3>Lego</h3>
        <table>
          <tr>
            <th>
                <label for="contactperson"></label>
                <label for="phone"></label>
                <label for="mail"></label>
            </th>
            <th>
                <img src="img/lego.jpeg" alt="Lego" height="80" width="80">
            </th>
          </tr>
        </table>
        <button>Book</button>
      </div>
    </div>
        <div data-demo-html="#panel-responsive-page1"></div><!--/demo-html -->


    </div>
    <!-- /content -->

    <!-- Panel left side -->
    <div data-role="panel" data-display="push" data-theme="b" id="nav-panel">

        <ul data-role="listview">
            <li data-icon="delete"><a href="#" data-rel="close">Luk Menu</a></li>
                <li><a href="#">Front</a></li>
                <li><a href="#panel-responsive-page2">Map</a></li>
        </ul>

    </div>
    <!-- /Panel left side -->

    <!-- Right side form for booking -->
    <div data-role="panel" data-position="right" data-display="reveal" data-theme="a" id="add-form">
        <form class="userform">
            <h2>Booking oplysninger</h2>

            <label for="name">Navn:</label>
            <input type="text" name="name" id="name" value="" data-clear-btn="true" data-mini="true">

            <label for="mail">Mail:</label>
            <input type="text" name="mail" id="mail" value="" data-clear-btn="true" autocomplete="off" data-mini="true">

            <label for="mobil">Mobil:</label>
            <input type="text" name="mobil" id="mobil" value="" data-clear-btn="true" autocomplete="off" data-mini="true">

            <div class="ui-grid-a">
                <div class="ui-block-b"><a href="#" data-rel="close" class="ui-btn ui-shadow ui-corner-all ui-btn-a ui-mini">Save</a></div>
            </div>
        </form>
    </div>
    <!-- Right side form for booking -->

</div>
<!-- /main page End -->

<!-- Page 2 Start-->
<div data-role="page" id="panel-responsive-page2">

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

    <!-- content -->
    <div role="main" class="ui-content jqm-content">

        <img src="img/oversigt.png" alt="Oversigt" style="max-width:100%">


    </div>
    <!-- /content -->

    <!-- Panel left side -->
    <div data-role="panel" data-display="push" data-theme="b" id="nav-panel">

        <ul data-role="listview">
            <li data-icon="delete"><a href="#" data-rel="close">Luk Menu</a></li>
                <li><a href="#panel-responsive-page1">Front</a></li>
                <li><a href="#">Map</a></li>
        </ul>

    </div>
    <!-- /Panel left side -->

</div>
<!-- Page 2 End -->



</body>
</html>

当我导航到第2页并返回主页面时，面板不会弹出。我尝试使用此post中的解决方案，但它不起作用。我把解决方案放在jQuery mobile之前，如下所述：

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="js/panelfix.js"></script>
<script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>

解决方案如下所示：

setTimeout(function(){
    $.mobile.changePage('#page2',{transtion:'none'});   
},200);

我还创建了一个jsfiddle here.

任何帮助都将受到高度赞赏！

使用jqueryMobile导航回首页后面板菜单没有响应

0 个答案: