javascript - jQuery UI 可调整大小 - 超过 minWidth、maxWidth、minHeight、maxHeight 时触发事件

Question

当达到或超过 API 文档中的 min/max 限制时，我找不到通知我的事件。

是否可以选择在不自行检查限制的情况下执行此操作？

Answer 1

据我所知，您唯一的选择是手动检查是否达到了min/max限制。您可以使用传递给 resize event 的 ui 对象的 size 属性回调以访问当前宽度和高度，以及 option访问 min 和 max 值的方法。

---

$(function () {
    $("#resizable").resizable({
        minWidth: 50,
        minHeight: 50,
        maxWidth: 250,
        maxHeight: 200,
        resize: function (event, ui) {
            var $elm = ui.element;
            if (ui.size.width <= $elm.resizable("option", "minWidth"))
               console.log("Reached Min Width!");

            if (ui.size.height <= $elm.resizable("option", "minHeight"))
               console.log("Reached Min Height!");

            if (ui.size.width >= $elm.resizable("option", "maxWidth"))
               console.log("Reached Max Width!");

            if (ui.size.height >= $elm.resizable("option", "maxHeight"))
               console.log("Reached Max Height!");
        }
    });
});

#resizable {
    width:100px;
    background:dogerblue;
}

<link href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/css/jquery.ui.resizable.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/css/jquery.ui.theme.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<div id="resizable" class="ui-widget-content">
     <h3 class="ui-widget-header">Resizable</h3>
</div>

---

^{无论如何，如果有这个选项就好了:我创建了一个 Feature Request @ jQuery ui .}