如何在jQuery UI中停止元素的resizable属性

Question

我正在使用jQuery UI库为DOM元素提供一些UI功能。

我有一个可以在客户端选择自定义维度选项时调整大小的div，但我还有另一种模式，可以使用固定维度调整div的大小，并且客户端无法调整div的大小。

我的“自定义维度”代码与此类似：

$("#element").resizable ({
    aspectRatio: 4/3,
    minWidth: 320,
    minHeight: 240,
    maxWidth: 640,
    maxHeight: 480
});

但现在我需要停止调整大小的事件。我怎么能这样做？

感谢。

Answer 1

停用

该插件提供了一个“禁用”方法，您可以这样调用：

$("#element").resizable('disable');

问题是它向可调整大小的元素添加了一个“ui-state-disabled”类，使其具有视觉禁用状态。如果您不想这样，则覆盖样式或删除添加的类，如下所示：

$("#element").resizable('disable').removeClass('ui-state-disabled');

---

销毁

另一种方法是在你不希望它可以调整大小时从元素中“破坏”插件：

$("#element").resizable('destroy');

如果您想再次重新启用效果，则可以重新应用可调整大小

Answer 2

调用destroy或disable方法，例如：

$("#element").resizable('disable');

如果您使用disable，稍后可以再次使用enable，但默认操作也会使元素变暗一些您可能不需要的内容。

完全无偿的现场演示：enable/disable | destroy/recreate