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) のサイズ変更のアスペクト比を更新する場合。

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 に答える