发布在：jQuery UI

开始使用 jQuery UI

link 什么是 jQuery UI？

jQuery UI 是一个构建在 jQuery JavaScript 库之上的小部件和交互库，你可以使用它来构建高度交互的 Web 应用程序。本指南旨在让你快速了解 jQuery UI 的工作原理。按照以下步骤开始使用。

link 首先查看演示

若要了解 jQuery UI 的功能，请查看UI 演示。

在演示部分，导航列出了 jQuery UI 提供的所有交互和小部件。选择一个交互或小部件，你将看到该特定插件的多个演示配置。每个演示都允许你查看源代码、更改主题，并且 URL 始终可以被书签。例如，查看手风琴小部件的填充空间演示页面。

link 构建你的自定义 jQuery UI 下载

一旦你对 jQuery UI 是什么以及它做什么有了基本的了解，你就可以试用了！现在是时候前往 jQuery UI 网站上的下载构建器下载 jQuery UI 的副本了。jQuery UI 的下载构建器允许你选择想要下载的组件，并为你的项目获取一个自定义版本的库。构建你的自定义 jQuery UI 下载有三个简单的步骤

链接 步骤 1：选择您需要的组件

下载生成器的主要列会列出 jQuery UI 中的所有 JavaScript 组件，并将其分类为以下几组：核心、交互、小部件和效果。jQuery UI 中的某些组件依赖于其他组件。只需选中您要下载的小部件的复选框，任何必需的依赖项也会自动被选中。您选择的组件都将合并到一个自定义 jQuery UI JavaScript 文件中。

Configuring a download

链接 步骤 2：选择一个主题（或构建您自己的自定义主题）

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

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

链接 步骤 3：选择一个 jQuery UI 版本

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

链接 单击下载！

您已完成下载生成器！单击下载按钮，您将获得一个包含您所选内容的自定义 zip 文件。

链接 基本概述：在网页上使用 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()。如下所示

HTML

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

JavaScript

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

Example Screenshot

链接就是这样！

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

链接根据您的需要自定义 jQuery UI

jQuery UI 允许您通过多种方式对其进行自定义。您已经了解下载生成器如何允许您自定义 jQuery UI 副本以仅包含您想要的部分，但还有其他方法可以根据您的实现自定义该代码。

link jQuery UI 基础：使用选项

jQuery UI 中的每个插件都有一个默认配置，该配置针对最基本和最常见的用例。但是，如果你希望插件的行为与其默认配置不同，则可以使用“选项”覆盖其每个默认设置。选项是一组作为参数传递到 jQuery UI 小组件中的属性。例如，滑块小组件有一个方向选项，它允许你指定滑块是水平还是垂直。若要为页面上的滑块设置此选项，只需像这样将其作为参数传递即可

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 导航中的“主题”链接或直接访问 jQuery UI ThemeRoller 随时访问它。

ThemeRoller 提供了一个自定义界面，用于设计 jQuery UI 小组件使用的所有元素。当你调整左栏中的“杠杆”时，右侧的小组件会反映你的设计。ThemeRoller 的画廊选项卡提供了许多预先设计的主题（下载生成器提供的相同主题），你可以根据需要调整或下载这些主题。

ThemeRoller Example

link 下载你的主题

当你单击 ThemeRoller 中的“下载主题”按钮时，你将被定向到下载生成器，并且你的自定义主题将在主题下拉菜单中自动选中。你可以进一步配置下载包。下载后，你会看到 example.html 页面使用你的自定义主题进行样式设置。

快速提示：如果您需要编辑主题，只需打开 CSS 文件并找到显示“要查看和修改此主题，请访问...” 的位置。该 URL 将在 ThemeRoller 中打开主题以进行编辑。

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

jQuery UI 用户和开发人员资源在支持中心中保持最新状态。

链接 征集开发人员！

想加入 jQuery UI 团队吗？我们很乐意得到您的帮助！访问 UI 开发中心，了解如何参与的详细信息。