10

我试图在可调整大小的 JQueryUI 中动态打开/关闭纵横比，但是即使将选项设置为 false，它也会保持纵横比。以下是我目前正在使用的代码：

$('#aspect_check').click( function() {
    var ischecked = $('#aspect_check').prop('checked');
    if (ischecked) {
    $( "#resizable" ).resizable( "option", "aspectRatio", .75);
    } else {
        $( "#resizable" ).resizable( "option", "aspectRatio", false );
    }
});

我发现了一个 3 年前的错误报告，尽管它被标记为关键，但它看起来仍然没有得到修复。http://bugs.jqueryui.com/ticket/4186

解决方法不适用于最新版本。有任何想法吗？

编辑：在经历了很多错误报告之后，这里有一个解决方法：

$(function() {
$.extend($.ui.resizable.prototype, (function (orig) {
    return {
        _mouseStart: function (event) {
            this._aspectRatio = !!(this.options.aspectRatio);
            return(orig.call(this, event));
        }
    };
})($.ui.resizable.prototype["_mouseStart"]));
});

将其粘贴到您的 javascript 脚本部分。希望它可以帮助有类似问题的人！

4

5 回答 5

12

这对我有用，无需修补

$('#resizable')
  .resizable('option', 'aspectRatio', false)
  .data('uiResizable')._aspectRatio = false;

这部分.data('uiResizable')._aspectRatio = false;来救援

于 2014-12-18T10:39:26.533 回答
3

我不知道它是否会起作用或会发生什么。但是你可以尝试这样的事情。

$(function(){
    var settings = {
        aspectRatio : .75  
    };
    $("#tadaa").resizable(settings);

    $("input").change(function(){
        if($(this).is(":checked"))
        {

            $("#tadaa").resizable( "destroy" );
            $("#tadaa").resizable();
        }
        else  
        {
            $("#tadaa").resizable( "destroy" );
            $("#tadaa").resizable(settings);
        }   
    });
});

现场演示，目前只有底部的可拖动元素样式化使用，水平div没有样式化。

http://jsfiddle.net/t6xFN/1/

于 2011-11-15T08:54:15.317 回答
2

我意识到这是一篇旧帖子，但如果有人仍然需要答案，你可以这样做：

$('#aspect_check').click( function() {
    var ischecked = $('#aspect_check').prop('checked');
    if (ischecked) {
        $( "#resizable" ).resizable({aspectRatio : .75});
    } else {
        $( "#resizable" ).resizable();
    }
});
于 2013-01-25T01:09:16.450 回答
1

另一种解决方案是将可调整大小的选项保存在变量中，并使用更新的选项销毁并重新初始化小部件：

var options = $("#resizable").resizable("options");
if (ischecked) {
    options.aspectRatio = .75;
} else {
    options.aspectRatio = false;
}
$("#resizable").resizable("destroy");
$("#resizable").resizable(options);
于 2014-02-09T12:52:36.703 回答
0

您可以更改aspectRatio初始化后如下所示。例如，如果您想更新true角（ne, se, sw, nw）调整大小和false边（n, e, s, w）调整大小的 aspectRation。

start: function (ui, event) {
            let $this = $(this),
                handle = $this.data('ui-resizable').axis;
            $this.data('uiResizable')._aspectRatio = ($.inArray(handle, ['n', 'e', 's', 'w']) === -1);
        },
于 2021-04-21T05:56:01.777 回答