jQuery UI Chinese Reference Manual

---

According to the "jQuery UI Chinese Reference Manual", jQuery UI is a set of user interface interactions, special effects, widgets and themes built on the jQuery JavaScript library. Whether you're creating a highly interactive web application or just adding a date picker to a form control, jQuery UI is a perfect choice. jQuery UI contains many widgets that maintain state, so it is slightly different from the typical jQuery plug-in usage pattern.

---

jQuery UI是一套JavaScript 库，提供抽象化、可自定义主题的GUI控件与动画效果。基于jQuery JavaScript库，可用来建构交互式的互联网应用程序。在2007年9月约翰·雷西格于jquery.com博客里的一篇文章里正式公诸于世。最新的版本需要jQuery 2.1.1或更新的版本。

提示：在开始学习 jQuery UI之前，您需要具备HTML、CSS、JavaScript基础知识。

jQuery UI的优缺点：

优点：

1、简单易用，继承 jQuery 简易使用特性，提供高度抽象接口，短期改善网站易用性。

2、轻便快捷，组件间相对独立，可按需加载，避免浪费带宽拖慢网页打开速度。

3、标准先进，支持 WAI-ARIA，通过标准 XHTML 代码提供渐进增强，保证低端环境可访问性。

4、强力支持，Google 为发布代码提供 CDN 内容分发网络支持。

缺点：

1、代码不够健壮：缺乏全面的测试用例，部分组件 Bugs 较多，不能达到企业级产品开发要求。

2、构架规划不足：组件间 API 缺乏协调，缺乏配合使用帮助。

3、控件较少：相对于 Dojo、YUI、Ext JS 等成熟产品，可用控件较少，无法满足复杂界面功能要求。

提示：我们的jQuery UI教程将帮助您逐步学习如何掌握并使用jQuery UI，如果你有任何疑问，请前往PHP中文网jQuery UI社区提出你的问题，会有热心网友为你解答。

jQuery UI功能

以1.9.0版本为例。

交互

• 拖曳（Draggable）–让元素可以用鼠标拖曳。

• 拖放（Droppable）–让控件可以接受其他拖曳进来的元素。

• 调整大小（Resizable）–让元素可以调整大小。

• 选取（Selectable）–提供高级的大量元素选择功能。

• 排序（Sortable）–让列表可以更容易排序。

控件

• jQuery UI的所有控件都能自定义主题样式。

• 手风琴式菜单（Accordion）–如手风琴般可伸缩的控件。

• 自动完成（Autocomplete）–根据用户的输入来自动完成文字栏。

• 按钮（Button）–增强按钮外观，将单选与复选控件转变成按钮型式。

• 日期选择器（Datepicker）–高级的日期选择工具。

• 对话框（Dialog） –在页面最上层显示对话框。

• 菜单（Menu） - 显示多层次结构式的菜单。

• 进度条（Progressbar） –动态与静态的进度指示条。

• 滑动条（Slider）–完全可以自定义的滑动条与各种功能。

• 微调选择器（Spinner） - 上下控制的数字微调输入栏。

• 页签（Tabs）–页签切换控件，可以内嵌或动态加载内容。

• 工具提示（Tooltip） - 弹出式提示框。

效果

• 颜色动画（Color Animation）–产生颜色转变的动画效果。

• 切换Class、新增Class、移除Class、开关Class –让页面上元素样式转变时有动画效果。

• 效果（Effects）–各种效果（显示、下拉、爆炸、淡入等等）。

• 切换（Toggle）–切换效果开关。

• 隐藏、显示 - 使用上述的效果。

工具

位置（Position） –根据另一个元素来设置目标元素的位置（对齐）。

本jQuery UI教程手册涵盖的内容

本jQuery UI教程手册涵盖所有jQuery UI初级到高级知识，包含了jQuery UI入门、jQuery UI主、jQuery UI部件库等知识。

提示：本教程的每一章都包含了很多jQuery UI实例，您可以直接点击 "运行实例" 按钮在线查看结果或者直接使用在线编辑器进行测试。这些例子将帮助您更好地理解和使用jQuery UI。

其它jQuery UI相关学习参考资源

除了本页面右侧的知识拓展，还为大家精选了以下资源

• 独孤九贱(6)_jQuery视频教程