jQuery UI 可调整大小对齐大小答案

【问题标题】：jQuery UI resizable snap to sizejQuery UI 可调整大小对齐大小
【发布时间】：2013-02-27 20:27:45
【问题描述】：

我有一个可调整大小的左侧导航。默认宽度是 200，我希望调整器对齐到该宽度。目前我有这个运行良好的 if 子句，但我不知道如何以编程方式捕捉到该宽度。

resize: function (event, ui) {
    if(Math.abs(200 - ui.size.width) <= 20){
        // snap to 200 width
    }
}

如果有人可以在这里帮助我会很棒:)

【问题讨论】：

标签： jquery jquery-ui resizable

【解决方案1】：

好的，它开始工作了。只需将元素的宽度设置为 200。它的容差为 15px，因此如果元素介于 185 和 215px 之间，它将对齐到 200px。

$("#left").resizable({
minWidth: 60,
handles: "e",
resize: function (event, ui) {
    if(Math.abs(200 - ui.size.width) <= 15){
        $("#left").css("width", 200);
    }
}

【讨论】：

@CyrilALFARO：不，您将调整大小锁定为 20-200。
很棒的代码！ Jquery UI 的新手，不知道ui.size.width 是这样工作的！今天学到了一些东西！

【解决方案2】：

$(ui).width(200); 这样的东西怎么样？请注意，我不知道您的代码中的 ui 是什么，因此您可能需要调整 jQueryselector。

【讨论】：

没问题，但我认为看看第三个答案可能值得。

【解决方案3】：

在那里：http://jqueryui.com/resizable/#max-min 你可以使用这个：

$(function() {
    $( "#left" ).resizable({
      maxWidth: 200,
      minWidth: 20
    });
});

【讨论】：

这将使它甚至无法调整大小。
但这是调整大小的更好方法，别忘了放#left ;)
使用该代码我什至无法调整导航的大小。它应该调整大小并对齐到宽度 200
您想反转调整大小？如果没有，只需将 minWidth 设置为 20
这实际上不是我想要达到的目的。我想要一个正常的调整大小，并快速调整到宽度：200。您的代码将 snap 限制在 20-200 之间。

【解决方案4】：

我会检查一个范围内的宽度，以便从任一侧发生“捕捉”。

resize: function (event, ui) {
    if(ui.size.width >= 180 && ui.size.width <= 220){
        // snap to 200 width
    }
}

【讨论】：