Skip to content

Commit 8bcca9b

Browse files
tjvantolltjvantoll
committed
jQuery UI: Adding guide to using jQuery UI with Bower.
Ref jquerygh-186 Ref jquerygh-462
1 parent 2a21fbf commit 8bcca9b

File tree

3 files changed

+152
-1
lines changed

3 files changed

+152
-1
lines changed

‎order.yml

+1
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,7 @@
103103
- how-to-use-the-widget-factory
104104
- environments:
105105
- amd
106+
- bower
106107
- jquery-mobile:
107108
- getting-started
108109
- theme-roller

‎page/jquery-ui/environments/amd.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ In this article we'll walk through the process of using AMD with jQuery UI. Let'
1111

1212
We'll need to download three things to get up and running: jQuery core, jQuery UI, and an AMD loader.
1313

14-
While any AMD loader will work, we'll use RequireJS in this article, which you can download from <http://requirejs.org/docs/download.html>. If you don't have a version of jQuery core handy, you can get it from <http://jquery.com/download/>, and you can download jQuery UI directly from <http://jqueryui.com/>.
14+
While any AMD loader will work, we'll use RequireJS in this article, which you can download from <http://requirejs.org/docs/download.html>. If you don't have a version of jQuery core handy, you can get it from <http://jquery.com/download/>, and you can download jQuery UI directly from <http://jqueryui.com/>. Alternatively you can [download these libraries using a package manager such as Bower](/jquery-ui/environments/bower/).
1515

1616
### Directory Structure
1717

‎page/jquery-ui/environments/bower.md

+150
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
---
2+
title: Using jQuery UI with Bower
3+
level: intermediate
4+
---
5+
6+
[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.
7+
8+
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.
9+
10+
```
11+
<!doctype html>
12+
<html lang="en">
13+
<head>
14+
<meta charset="utf-8">
15+
<title>jQuery Projects</title>
16+
</head>
17+
<body>
18+
19+
<div id="projects">
20+
<h3>jQuery Core</h3>
21+
<p>jQuery is a fast, small, and feature-rich JavaScript library...</p>
22+
<h3>jQuery UI</h3>
23+
<p>jQuery UI is a curated set of user interface interactions...</p>
24+
<h3>jQuery Mobile</h3>
25+
<p>jQuery Mobile is a HTML5-based user interface system...</p>
26+
</div>
27+
28+
<script>
29+
$( "#projects" ).accordion();
30+
</script>
31+
32+
</body>
33+
</html>
34+
```
35+
36+
This examples fails with a JavaScript error because neither jQuery core nor jQuery UI are loaded. Let's load them with Bower.
37+
38+
### Downloading jQuery UI With Bower
39+
40+
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.
41+
42+
*Note: If you get an error that the `bower` command is not found, checkout [Bower's installation instructions](http://bower.io/#installing-bower).*
43+
44+
<pre>
45+
.
46+
├── bower_components
47+
│   ├── jquery
48+
│   │   ├── dist
49+
│   │   │   ├── jquery.js
50+
│   │   │   └── jquery.min.js
51+
│   │   └── src
52+
│   └── jquery-ui
53+
│   ├── themes
54+
│   │   ├── base
55+
│   │   │   ├── jquery-ui.css
56+
│   │   │   ├── accordion.css
57+
│   │   │   ├── ...
58+
│   │   │   └── minified
59+
│   │   │   ├── jquery-ui.min.css
60+
│   │   │   ├── accordion.min.css
61+
│   │   │   └── ...
62+
│   │   └── [The rest of jQuery UI's themes]
63+
│   └── ui
64+
│   ├── jquery-ui.js
65+
│   ├── accordion.js
66+
│   ├── ...
67+
│   └── minified
68+
│   ├── jquery-ui.min.js
69+
│   ├── accordion.min.js
70+
│   └── ...
71+
└── index.html
72+
</pre>
73+
74+
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.
75+
76+
*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.*
77+
78+
Now that we have the files available, we have to use them.
79+
80+
### Using Bower Downloaded Files
81+
82+
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.
83+
84+
```
85+
<!doctype html>
86+
<html lang="en">
87+
<head>
88+
<meta charset="utf-8">
89+
<title>jQuery Projects</title>
90+
<link rel="stylesheet" href="bower_components/jquery-ui/themes/base/jquery-ui.css">
91+
</head>
92+
<body>
93+
94+
<div id="projects">
95+
<h3>jQuery Core</h3>
96+
<p>jQuery is a fast, small, and feature-rich JavaScript library...</p>
97+
<h3>jQuery UI</h3>
98+
<p>jQuery UI is a curated set of user interface interactions...</p>
99+
<h3>jQuery Mobile</h3>
100+
<p>jQuery Mobile is a HTML5-based user interface system...</p>
101+
</div>
102+
103+
<script src="bower_components/jquery/dist/jquery.min.js"></script>
104+
<script src="bower_components/jquery-ui/ui/minified/jquery-ui.min.js"></script>
105+
<script>
106+
$( "#projects" ).accordion();
107+
</script>
108+
109+
</body>
110+
</html>
111+
```
112+
113+
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.
114+
115+
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.
116+
117+
```
118+
<!doctype html>
119+
<html lang="en">
120+
<head>
121+
<meta charset="utf-8">
122+
<title>jQuery Projects</title>
123+
<link rel="stylesheet" href="bower_components/jquery-ui/themes/base/core.css">
124+
<link rel="stylesheet" href="bower_components/jquery-ui/themes/base/theme.css">
125+
<link rel="stylesheet" href="bower_components/jquery-ui/themes/base/accordion.css">
126+
</head>
127+
<body>
128+
129+
<div id="projects">
130+
<h3>jQuery Core</h3>
131+
<p>jQuery is a fast, small, and feature-rich JavaScript library...</p>
132+
<h3>jQuery UI</h3>
133+
<p>jQuery UI is a curated set of user interface interactions...</p>
134+
<h3>jQuery Mobile</h3>
135+
<p>jQuery Mobile is a HTML5-based user interface system...</p>
136+
</div>
137+
138+
<script src="bower_components/jquery/dist/jquery.js"></script>
139+
<script src="bower_components/jquery-ui/ui/core.js"></script>
140+
<script src="bower_components/jquery-ui/ui/widget.js"></script>
141+
<script src="bower_components/jquery-ui/ui/accordion.js"></script>
142+
<script>
143+
$( "#projects" ).accordion();
144+
</script>
145+
146+
</body>
147+
</html>
148+
```
149+
150+
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, checkout our [guide on how to use jQuery UI with AMD](/jquery-ui/environments/amd/).

0 commit comments

Comments
 (0)