Question

我正在使用jQueryUI可调整大小的小部件，并在页面上有一堆可调整大小的框。加载文档时，我会初始化窗口小部件，如下所示：

$('.ui-draggable').resizable({
    minHeight: 10, // 10 is actually the default
    minWidth: 10, // 10 is actually the default
    resize: function() {
        showProperties(this);
    },
});

但是，在某些时候我只想要其中一些元素来改变调整大小选项。我想要做的是：

if (type == 'sometype')
{
    console.log($('#'+elementID).resizable('option', 'handles'));
    $('#'+elementID).resizable('option', 'handles', 'e,w');
    console.log($('#'+elementID).resizable('option', 'handles'));
}

这确实输出了：

e,s,se
e,w

在控制台中，所以事件被触发并且选择器是正确的，但代码实际上不起作用：事实上，句柄保持不变，即e，s，se。

这是因为我使用的是与原始init不同的选择器吗？如果是这样，我如何仅在原始可调整大小的元素的子集上更改调整大小选项？如果没有，那可能是什么问题？

Answer 1

Handles实际上是添加到应用了resizable的元素的div。似乎更改选项不会刷新这些句柄。也许有一种方法可以应用特定子集和刷新的更改，但我不知道如何。但一个快速的解决方法是隐藏您不想要的句柄，而不是更改handle选项。您必须将handle选项设置为您需要的所有句柄，然后隐藏那些不需要的句柄。像这样删除se handle例如：

$('#'+elementID).find('.ui-resizable-se').hide();

在jQuery Resize中更改特定元素大小调整选项

1 个答案: