The structure of the library

Let's take a moment to look at the structure of the unpacked library. 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 directory

• A development-bundle directory

• A js directory

• An index file

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

The js folder contains minified versions of jQuery and the complete jQuery UI library, with all components rolled into this 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 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 and contains the following subdirectories:

• A demos folder

• A docs folder

• An external folder

• A themes folder

• A ui folder

Also present in the directory are the license files, documents showing the version of the library and its main contributors. An uncompressed version of jQuery is also present.

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 bgiframe plugin

• The cookie plugin

• A JavaScript implementation of the diff algorithm jsDiff

• The unit testing suite qunit

• The simulate plugin

The bgiframe plugin is used to fix the issue in IE6 where <select> elements appear above other content, regardless of z-index. This plugin is due to be removed in release 1.8 of jQuery UI and replaced with the stackfix utility. The cookie plugin makes it easy to use browser cookies. jsDiff is the JavaScript implementation of an algorithm that can be used to compare two strings and show the differences between them.

qunit is jQuery's unit testing suite and can be used to run unit tests on widgets and plugins that we may create. For more information on QUnit visit: http://docs.jquery.com/QUnit. The simulate plugin simulates mouse and keyboard events and allows the functionality of widgets or plugins to be tested automatically.

Other than the cookie plugin (which we use in Chapter 12), we won't be using any of these tools in the examples we'll look at.

The themes folder contains two different themes—the first is the base theme that is a neutral, minimal theme of grey tones. The second is the smoothness theme, which we chose when building our download. It is very similar to the base theme.

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