Add an Exit Menu to Mobile app built in PhoneGap and JQuery Mobile

To add an exit menu when the back button is pressed is very straight forward, all we need to do is to add a listener for the “backbutton” event.

Then check if the event is trigger on the main page.

If it is, a menu pops up and asks the user if he/she wants to exit with a “yes” and “no” button.

Lets see how it is implemented.

1. ID the Entry Page

First, lets give the main page an id.

<div id="main" data-role="page">
...
</div>

2. Add some Javascript Code

Next we need to add a listener for the back button and determine when the back button is pressed. That is check whether the user is on the main page or not when the back button is pressed.

If it is, we call the exit function, if not, we close the confirmation popup.

	
document.addEventListener("backbutton", function() {
			if ( $('.ui-page-active').attr('id') == 'main') {
				exitAppPopup();
			} else {
				history.back();    			
			}
		}, false);

Here is the code for the popup:

function exitAppPopup() {
	navigator.notification.confirm(
		  'Exit PhoneGap ' + device.cordova + ' Demo?'
		, function(button) {
			  if (button == 2) {
				  navigator.app.exitApp();
			  } 
		  }
		, 'Exit'
		, 'No,Yes'
	);	
	return false;
}

3. That is it.

exit-menu