Setting up jQuery UI

We will need the jQuery and jQuery UI libraries before going ahead. Throughout this book, we'll use jQuery Version 1.10.2 and jQuery UI Version 1.10.4 with the UI lightness theme . Note that the jQuery UI files also contain a copy of the jQuery source file.

Downloading the required files

To download jQuery, visit the download page on the jQuery website at http://jquery.com/download/.

Tip

Make sure that you download the correct version as per your requirements.

For jQuery UI, visit the download page at http://jqueryui.com/download/ to download the jQuery UI library.

Tip

Since we will cover all components throughout the book, download the full version of the library.

Using jQuery/jQuery UI libraries with a CDN

You might be aware that Content Delivery Networks (CDN) host many popular libraries. Since the browsers cache JavaScript files, your page will not have to load a JavaScript file again if it is referenced from a CDN and already cached in browser. You can link jQuery and jQuery UI among CDN's many other libraries.

Tip

Make sure that you are connected to the Internet if you have referenced the libraries from the CDN in your pages.

Google, Microsoft, and some other companies provide CDN for jQuery, jQuery UI, and other libraries. Here are the links to pages for downloading these libraries:

• Google CDN can be downloaded from https://developers.google.com/speed/libraries/devguide#jquery.
• Microsoft CDN can be downloaded from http://www.asp.net/ajaxlibrary/cdn.ashx#Using_jQuery_from_the_CDN_21.
• CDNJS can be downloaded from https://cdnjs.com/. It is a helpful site where you can find many libraries and their different versions.

Setting up the folder structure for the JavaScript and CSS files

We will now set up the folder structure that we will use for all the chapters in this book. The steps are as follows:

1. In your document root, create a folder named MasteringjQueryUI. Then, create a folder for each chapter inside it.
2. For this chapter, create a new folder named Chapter1 inside MasteringjQueryUI and two more folders named js and css inside the Chapter1 folder.
3. Now extract the jQuery UI files into a separate folder and go to its js folder. You will see three files: jQuery source file and full and minified versions of jQuery UI.
4. Copy the jQuery source file and any one version of jQuery UI source files and place them inside the js folder that you created inside Chapter1 of the MasteringjQueryUI folder.
5. Also, copy the ui-lightness folder from the css folder from the downloaded jQuery UI to the css folder of Chapter1.

Now we are ready to experiment with jQuery UI and create some informative and fun examples. Let's start our journey by creating the quiz application.