Getting Started with jQuery Mobile
Getting Started with jQuery Mobile
At the time of writing, jQuery Mobile is in its 1.0 alpha 2 release. While there are likely to
be some changes between this version and the eventual stable release of 1.0, things should work in more or less the same way. As such, it’s probably best to download the latest stable release, which can be obtained from http://jquerymobile.com/download.
While that page includes information on how to include jQuery from a CDN (content delivery network—see http://en.wikipedia.org/wiki/Content_delivery_network for more information), it is recommended that you download the ZIP file so that wrapping the application with PhoneGap is still an option.
NOTE: While a CDN offers an efficient way for web sites to optimize load times for scripts by making use of a distributed network of servers, this does prevent applications from being wrapped effectively for offline distribution. Carefully consider the type of application distribution before using a CDN in mobile web application code.
Once you have downloaded the jQuery Mobile distribution, you should have a set of files similar to that shown in Figure 11–12.
Figure 11–12. Currently, the jQuery Mobile distribution is very simple and light.
CHAPTER 11: Mobile UI Frameworks Compared
While the distribution does not contain any samples, these can be viewed online. For instance, the 1.0 alpha 2 demos are available at http://jquerymobile.com/demos/1.0a2.
In addition to the jQuery Mobile library files, we will also need to obtain jQuery 1.4.4, as this is a prerequisite for the jQuery Mobile framework. One of the simplest ways to get jQuery 1.4.4 is to download it from the CDN location, at http://code.jquery.com/jquery-1.4.4.min.js.
Now that we have the files that we need, let’s copy them into our jQuery Mobile Moundz project. From the jQuery Mobile distribution, copy all the files into the main Moundz directory, and copy the jquery-1.4.4.min.js file there also. After you have done this, the Moundz application directory should resemble Figure 11–13.
Figure 11–13. Moundz application folder structure after adding required jQuery Mobile files Once we have added the required jQuery Mobile (and jQuery) files, there will be a little
duplication. If we were building a production application, we would probably clean that up, but for the sake of our challenge we’ll let it slide. We’ll now make the required modifications to the HTML:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link rel="stylesheet" media="screen" href="jquery.mobile-1.0a2.min.css" />
CHAPTER 11: Mobile UI Frameworks Compared
<!-- <link rel="stylesheet" media="screen" href="moundz.css" /> --> <script type="text/javascript" src="jquery-1.4.4.min.js"></script> <script type="text/javascript" src="jquery.mobile-1.0a2.min.js"></script>
<script type="text/javascript" src="moundz.js"></script> <!-- <script type="text/javascript" src="phonegap.js"></script> --> <script type="text/javascript" src="http://api.geominer.net/jsapi/v1/geominer.js"> </script> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"> </script> <script type="text/javascript"> function initialize() {
MOUNDZ.init(); } // initialize </script> </head> <body onload="initialize()"> ... </body> </html>
In the preceding code, we added the required jQuery Mobile files to the index.html file and also changed the version of jQuery that is included in the sample (from jQuery- 1.4.2.min.js to jQuery-1.4.4.min.js). Additionally, we commented out the moundz.css file to prevent any CSS conflicts.
We are now ready to get Moundz working with jQuery Mobile.