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:
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
folderA
docs
folderAn
external
folderA
themes
folderA
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
pluginThe
cookie
pluginA 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.