如何在不破坏儿童可调整大小的情况下销毁可调整大小的jquery?

时间:2012-05-05 13:36:26

标签: jquery user-interface destroy resizable

我有一个可调整大小的父div(仅限宽度) - 在这个div中我有许多其他div也可以调整大小(仅限高度)。

有时我想要禁用或销毁父宽度调整大小但保持内部高度调整大小。

当我拨打$("#idTopDiv").resizable("destroy");时,这也会破坏所有子div上的可调整大小。

典型布局是: -

<div id=idDivTop> <!-- Resizable width -->
    <div id=idInnerOne>
    </div>

    <div id=idInnerTwo> <!-- Resizable height -->
    <div>
</div>

欣赏任何想法。

1 个答案:

答案 0 :(得分:6)

我认为这是因为resizable的破坏会删除ui元素内部的所有resize handels,这恰好包含了内部resizable的resize句柄。因此内部可调整大小实际上并没有被破坏,他们只是搞砸了。

您可以看到可调整大小的源代码here;它发生在第199行,其中显示.find('.ui-resizable-handle').remove();

要解决此问题,您还需要在内部resizable上调用destroy方法,然后重新创建它们。 (jsfiddle

$("div").resizable();

// Destroy all three resizables
$("div").resizable("destroy");

// Recreate the inner resizables
$("#idInnerOne, #idInnerTwo").resizable();

你需要这样做来删除在创建时可设置大小的绑定和数据,否则当你尝试重新创建它时它会认为它已经创建了它并且它什么都不做。

您也可以考虑禁用外部可调整大小而不是销毁它,但是has its own issues