使用鼠标改变元素的尺寸。
依赖：
注释：jQuery UI 可调整尺寸（Resizable）插件让被选元素可调整尺寸（意味着它们有可拖拽的调整大小的手柄）。您可以指定一个或多个手柄，也可以指定宽度和高度的最小值也最大值。
附加说明：该部件要求一些功能性的 CSS，否则将无法工作。如果您创建了一个自定义的主题，请使用小部件指定的 CSS 文件作为起点。
快速导航
选项
- alsoResize：一个或多个通过 resizable 元素进行同步调整尺寸的元素。
- animate：调整尺寸后动态变化到最终尺寸。
- animateDuration：当使用
animate选项时，动画持续的时间。 - animateEasing：当使用
animate选项时要使用的 Easings。 - aspectRatio：元素是否应该被限制在一个特定的长宽比。
- autoHide：当用户鼠标没有悬浮在元素上时是否隐藏手柄。
- cancel：防止从指定的元素上开始调整尺寸。
- containment：约束在指定元素或区域的边界内调整尺寸。
- delay：鼠标按下后直到调整尺寸开始为止的时间，以毫秒计。如果指定了该选项，调整只有在鼠标移动超过时间后才开始。该选项可以防止点击在某个元素上时不必要的调整尺寸。
- disabled：如果设置为
true，则禁用该 resizable。 - distance：鼠标按下后调整尺寸开始前必须移动的距离，以像素计。如果指定了该选项，调整只有在鼠标移动超过距离后才开始。该选项可以防止点击在某个元素上时不必要的调整尺寸。
- ghost：如果设置为
true，则为调整尺寸显示一个半透明的辅助元素。 - grid：把可调整尺寸元素对齐到网格，每个 x 和 y 像素。数组形式必须是
[ x, y ]。 - handles：可用于调整尺寸的处理程序。
- helper：一个将被添加到代理元素的 class 名称，用于描绘调整手柄拖拽过程中调整的轮廓。一旦调整完成，原来的元素则被重新定义尺寸。
- maxHeight：resizable 允许被调整到的最大高度。
- maxWidth：resizable 允许被调整到的最大宽度。
- minHeight：resizable 允许被调整到的最小高度。
- minWidth：resizable 允许被调整到的最小宽度。
方法
- destroy()：完全移除 resizable 功能。这会把元素返回到它的预初始化状态。
- disable()：禁用 resizable。
- enable()：启用 resizable。
- option()：获取当前与指定的
optionName关联的值。 - widget()：返回一个包含 resizable 元素的
jQuery对象。
事件
- create( event, ui )：当 resizable 被创建时触发。
- resize( event, ui )：在调整尺寸期间当调整手柄拖拽时触发。
- start( event, ui )：当调整尺寸操作开始时触发。
- stop( event, ui )：当调整尺寸操作停止时触发。
事件参数ui类型：Object
- element：类型：jQuery
描述：jQuery 对象，表示要被调整尺寸的元素。 - helper：类型：jQuery
描述：jQuery 对象，表示被调整尺寸的助手（helper）。 - originalElement：类型：jQuery
描述：jQuery 对象，表示被包裹之前的原始元素。 - originalPosition：类型：Object
描述：resizable 调整前的位置，表示为{ top, left }。 - originalSize：类型：Object
描述：resizable 调整前的尺寸，表示为{ width, height }。 - position：类型：Object
描述：当前位置，表示为{ top, left }。 - size：类型：Object
描述：当前尺寸，表示为{ width, height }。
实例
一个简单的 jQuery UI 可调整尺寸小部件（Resizable Widget）。
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>可调整尺寸小部件（Resizable Widget）演示</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <style> #resizable { width: 100px; height: 100px; background: #ccc; } </style> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> </head> <body> <div id="resizable"></div> <script> $( "#resizable" ).resizable(); </script> </body> </html>