0

我正在为我当前的应用程序使用 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");
});

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

4

1 回答 1

2

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

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

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

});

在此处阅读有关面板官方 API 文档的更多信息。

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

于 2013-05-22T15:35:41.700 回答