jQuery UI 能做的事可谓是包罗万象。实际上，jQuery UI 在某种意义上并不是插件，而是一个完整的插件库。 jQuery UI 中主要包含以下几个功能: - Effect（效果） - Interactions（交互组件） - Widget（部件） - 此外，还为jQuery和核心动画提供了很多高级效果。 ## Effect（效果） ### animate() 方法 文档在引入核心效果文件的情况下，扩展的 `.animate()` 方法可接受另外一些样式属性。 扩展后 animate 方法接受以下属性: - backgroundColor - borderBottomColor - borderLeftColor - borderRightColor - borderTopColor - Color - outlineColor ```javascript var state = true; $( "#button" ).click(function() { if ( state ) { $( "#effect" ).animate({ backgroundColor: "#aa0000", color: "#fff", width: 500 }, 1000 ); } else { $( "#effect" ).animate({ backgroundColor: "#fff", color: "#000", width: 240 }, 1000 ); } state = !state; }); ``` ### effect() 方法 ```javascript function runEffect() { var selectedEffect = $( "#effectTypes" ).val(); var options = {}; if ( selectedEffect === "scale" ) { options = { percent: 0 }; } else if ( selectedEffect === "transfer" ) { options = { to: "#button", className: "ui-effects-transfer" }; } else if ( selectedEffect === "size" ) { options = { to: { width: 200, height: 60 } }; } $( "#effect" ).effect( selectedEffect, options, 500, callback ); }; function callback() { setTimeout(function() { $( "#effect" ).removeAttr( "style" ).hide().fadeIn(); }, 1000 ); }; $( "#button" ).click(function() { runEffect(); return false; }); ``` ## Interactions（交互组件） ### Draggable Widget Draggable Widget 允许使用鼠标移动元素。 ```javascript

Drag me around

``` draggable()的事件: - start：当拖动开始时触发。 - drag：当鼠标在拖动过程中移动时触发。 - stop：当拖动停止时触发。 ```javascript

Drag me to trigger the chain of events.

``` draggable() 的选项: - axis：设置只能在x轴或y轴方向拖动。 - containment：设置在某个区域内拖动。 - cursor：设置拖动时鼠标的样式。 - cursorAt：设置鼠标的相对定位。 - handle：设置指定元素触发鼠标按下事件才能拖动。 - cancel：防止在指定元素上拖动。 - revert：当停止拖动时，元素是否被重置到初始位置。 - snap：拖动元素是否吸附在其他元素。 - snapMode：设置拖动元素在指定元素的哪个边缘。 - snap设置为true时该选项有效。 - 可选值 - inner|outer|both ```javascript

I can be dragged only vertically

I can be dragged only horizontally

I will always stick to the center (relative to the mouse)

I can be dragged only by this handle

You can drag me around…

…but you can't drag me by this handle.

Revert the original

Default (snap: true), snaps to all other draggable elements

I only snap to the outer edges of the big box

I'm contained within the box

``` ### Droppable Widget Droppable Widget 为可拖拽小部件创建目标。 droppable() 的事件: - drop：该事件在被允许拖放的元素覆盖时触发。 droppable() 的选项: - accept：指定可拖动的元素可被接受。 - activeClass：被允许拖放的元素覆盖时，改变样式。 - hoverClass：被允许拖放的元素悬停时，改变样式。 ```javascript

I'm draggable but can't be dropped

Drag me to my target

Drop here

``` ### Resizeable Widget Resizeable Widget 使用鼠标改变元素的尺寸。 ```javascript

Resizable

``` ### Sortable Widget Sortable Widget 使用鼠标调整列表中或者网格中元素的排序。 ```javascript ``` ## Widget（部件） ### Accordion Widget Accordion Widget 把一对标题和内容面板转换成折叠面板。 ```javascript

Section 1

Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.

Section 2

Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.

Section 3

Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.

Section 4

Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est.

Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

``` > **值得注意的是:** > > - 使用`
`元素作为折叠面板的容器。 > - 使用`

`元素作为折叠面板的标题。 > - 使用`
`元素作为折叠面板的内容。 ### Autocomplete Widget Autocomplete Widget 自动完成功能根据用户输入值进行搜索和过滤，让用户快速找到并从预设值列表中选择。 ```javascript
``` ### Datepicker Widget Datepicker Widget 从弹出框或在线日历选择一个日期。 ```javascript

Date:

``` ### Dialog Widget Dialog Widget 在一个交互覆盖层中打开内容。 - 基本对话框示例 ```javascript

This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.

``` - 模式对话框示例 ```javascript

Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.

``` - 操作对话框示例 ```javascript

This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.

``` ### Tabs Widget Tabs Widget 是一种多面板的单内容区，每个面板与列表中的标题相关。 ```javascript

Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.

Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.

Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.

Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.

``` ### Tooltip Widget Tooltip Widget 可自定义的、可主题化的工具提示框，替代原生的工具提示框。 ```javascript

``` ### Menu Widget Menu Widget 带有鼠标和键盘交互的用于导航的可主题化菜单。 - 禁用页面中默认的鼠标右键功能。 ```javascript $(document).contextmenu(function (event) { event.preventDefault(); }); ``` - 自定义鼠标右键菜单。 ```javascript $(document).mousedown(function (event) { if(event.button == 2){ $( "#menu").removeAttr("style").menu().position({ my: "left top", at: "left top", of : event, collision: "fit" }); } }); ```