title: jquery mobile, use android hardware back button to close a panel
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>Any idea how to do this ?
  Here's my html page with the panel :</p>
  
  <pre><code>&lt;div id="welcome-page" data-role="page"&gt;    
      &lt;a data-role="button" id="open-panel" data-theme="a"&gt;Enquiries&lt;/a&gt;
  &lt;/div&gt;  
  </code></pre>
  
  <p>Here's the structure of my js file for the panel : </p>
  
  <pre><code>$(document).on('pagebeforecreate', '#welcome-page', function(){                
      $('&lt;div&gt;').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");
      }
    });
  });
  </code></pre>
  
  <p>Thanks</p>