Permalink
Fetching contributors…
Cannot retrieve contributors at this time
144 lines (115 sloc) 5.38 KB
**Note:** This documentation refers to functionality made available in jQuery UI 1.11.
[Bower](http://bower.io/) is a package manager for the Web. You can use Bower to download libraries like jQuery UI from the command line, without having to manually download each project from their respective sites. As an example, suppose we're starting a new project and we need to use [jQuery UI's accordion widget](http://jqueryui.com/accordion/). We'll create a new directory for our project, and add the boilerplate `index.html` shown below. ``` jQuery Projects

jQuery Core

jQuery is a fast, small, and feature-rich JavaScript library...

jQuery UI

jQuery UI is a curated set of user interface interactions...

jQuery Mobile

jQuery Mobile is a HTML5-based user interface system...


This example fails with a JavaScript error because neither jQuery core nor jQuery UI are loaded. Let's load them with Bower.

### Downloading jQuery UI With Bower

Libraries are downloaded with Bower using the `bower install` command. To install jQuery UI, run `bower install jquery-ui`. Doing so creates the following (simplified) directory structure.

*Note: If you get an error that the `bower` command is not found, check out [Bower's installation instructions](http://bower.io/#installing-bower).*

<pre>
.
├── bower_components
│   ├── jquery
│   │   ├── dist
│   │   │   ├── jquery.js
│   │   │   └── jquery.min.js
│   │   └── src
│   └── jquery-ui
│       ├── themes
│       │   ├── smoothness
│       │   │   ├── jquery-ui.css
│       │   │   └── jquery-ui.min.css
│       │   └── [The rest of jQuery UI's themes]
│       ├── ui
│       │   ├── accordion.js
│       │   ├── autocomplete.js
│       │   └── ...
│       ├── jquery-ui.js
│       └── jquery-ui.min.js
└── index.html
</pre>

A couple of things happened here. First, Bower knew that jQuery UI depends on jQuery core, so it downloaded both libraries automatically. Second, all of jQuery UI's files for the latest release were conveniently placed in a `jquery-ui` directory within a newly created `bower_components` directory.

*Note: If you don't want the latest version, you can optionally provide a version number to `bower install`. For instance `bower install jquery-ui#1.10.4` installs version 1.10.4 of jQuery UI.*

Now that we have the files available, we have to use them.

### Using Bower Downloaded Files

We have a few different options for using the files downloaded with Bower. The easiest is to use the minified and concatenated files in our `bower_components/jquery` and `bower_components/jquery-ui` directories. This approach is shown below.

<!doctype html> jQuery Projects

jQuery Core

jQuery is a fast, small, and feature-rich JavaScript library...

jQuery UI

jQuery UI is a curated set of user interface interactions...

jQuery Mobile

jQuery Mobile is a HTML5-based user interface system...


This code successfully builds our accordion widget, but it also includes the entirety of jQuery UI when we only need the accordion widget. Since there's a lot more than an accordion widget in jQuery UI, this forces the user to download far more than they need.

Because Bower also downloaded jQuery UI's individual source files, we can alternatively use them to send the user just the accordion widget and its dependencies. The following example builds the same accordion widget taking this approach.

<!doctype html> jQuery Projects

jQuery Core

jQuery is a fast, small, and feature-rich JavaScript library...

jQuery UI

jQuery UI is a curated set of user interface interactions...

jQuery Mobile

jQuery Mobile is a HTML5-based user interface system...


From here, you can hook jQuery UI's files into your own custom build system to concatenate and minify your resources for production. If you're a RequireJS user, check out our [guide on how to use jQuery UI with AMD](/jquery-ui/environments/amd/).