Below you will find the source code for PhoneGap 2 Demo with JQuery Mobile Index.html

JQuery Mobile Code Explain:

Here is the index page for the app.  As you can see the page consists of only a single page (div with data-role page attribute).  Very simple. The thing to pay attention to is the id for the page.  It is used for the back button event to show the exit menu.   The javascript will look for this id, if the current page is of id “main”, and if the back button is pressed, then the exit menu will display and ask if the user wants to exit the app.

Please go to “Add an Exit Menu to Mobile app built in PhoneGap and JQuery Mobile” for more details:


And for all the PhoneGap features, I use a listview to show each item, group them with data-inset and add a data-filter for the user to filter out the item you want to see as  menu items.

Javascript Explain:

The javascript part comprises of (1) preparing a folder for the app to use, (2) add the backbutton event handler and (3) grabbing the current PhoneGap/Cordova version and then updating the main page title bar.


I also have included the subpage and fastButtons plugin and a few helper functions in the head section.

The subpage plugin can be found here: JQuery Mobile SubPage Plugin

The fastButtons plugin can be found here: JQuery Mobile fastButtons Plugin

Since I am separating the features out of index.html and put them in their own html pages, when a user click on the anchor link to the next page, only the first data-role page section will be loaded.  If there are multiple data-role pages in a document, the other pages will not be loaded.  And here comes the SubPage plugin for the rescue.  However, a minor change is required.  All data-role pages other than the first have to change to data-role subpages.

i.e. change

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


<div data-role="subpage">... </div>

Also if you want to load any javascript codes when the the page is loaded, include them inside the first data-role page section. This is very important to note.

The helper functions are for formatting outputs, like change numbers to string and get the data only up 2 decimal places, change the colour of text to blue, etc.

Source Code


	<script type="text/javascript" charset="utf-8">
	var rootDir         = "file:///mnt/sdcard";
	var appHomeDir      = "Android/data/com.ventusmoso.pg2_jqm";

	// Prepare dir for file and storage features
	function createFileDir() {

		function fsOnError(error) {
			alert("Cannot get to root file system. Code: " + error.message)
		function dirOnError(error) {
			alert("Cannot create dir. Code: " + error.code)
		function fsOnSuccess(fileSystem) {
			fileSystem.root.getDirectory(appHomeDir, {create: true, exclusive: false}, null, dirOnError);

		window.requestFileSystem( LocalFileSystem.PERSISTENT, 0, fsOnSuccess, fsOnError );

	// Wait for Cordova to Load
	function onDeviceReady() {	
		$("#main h1#appTitle").html("PhoneGap " + device.cordova + " Demo");   	

	document.addEventListener("deviceready", onDeviceReady, false);

JQuery Mobile

	<!---------------------------------- Main Page ---------------------------------------->
	<div data-role="page" id="main">
		<div data-role="header" data-position="fixed">
			<h1 id="appTitle"></h1>
		<div data-role="content">	
		<ul data-role="listview" data-inset="true" data-filter="true">
			<li><a href="about.html"	id="goAbout">About</a></li>
			<li><a href="accelerometer.html"	id="goAccelerometer">Accelerometer</a></li>
			<li><a href="camera.html"	id="goCamera">Camera</a></li>
			<li><a href="capture.html"	id="goCapture">Capture</a></li>
			<li><a href="compass.html"	id="goCompass">Compass</a></li>
			<li><a href="connection.html"	id="goConnection">Connection</a></li>
			<li><a href="contacts.html"	id="goContacts">Contacts</a></li>			
			<li><a href="device.html"	id="goDevice">Device</a></li>
			<li><a href="event.html"	id="goEvent">Event</a></li>			
			<li><a href="file.html"	id="goFile">File</a></li>
			<li><a href="geolocation.html"	id="goGeolocation">Geolocation</a></li>
			<li><a href="media.html"	id="goMedia">Media</a></li>			
			<li><a href="notification.html"	id="goNotification">Notification</a></li>
			<li><a href="storage.html"	id="goStorage">Storage</a></li>