发布在：jQuery UI > 使用 jQuery UI

使用 Bower 搭配 jQuery UI

**注意：**本文档参考了 jQuery UI 1.11 中提供的功能。

Bower 是一个面向 Web 的包管理器。你可以使用 Bower 从命令行下载诸如 jQuery UI 等库，而无需从各个网站手动下载每个项目。

例如，假设我们正在启动一个新项目，并且需要使用 jQuery UI 的手风琴小组件。我们将为我们的项目创建一个新目录，并添加下面所示的样板 index.html。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery Projects</title>
</head>
<body>
 
<div id="projects">
    <h3>jQuery Core</h3>
    <p>jQuery is a fast, small, and feature-rich JavaScript library...</p>
    <h3>jQuery UI</h3>
    <p>jQuery UI is a curated set of user interface interactions...</p>
    <h3>jQuery Mobile</h3>
    <p>jQuery Mobile is a HTML5-based user interface system...</p>
</div>
 
<script>
    $( "#projects" ).accordion();
</script>
 
</body>
</html>

此示例会因 JavaScript 错误而失败，因为 jQuery 核心和 jQuery UI 均未加载。让我们使用 Bower 加载它们。

link 使用 Bower 下载 jQuery UI

使用 bower install 命令通过 Bower 下载库。要安装 jQuery UI，请运行 bower install jquery-ui。这样做会创建以下（简化的）目录结构。

注意：如果你收到 bower 命令未找到的错误，请查看 Bower 的安装说明。

.
├── 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

这里发生了两件事。首先，Bower 知道 jQuery UI 依赖于 jQuery 核心，因此它自动下载了这两个库。其次，jQuery UI 的所有最新版本文件都方便地放置在新建的 bower_components 目录中的 jquery-ui 目录中。

注意：如果你不想要最新版本，则可以选择向 bower install 提供版本号。例如，bower install jquery-ui#1.10.4 安装 jQuery UI 的 1.10.4 版本。

现在我们有了可用的文件，我们必须使用它们。

link 使用 Bower 下载的文件

我们有几种不同的选项来使用通过 Bower 下载的文件。最简单的方法是在我们的 bower_components/jquery 和 bower_components/jquery-ui 目录中使用缩小和连接的文件。此方法如下所示。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery Projects</title>
    <link rel="stylesheet" href="bower_components/jquery-ui/themes/smoothness/jquery-ui.min.css">
</head>
<body>
 
<div id="projects">
    <h3>jQuery Core</h3>
    <p>jQuery is a fast, small, and feature-rich JavaScript library...</p>
    <h3>jQuery UI</h3>
    <p>jQuery UI is a curated set of user interface interactions...</p>
    <h3>jQuery Mobile</h3>
    <p>jQuery Mobile is a HTML5-based user interface system...</p>
</div>
 
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/jquery-ui/jquery-ui.min.js"></script>
<script>
    $( "#projects" ).accordion();
</script>
 
</body>
</html>

此代码成功构建了我们的手风琴小组件，但它还包括了整个 jQuery UI，而我们只需要手风琴小组件。由于 jQuery UI 中的内容远多于手风琴小组件，这迫使用户下载了远远超出他们需要的内容。

由于 Bower 还下载了 jQuery UI 的各个源文件，因此我们可以选择使用它们向用户仅发送手风琴小组件及其依赖项。以下示例采用此方法构建了相同的手风琴小组件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery Projects</title>
    <link rel="stylesheet" href="bower_components/jquery-ui/themes/smoothness/jquery-ui.min.css">
</head>
<body>
 
<div id="projects">
    <h3>jQuery Core</h3>
    <p>jQuery is a fast, small, and feature-rich JavaScript library...</p>
    <h3>jQuery UI</h3>
    <p>jQuery UI is a curated set of user interface interactions...</p>
    <h3>jQuery Mobile</h3>
    <p>jQuery Mobile is a HTML5-based user interface system...</p>
</div>
 
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/jquery-ui/ui/core.js"></script>
<script src="bower_components/jquery-ui/ui/widget.js"></script>
<script src="bower_components/jquery-ui/ui/accordion.js"></script>
<script>
    $( "#projects" ).accordion();
</script>
 
</body>
</html>

从这里，你可以将 jQuery UI 的文件连接到自己的自定义构建系统，以合并和精简你的资源以进行生产。如果你是一位 RequireJS 用户，请查看我们的关于如何将 jQuery UI 与 AMD 一起使用的指南。