jQuery UI 教程

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

jQuery UI 教程

jQuery UI 是建立在 jQuery JavaScript 库上的一组用户界面交互、特效、小部件及主题。无论您是创建高度交互的 Web 应用程序还是仅仅向窗体控件添加一个日期选择器，jQuery UI 都是一个完美的选择。

jQuery UI 包含了许多维持状态的小部件（Widget），因此，它与典型的 jQuery 插件使用模式略有不同。所有的 jQuery UI 小部件（Widget）使用相同的模式，所以，只要您学会使用其中一个，您就知道如何使用其他的小部件（Widget）。

从实例开始

为了更好地体验什么是 jQuery UI，请查看 jQuery UI 实例。

在实例演示部分，导航列出了 jQuery UI 提供的所有交互部件和小部件。选择一个交互部件或小部件，您将看到特定插件的一些演示配置。在每个演示中，您可以查看源代码，更改主题，且 URL 可以被添加书签。例如，您可以查看 折叠面板部件填充空间 实例演示页面。

示例

<div id="draggable" 
    style = "width: 150px; height: 150px; padding: 0.5em;" 
    class="ui-widget-content">
    <p>Drag me around</p>
</div>

<script type="text/javascript">
    $(function(){
        $("#draggable").draggable();
    });
</script>

这段代码会让用户的鼠标光标可以拖曳ID为“draggable”的DIV元素。

功能

交互

• 拖曳（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） –根据另一个元素来设置目标元素的位置（对齐）。