javascript - jQuery resizable() 动态 maxWidth 选项

我有 3 列可调整大小。当一个变宽时，它左边的一个变小。基本上只有2个 handle 。左上列和中上列。所以当 Mid col 变细时，Right col 会相应地扩大。他们三个都包含在一个 900px 的父 div 中，所以三个的总和总是 900。他们静态设置了最大和最小宽度。

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

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

现在的问题是这里的“maxWidth:mWid”没有更新 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)
}

最佳答案

看看这个:http://jqueryui.com/demos/resizable/#option-maxWidth

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

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

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

关于javascript - jQuery resizable() 动态 maxWidth 选项，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/4688162/