Now we finally get to the meat and potatoes of what this book is about: jQuery Mobile. First thing we need to do is download the framework to use it in our projects. You have two ways of doing this. You can download a prebuilt ZIP file containing the latest stable release and everything you will need to use jQuery Mobile. The second option is that you can build a package that contains only the pieces you need, including earlier versions or unstable branches.
In this book, we will be using the complete package. There are couple reasons for this. First of all, we will be using and looking at so many different aspects of the framework that it would take a lot of space here for us to tell you which pieces to select in the builder. More importantly, as noted on the jQuery Mobile website, the builder is currently in alpha and is not recommended for production environments. Yes, we realize that we are not in a production environment here, but we don't want to try to master a framework by using code that could be unstable. We believe that's enough babbling, let's start downloading!
Go to http://jquerymobile.com. On the top right- hand side of the page, you will see the links to download the latest stable version (which at the time of writing this book is 1.4.5) and a link to the download builder. Click on the link for the latest stable. After the ZIP file is downloaded, go ahead and open it up and you should see the following:
That's quite daunting, isn't it! No worries at all though; we will only be referencing a few of the files here, but let's talk about the overall contents of the ZIP file so that you will have a better understanding of what you just downloaded:
demos: We highly recommend that you look at and play around with the contents of this folder. You will find numerous examples here of the different elements of jQuery Mobile. Go now, spend some time with it and then come back—we'll wait.images: This directory contains all of the icons that jQuery Mobile uses throughout the framework. You won't have to reference these directly, rather jQuery Mobile does so through CSS and its core JavaScript files.*.css files: These are several style sheets that make up the overall jQuery Mobile framework. They control the preceding icons, the theme (more on that later), structure, and more.jquery.mobile-1.4.5.css: This is the main and most important CSS file of the download and the one that you will reference and use in your applications.jquery.mobile-1.4.5.js: This is the core JavaScript of the framework.Note
You may have noticed that there are two versions of each file. One that has
.minappended to the filename and one that does not. Those with.minare compressed minified files. This means they do not have any white spaces, new line characters, and comments in them. They are the absolute smallest in size that they can be and are hard to read as they do not have any formatting. Uncompressed files, or those without.min, contain comments, spacing, and more things that make them easier to read.As a rule of thumb, you should develop with the uncompressed files; that way, if you have any questions or need to see how something works, you can easily read the file. When you deploy the application, use the
.minfiles so that the application size is smaller.A smaller web application will load faster, uses less bandwidth, and any little bit helps in a time where we have metered bandwidth on mobile devices. Google checks for the page load time as part of SEO. Faster loading JavaScript and CSS files will help you score brownie points and hence minified (
.min) files should be preferred in the production environment.