Question

我正在使用jquery mobile 1.3.1作为我当前的应用程序。在那里我使用页面骨架，如下面的

 <div id="map-page" data-role="page" data-navigation="true">
    <div data-role="header" data-position="fixed" data-tap-toggle="false" data-id="header"> <a href="#map-page-panel" data-role="button" data-iconpos="notext" data-inline="false" data-icon="bars"></a>

         <h1 class="ui-title" role="heading">Karte</h1>
 <a href="#" data-role="button" data-iconpos="notext" data-inline="true" data-rel="external" data-icon="refresh" onClick="cab.refreshLocationMarkers()">refresh</a>

    </div>
    <div id="map_content" data-role="content" style="padding: 0px; margin: 0px">
        <div id="map_canvas"></div>
    </div>
    <div data-role="panel" id="map-page-panel" data-position-fixed="true" data-theme="a" data-display="reveal">
        <ul data-role="listview" data-theme="a" class="nav-search">
            <li data-icon="false"> <a href="#map-page">
                   <img class="ui-li-thumb" src="/image/sidebar/map@2x.png"/>
                   CallBikes finden
                </a>

            </li>...</ul>
    </div>
</div>

到目前为止这是有效的。该面板在打开时会显示动画。我想要实现的是在发布页面更改之前使面板关闭（具有反向显示动画）。为此我做了

$(document).on("pagebeforehide", function(e,data) {
   $(e.target).find('div[data-role="panel"]').panel("close");
});

但这会以某种方式打破它。我可以看到上面的页面。但是导航远离它并再次返回它会打破导航按钮。按钮没有响应，看起来处于关闭状态。面板无法打开，我需要重新加载页面才能再次控制它。

Answer 1

为什么不更改代码？而是执行2个并行操作，例如关闭面板并在同一时间切换页面，为什么不关闭面板并在面板关闭时等待回调函数。然后你可以触发pageChange函数。

当您单击以更改页面触发器面板时，基本上会关闭。当面板关闭时，它将触发此回调函数：

$( ".selector" ).on( "panelclose", function( event, ui ) {

});

详细了解面板官方API文档here。

现在您应该在此回调中更改您的页面。这将为您提供更好的稳定性，用户将能够在页面转换发生之前看到正确的关闭动画。

在页面更改之前无法在jquery mobile中关闭幻灯片面板

1 个答案: