发布于: jQuery UI > 使用 jQuery UI

使用 Bower 搭配 jQuery UI

**注意:** 本文档所指功能在 jQuery UI 1.11 中提供。

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

举个例子，假设我们正在开始一个新项目，需要使用 jQuery UI 的手风琴（accordion）小部件。我们将为项目创建一个新目录，并添加如下所示的样板 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 core，也没有加载 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 core，因此它自动下载了两个库。其次，最新版本的所有 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 配合使用的指南。