Question

我无法找到在API文档中达到或超过min / max限制时发现我的事件。

是否可以选择这样做，而不是自己检查限制？

Answer 1

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

＆＃13;

$(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!");
        }
    });
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

^{无论如何，选择这个选项会很高兴：我创建了Feature Request @ jQuery ui。}

jQuery UI可调整大小 - 超出minWidth，maxWidth，minHeight，maxHeight的事件触发器

1 个答案: