发布于: jQuery UI

jQuery UI 入门指南

link 什么是 jQuery UI？

jQuery UI 是一个建立在 jQuery JavaScript 库之上的小部件（widget）和交互库，你可以使用它来构建高度互动的 Web 应用程序。本指南旨在让你快速掌握 jQuery UI 的工作原理。请跟随下文开始学习。

link 从查看演示示例（Demos）开始

要感受 jQuery UI 的功能，请查看 UI 演示示例。

在演示示例部分，导航栏列出了 jQuery UI 提供的所有交互和部件。选择一个交互或部件，你将看到该特定插件的几种演示配置。每个演示都允许你查看源代码、更改主题，且其 URL 始终可以添加为书签。例如，查看 折叠面板（accordion）部件的填充空间演示页面。

link 构建你的定制化 jQuery UI 下载包

一旦你对 jQuery UI 是什么及其作用有了基本了解，就可以准备动手尝试了！是时候前往 jQuery UI 网站上的 下载生成器（Download Builder） 来下载 jQuery UI 的副本了。jQuery UI 的下载生成器允许你选择想要下载的组件，并为你的项目获取定制版本的库。构建定制 jQuery UI 下载包只需简单的三个步骤：

link 第 1 步：选择你需要的组件

下载生成器的主列列出了 jQuery UI 中的所有 JavaScript 组件，并分为：核心（core）、交互（interactions）、部件（widgets）和特效（effects）。jQuery UI 中的某些组件依赖于其他组件。只需勾选你想要下载的部件，任何所需的依赖项也会被自动勾选。你选择的组件将全部合并到一个定制的 jQuery UI JavaScript 文件中。

Configuring a download

link 第 2 步：选择主题（或创建你自己的定制主题）

在下载生成器的右列，你会看到一个字段，可以从多个预先设计的 jQuery UI 部件主题中进行选择。你可以从我们提供的各种主题中选择，也可以使用 ThemeRoller 设计自己的定制主题（稍后会详细介绍）。

高级主题设置： 下载生成器的主题部分还为你的主题提供了一些高级配置设置。如果你计划在一个页面上使用多个主题，这些字段将非常有用。如果你计划在页面上仅使用一个主题，则可以完全跳过这些设置。

link 第 3 步：选择 jQuery UI 版本

下载生成器的最后一步是选择版本号。请务必不仅检查你选择的 jQuery UI 版本，还要检查该版本支持的 jQuery Core 版本，因为不同版本的库支持不同版本的 jQuery。有关每个 jQuery UI 版本中新特性的更多信息，请参阅项目的 升级指南 和 更新日志。

link 点击下载！

你已经完成了下载生成器的操作！点击下载按钮，你将获得一个包含你所选所有内容的定制 zip 文件。

link 基本概览：在网页中使用 jQuery UI

接下来，用文本编辑器打开下载的 zip 文件中的 index.html。你会看到它引用了你的主题、jQuery 和 jQuery UI。通常，你需要在任何页面上包含这三个文件才能使用 jQuery UI 的部件和交互。

1
2
3
 
<link rel="stylesheet" href="jquery-ui.min.css">
<script src="external/jquery/jquery.js"></script>
<script src="jquery-ui.min.js"></script>

包含必要文件后，你就可以在页面中添加一些 jQuery 部件了。例如，要制作一个日期选择器（datepicker）部件，你需要在页面中添加一个文本输入元素，然后在该元素上调用 .datepicker()。如下所示：

HTML

1
 
<input type="text" name="date" id="date">

JavaScript

1
 
$( "#date" ).datepicker();

Example Screenshot

link 就是这样！

有关所有 jQuery UI 部件和交互的演示，请查看 jQuery UI 网站的演示部分。

link 根据你的需求定制 jQuery UI

jQuery UI 允许你以多种方式进行定制。你已经了解了下载生成器如何让你定制 jQuery UI 副本以仅包含你想要的部分，但还有其他方法可以将该代码定制到你的具体实现中。

link jQuery UI 基础：使用选项（Options）

jQuery UI 中的每个插件都有一个针对最基本和最常见用例的默认配置。但如果你希望插件的行为不同于其默认配置，你可以使用“选项”来覆盖其每个默认设置。选项是作为参数传递给 jQuery UI 部件的一组属性。例如，滑块（slider）部件有一个方向选项（orientation），允许你指定滑块应该是水平的还是垂直的。要为页面上的滑块设置此选项，只需将其作为参数传递，如下所示：

1
2
3
 
$( "#mySliderDiv" ).slider({
    orientation: "vertical"
});

你可以根据需要传递多个不同的选项，每个选项后面用逗号分隔（最后一个除外）：

1
2
3
4
5
6
 
$( "#mySliderDiv" ).slider({
    orientation: "vertical",
    min: 0,
    max: 150,
    value: 50
});

只需记得将你的选项包裹在大括号 { } 中，你就上路了。当然，上面的例子只是触及了 jQuery UI 功能的皮毛。要获取整套 jQuery UI 部件的详细信息，请访问 jQuery UI 文档。

link 视觉定制：设计 jQuery UI 主题

如果你想设计自己的主题，jQuery UI 有一个专门为此目的设计的非常精巧的应用程序。它叫 ThemeRoller，你可以通过点击 jQuery UI 导航中的“Themes”链接，或者直接访问 jQuery UI ThemeRoller 来使用它。

ThemeRoller 提供了一个自定义界面，用于设计 jQuery UI 部件所使用的所有元素。当你调整左列的“杠杆”时，右侧的部件将反映你的设计。ThemeRoller 的 Gallery 选项卡提供了许多预先设计的主题（与下载生成器提供的相同），你可以对其进行微调或直接下载。

ThemeRoller Example

link 下载你的主题

当你点击 ThemeRoller 中的“Download theme”按钮时，你将被引导至下载生成器，并且你的定制主题将在主题下拉菜单中被自动选中。你可以从那里进一步配置你的下载包。下载后，你会发现 example.html 页面已应用了你的定制主题样式。

小贴士： 如果你需要编辑你的主题，只需打开 CSS 文件并找到写着“To view and modify this theme, visit ...”的地方。该 URL 将在 ThemeRoller 中打开该主题以进行编辑。

link 支持：我可以在哪里获得帮助？

jQuery UI 用户和开发资源在 支持中心 保持实时更新。

link 诚征开发者！

想加入 jQuery UI 团队吗？我们非常欢迎你的帮助！请访问 UI 开发中心 了解如何参与的详情。