Question

我尝试动态更改maxWidth和minWidth。当文档准备好并调整窗口大小时，将计算这两个值。

例如maxWidth的变量等于80% - 12px。这个计算很好。

问题是resizable没有更新它的选项 - 它使用了在开头设置的maxWidth值。

如何更新resizable的选项（新的maxWidth）？

非常感谢！：）

编辑：因为我被要求在这里发布一些代码：

var maxWidth = 300;
var minWidth = 50;

function calc() {
    var maxWidth = ($( "#resize" ).parent().width()*0.8)-12;
    var minWidth = ($( "#resize" ).parent().width()*0.2)-12;
  $("p").text(maxWidth + " - " + minWidth);
}

$( window ).resize(function() {
  calc();
});

$( document ).ready(function() {
  calc();
})

$(function() {
  $("#resize").resizable({
    maxHeight: 150,
    maxWidth: maxWidth,
    minHeight: 150,
    minWidth: minWidth,
    helper: "ui-resizable-helper",
    grid: [10, 10],
  });
});

Answer 1

修改您的calc()功能

function calc() {
    var maxWidth = ($( "#resize" ).parent().width()*0.8)-12;
    var minWidth = ($( "#resize" ).parent().width()*0.2)-12;
    $("p").text(maxWidth + " - " + minWidth);
    $("#resize").resizable('option', 'maxWidth', maxWidth);
    $("#resize").resizable('option', 'minWidth', minWidth);  
}

请参阅此处的文档：http://api.jqueryui.com/resizable/#method-option

jQuery可调整大小 - 更改参数值

1 个答案: