javascript - jQuery resizable() 动态 maxWidth 选项

Question

我有 3 个可调整大小的列。当一个变宽时，它左边的那个变小。基本上只有 2 个 handle 。左上校和中上校。因此，当 Mid col 变薄时，Right col 会相应扩展。它们三个都包含在一个 900px 的父 div 中，因此所有三个的总和始终为 900。它们的最大和最小宽度是静态设置的。

我的问题是，如果您使用左 handle 并将其一直向右移动，您仍然可以使用右 handle 并将中间列扩展到父 div 的边缘之外。

我想到了一种方法来解决这个问题，方法是编写一个函数来检查列的宽度，然后从父 div 宽度中减去左右列，我将其称为 mWid。这给我留下了我想设置为 Mid col 的 maxWidth 的数字。

现在的问题是 mWid 没有为此处“maxWidth: mWid”更新

右 handle 的函数如下所示:

$(function() {
    $("#midResizable").resizable({
        handles: 'e',
        containment: '#container',
        maxWidth: mWid, // gets set once, but doesn't update! WHY?
        minWidth: 195,
        resize: function(event, ui) {
            contWidth = $('#container').width()
            newWidth = $(this).width()
            leftWidth = $('#leftResizable').width()
            rightWidth = $('#rightResizable').width()
            $("#rightResizable").css("width", (contWidth-15)-(newWidth)-(leftWidth)+"px");
            checkWid()
        }
    });     
});     

function checkWid() {
    rightWidth = $('#rightResizable').width()
    leftWidth = $('#leftResizable').width()
    contWidth = $('#container').width()
    mWid = (contWidth-15)-(rightWidth)-(leftWidth)
}

Answer 1

检查一下:http://jqueryui.com/demos/resizable/#option-maxWidth

看起来像 maxWidth: mWid，只在初始化时被调用。

之后需要显式设置 maxWidth，如下所示:

$( "#midResizable" ).resizable( "option", "maxWidth", mWid );