Не удается применить JqueryUI Resizable AspectRatio после инициализации? - PullRequest
Новая
       55

Не удается применить JqueryUI Resizable AspectRatio после инициализации?

10 голосов
/ 15 ноября 2011

Я пытался динамически включать / выключать пропорции в 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 ]

10 голосов
/ 18 декабря 2014

Это сработало для меня без исправлений 

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

Эта часть .data('uiResizable')._aspectRatio = false; приходит на помощь

2 голосов
/ 25 января 2013

Я понимаю, что это старый пост, но если кому-то все еще нужен ответ, вы можете сделать это так: 

$('#aspect_check').click( function() {
    var ischecked = $('#aspect_check').prop('checked');
    if (ischecked) {
        $( "#resizable" ).resizable({aspectRatio : .75});
    } else {
        $( "#resizable" ).resizable();
    }
});
2 голосов
/ 15 ноября 2011

Я не знаю, сработает ли это или что произойдет. Но вы можете попробовать что-то вроде этого. 

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

1 голос
/ 09 февраля 2014

Другим решением является сохранение параметров изменяемого размера в переменной, а также уничтожение и повторная инициализация виджета с обновленными параметрами: 

var options = $("#resizable").resizable("options");
if (ischecked) {
    options.aspectRatio = .75;
} else {
    options.aspectRatio = false;
}
$("#resizable").resizable("destroy");
$("#resizable").resizable(options);
...