Time for action – developing with jQuery Mobile

Let's see a quick example of how to use jQuery Mobile in a PhoneGap application. You can make any HTML page mobile friendly by using jQuery Mobile. We will create a simple app to show multiple entries in the page as a list and show some footer menus.

1. To start with, we need to download jQuery and jQuery Mobile components and place them in our project's JS/CSS directory. jQuery is a single JavaScript file and jQuery Mobile includes both a JavaScript file and a CSS file. We need to include them both in our app's HTML page.
2. Include the CSS file at the top of the HTML page, right above the </head> tag:

   <link rel="stylesheet" href="css/jquery.mobile-1.4.4.min.css" />

3. Include the JavaScript files at the bottom of the page, right above the </body> tag:

   <script src="js/jquery-1.11.1.min.js"></script>
   <script src="js/jquery.mobile-1.4.4.min.js"></script&gt...