jQuery mobile，使用android硬件后退按钮关闭面板 [英] jquery mobile, use android hardware back button to close a panel

问题描述

我使用jqm创建了一个面板，我希望能够使用Andoird手机后退按钮在打开时将其关闭.

I created a panel using jqm, and I'd like to be able to use the andoird phones back button to close it when it's open.

目前，当面板打开并且我使用后退按钮时，它会转到上一页，而不是仅关闭面板.

For now, when the panel is open and I use the back button, it goes to the previous page, instead of only closing the panel.

任何想法如何做到这一点? 这是我的带有面板的html页面:

Any idea how to do this ? Here's my html page with the panel :

<div id="welcome-page" data-role="page">    
    <a data-role="button" id="open-panel" data-theme="a">Enquiries</a>
</div>  

这是面板的js文件的结构:

Here's the structure of my js file for the panel :

$(document).on('pagebeforecreate', '#welcome-page', function(){                
    $('<div>').attr({'id':'mypanel','data-role':'panel','data-position':'right','data-display':'overlay'}).appendTo($(this));
    $(document).on('click', '#open-panel', function(){   
        $.mobile.activePage.find('#mypanel').panel("open");
        populateContactForm('args');
        ...
    }); 
    $(document).on('change', '#mypanel input[type=radio]', function(){ 
    ...
    });
});


$(document).on('pagebeforeshow', function() {   
  $(document).bind('keydown', function(event) {
    alert(event.keyCode);
    if (event.keyCode == 27) {
      event.preventDefault();
      $('#mypanel').panel("close");
    }
  });
});

谢谢

推荐答案

您可以在javascript中捕获硬件后退按钮，如下所示:

You can capture hardware back button as below in javascript:

$(document).bind('keydown', function(event) {
  if (event.keyCode == 27) {
    // Prevent default (disable the back button behavior)
    event.preventDefault();

    // Your code to close panel or show another page or whatever...
    $( '#mypanel' ).panel( "close" );
  }
});

这篇关于jQuery mobile，使用android硬件后退按钮关闭面板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！