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

jQuery UI resizable - event trigger on minWidth, maxWidth, minHeight, maxHeight exceeded

本文关键字:minHeight maxWidth maxHeight 触发器 事件 minWidth 可调整 UI 超过 jQuery      更新时间:2023-09-26

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

有没有一个选项可以做到这一点,而不需要自己检查限制?

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


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


不管怎样,如果有这个选项会很好:我已经创建了一个FeatureRequest@jQueryui