WebSphere Notes: Adding support for back button in jQuery Mobile page in PhoneGap/Cordova application

When your building PhoneGap/Cordova application you might have noticed that it does not get browser back button. But if your using JQuery mobile you can take care of this situation by adding data-add-back-btn attribute at page level, I did that and this is screen show of how my page looks

This is the index.html file that i used for my application.


<!DOCTYPE html>
<html>
<head>
<title>Device Properties Example</title>

<script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script>
<link rel="stylesheet"
  href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script
  src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>

<script type="text/javascript" charset="utf-8">

</script>
</head>
<body>
  <div data-role="page" id="page1" data-add-back-btn="true" 
  data-back-btn-text="Previous" data-title="First Page">
    <div data-theme="a" data-role="header">
      <h3>First Page</h3>
    </div>
    <div data-role="content">
      <a href="#page2">Go to page 2</a>
    </div>
    <div data-theme="a" data-role="footer">
      <h3>Copyright stuff</h3>
    </div>
  </div>
  
  <div data-role="page" id="page2" data-add-back-btn="true" 
  data-back-btn-text="Previous" data-title="Second Page">
    <div data-theme="a" data-role="header">
      <h3>Second Page</h3>
    </div>
    <div data-role="content">
      <a href="#page3">Go to page 3</a>
    </div>
    <div data-theme="a" data-role="footer">
      <h3>Copyright stuff</h3>
    </div>
  </div>  
    <div data-role="page" id="page3" data-add-back-btn="true" 
 data-back-btn-text="Previous" data-title="Third Page">
    <div data-theme="a" data-role="header">
      <h3>Third page</h3>
    </div>
    <div data-role="content">
      <h3>Hello from page 3</h3>
    </div>
    <div data-theme="a" data-role="footer">
      <h3>Copyright stuff</h3>
    </div>
  </div>  
</body>
</html>

My index.html page has 3 JQM pages inside it, each one of them has 2 attributes first is data-add-back-btn which says that you want Jquery Mobile to manage back button when their is page in the history, you enable it by setting its value to true. The data-back-btn-text attribute is used to set title of the back button, in my case i am setting it to Previous

Adding support for back button in jQuery Mobile page in PhoneGap/Cordova application

No comments: