Understanding the structure of the library

Let's take a moment to look at the structure of the library once it has been unpacked, so that we know where to look for specific utilities and files. This will give us a feel for its composition and structure. Open up the jqueryui folder where we unpacked the library. The contents of this folder should be as follows:

• A css folder

• A development-bundle folder

• A js folder

• An index.html file

We can see what the structure looks like from the following screenshot:

For the purposes of using jQuery UI, it is sufficient to know that the js and css folders are the ones you will need to use within a production environment; these can be dropped into your site structure as they are, and the relevant compressed files referenced accordingly from within your code.

If however you are using the library in a development capacity, then I would recommend using the development-bundle folder instead; this contains the same code as the individual source files, but in uncompressed format.

Examining the folder structure in detail

For most people, it is not necessary to know how the jQuery UI library is made up; after all, the two key folders to use can simply be dropped in to your site and referenced accordingly. In this case, you may wish to skip this section and move onto Working with ThemeRoller.

If however your skills are more advanced and you want to learn more about the structure of the library, then please read on. I would recommend having a copy of the jQuery downloaded to hand as you work through this section, so that you can get to grips with how the library is made up.

The css folder is used to store the complete CSS framework that comes with the library. In this folder there will be a directory that has the name of the theme we chose when building the download package. Inside this is a single file that contains all of the CSS framework, and a folder that holds all the images used by the theme. We can also store the css files that we will be creating in this css directory.

The js folder contains minified versions of jQuery and the complete jQuery UI library, with all components rolled into one file. In a live project, it is the js and css folders that we'd want to drop into our site.

The index is an HTML file that gives a brief introduction to the library and displays all of the widgets along with some of the CSS classes. If this is the first time you've ever used the library, you can take a look at this file to see some of the things that we'll be working with throughout the course of this book.

The development-bundle directory contains a series of resources to help us develop with the library. It consists of the following subdirectories:

1. A demos folder

2. A docs folder

3. An external folder

4. A themes folder

5. A ui folder

The following screenshot shows how the folder structure should appear:

Also present in the directory are the license files, JSON source files, documents showing the version of the library and its main contributors, and an uncompressed version of jQuery.

The demos folder contains a series of basic examples, showing all of the different components in action. The docs folder contains API documents for each of the different components.

The external folder contains a set of tools that may be of use to developers. They are as follows:

• The globalize plugin

• The jshint plugin

• The mousewheel plugin

• The unit testing suite qunit (consisting of a JavaScript and a CSS file)

The globalize plugin provides localization support to jQuery, and can be used to format strings, dates, and numbers in over 350 cultures. The jshint plugin, a derivative of the jslint plugin, is a tool to detect errors and potential problems in JavaScript code while enforcing your own coding conventions. The mousewheel plugin, designed by Brandon Aaron, adds cross-browser mouse wheel support to your website or online application. The QUnit framework is jQuery's unit testing suite that we can use to run unit tests on our any code that we create.

Tip

For more information on QUnit, go to http://docs.jquery.com/QUnit.

The themes folder contains either the default theme or the theme that was selected during the download builder. Other themes that we download at a later point or themes that we create ourselves can also be stored here.

The ui folder contains the individual and uncompressed source files of each of the different components of the library.

Note

If you select the Stable download option from the main page, you will find that the contents appear different—the Stable download option contains the contents of the development-bundle folder only, and the theme included by default is called Base. This is visually similar to the Smoothness theme we've downloaded in the custom package.