jQuery UI 简介

jQuery UI 是 jQuery 团队开发的一套基于 jQuery 框架的用户界面组件库，用于创建各种富客户端应用程序和插件。jQuery UI 包括一组易于使用和高度可定制的用户界面插件，这些插件可以快速地为 Web 应用程序添加交互性和动态性。

jQuery UI 采用逐渐增强的设计方式，允许开发人员控制插件的行为、样式和交互性。jQuery UI 提供的组件包括：自动完成、按钮、日期选择器、对话框、拖放、效果、菜单、进度条、选择器、滑块、选项卡、工具提示和主题等。

特点

jQuery UI 具有以下特点：

轻量级：jQuery UI 框架本身只有约30KB，压缩后只有10KB。
易用性：jQuery UI 提供了一组强大而易用的API和事件。组件可以很容易地添加、配置和扩展。
跨浏览器支持：jQuery UI 框架的组件可以在主流的浏览器中使用，如 IE、Firefox、Chrome、Safari 等。

安装

要使用 jQuery UI，您需要同时引入 jQuery 和 jQuery UI 这两个库，而且 jQuery 必须在 jQuery UI 前面引入。可以从以下网址下载它们：

jQuery：https://jquery.com/
jQuery UI：https://jqueryui.com/

下面是一个例子：

<head>
  <script src="jquery.js"></script>
  <script src="jquery-ui.js"></script>
  <link rel="stylesheet" href="jquery-ui.css">
</head>

使用

jQuery UI 的使用非常简单，只需在 HTML 中包含相应的 JS 和 CSS 文件，并按照文档说明进行初始化即可。例如，下面代码实现了一个拖放效果：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery UI Example</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <style>
    #draggable {
      width: 100px;
      height: 100px;
      background: orange;
      text-align: center;
      line-height: 100px;
      position: absolute;
    }
  </style>
  <script>
    $(function() {
      $( "#draggable" ).draggable();
    });
  </script>
</head>
<body>
  <div id="draggable" class="ui-widget-content">
    Drag me around
  </div>
</body>
</html>

主题

jQuery UI 的主题系统允许开发人员轻松地将任何组件的样式与网站的整体外观相匹配，并能够自定义主题，以满足特定的需求。jQuery UI 提供了一组默认主题，同时也允许开发人员创建自己的主题。

总结

在 Web 开发中，往往需要使用各种各样的用户交互组件来提高用户体验，此时 jQuery UI 是一个非常好的选择。jQuery UI 提供了丰富的组件和主题，易于使用和扩展，并且具有跨浏览器支持的特点，非常适合用于 Web 应用程序的开发。

jQuery UI 教程 jQuery UI 设计主题