jquery-ui

jQuery UI 简介

jQuery UI 是基于 jQuery 的官方用户界面交互库，提供了一套可定制的主题化组件（如对话框、日期选择器、拖拽功能等）和交互效果（如动画、排序等）。它常用于快速构建现代化的 Web 界面。

核心功能

• 交互部件：拖拽（Draggable）、放置（Droppable）、排序（Sortable）等。
• 小部件（Widgets）：日期选择器（Datepicker）、进度条（Progressbar）、自动完成（Autocomplete）等。
• 效果动画：颜色动画、类过渡、显示/隐藏特效等。

基本使用方法

1. 引入依赖
   需先加载 jQuery，再加载 jQuery UI（可通过 CDN 或本地文件）：

   

   <!-- jQuery -->
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <!-- jQuery UI -->
   <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
   <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

2. 初始化组件
   以日期选择器为例：

   <input type="text" id="datepicker">
   <script>
     $( "#datepicker" ).datepicker();
   </script>

3. 主题定制
   可通过 jQuery UI ThemeRoller 生成自定义主题，或直接使用预置主题（如 smoothness、dark-hive）。

   

常见组件示例

• 拖拽功能

  $( "#draggable" ).draggable();

• 对话框

  $( "#dialog" ).dialog({ autoOpen: false });
  $( "#open-dialog" ).click(() => $("#dialog").dialog("open"));

注意事项

• 兼容性：jQuery UI 1.13+ 支持现代浏览器（IE 已逐步淘汰）。
• 性能：部分动画效果可能影响页面性能，建议按需使用。
• 替代方案：对于复杂应用，可考虑 Vue/React 生态的 UI 库（如 Element UI、Ant Design）。

官方资源

• 官网
• GitHub 仓库
• API 文档