实例

本节介绍一些jQuery UI的使用实例。

jQuery UI提供了一组用户界面交互、特效、小部件、实用工具及主题。通过实例演示、查看源代码、创建主题、阅读API 文档，开始学习使用jQuery UI。

交互（Interactions）

交互（Interactions）向任何元素添加基本的基于鼠标的行为。您可以只通过短短的几行代码即可创建排序列表、缩放元素、拖放行为等等。交互（Interactions）也作用于更复杂的小部件和应用程序。

• 拖动（Draggable）
• 放置（Droppable）
• 缩放（Resizable）
• 选择（Selectable）
• 排序（Sortable）

小部件（Widgets）

小部件（Widgets）有功能齐全的UI控件，使桌面应用程序也具备Web应用程序一样丰富的功能。所有的小部件（Widgets）提供了一个核心，带有定制行为的大量扩展以及完整的主题支持。

• 折叠面板（Accordion）
• 自动完成（Autocomplete）
• 按钮（Button）
• 日期选择器（Datepicker）
• 对话框（Dialog）
• 菜单（Menu）
• 进度条（Progressbar）
• 滑块（Slider）
• 旋转器（Spinner）
• 标签页（Tabs）
• 工具提示框（Tooltip）

特效（Effects）

特效（Effects）支持颜色动画和Class转换，同时也提供了一些额外的Easings。另外，提供了一套完整的定制特效，供显示和隐藏元素时或者只是添加一些视觉显示时使用。

• 特效（Effect）
• 可见性（Visibility）
• 显示（Show）
• 隐藏（Hide）
• 切换（Toggle）
• Class 动画（Class Animation）
• 添加 Class（Add Class）
• 移除 Class（Remove Class）
• 切换 Class（Toggle Class）
• 转换 Class（Switch Class）
• 颜色动画（Color Animation）

实用工具（Utilities）

jQuery UI使用实体工具（Utilities）来创建交互（interactions）和小部件（widgets）。

• 定位（Position）
• 部件库（Widget Factory）