03 Jquery UI Resiable 调整大小插件

Posted 2021-01-02 工作在浏览器上人-YangBobin

使用鼠标改变元素的尺寸。

一、实例

一个简单的 jQuery UI 可调整尺寸小部件（Resizable Widget）。

代码：

<div id="resizable"></div>
 
<script>
$( "#resizable" ).resizable();
</script>
  

查看演示

注释：jQuery UI 可调整尺寸（Resizable）插件让被选元素可调整尺寸（意味着它们有可拖拽的调整大小的手柄）。您可以指定一个或多个手柄，也可以指定宽度和高度的最小值也最大值。

二、快速导航

1、选项

• 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 允许被调整到的最小宽度。

2、方法

• destroy()：完全移除 resizable 功能。这会把元素返回到它的预初始化状态。
• disable()：禁用 resizable。
• enable()：启用 resizable。
• option()：获取当前与指定的 optionName 关联的值。
• widget()：返回一个包含 resizable 元素的 jQuery 对象。

3、事件

• create( event, ui )：当 resizable 被创建时触发。
• resize( event, ui )：在调整尺寸期间当调整手柄拖拽时触发。
• start( event, ui )：当调整尺寸操作开始时触发。
• stop( event, ui )：当调整尺寸操作停止时触发。

4、事件参数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 }。