21

jquery Resizable になっている div 要素があります。また、Resize オプションが設定されているため、他の要素も同時にサイズ変更されます。

私がやりたいことは、この Resizable div 要素のサイズを、すべての Resizable ロジックがトリガーされるようにプログラムで設定することです (特に、この alsoResize オプションが考慮されます)。

どうすればそれを達成できますか？

4

5 に答える 5

28

更新:私がこれに答えてから、jQuery UI の内部が劇的に変化したようで、イベントの発生が機能しなくなりました。

サイズ変更可能なプラグインが根本的に変更されたため、イベントを直接発生させる方法はもうありません。最後にアイテムを同期するのではなく、マウスをドラッグするとサイズが変更されます。これは、ハンドラーによって起動されるサイズ変更可能なプラグインの内部resize伝播イベントをリッスンすることによって発生します。しかし、それは途中で設定された変数に依存するため、内部的にさえそれを発射するだけでは役に立ちません。_mouseDrag

これは、それをオーバーライドすることさえ、せいぜい面倒であることを意味します。alsoResize可能であれば、UI ウィジェットとはまったく関係なく、要素のサイズを直接手動で変更することをお勧めします。

しかし、楽しみのために、そうではないとしましょう。問題は、プラグインの内部で、以前と現在のマウスの位置に関連するさまざまなプロパティを設定して、サイズを変更する量を知ることです。これを悪用して、次のようにメソッドをウィジェットに追加できます。

$.widget("ui.resizable", $.ui.resizable, {
    resizeTo: function(newSize) {
        var start = new $.Event("mousedown", { pageX: 0, pageY: 0 });
        this._mouseStart(start);
        this.axis = 'se';
        var end = new $.Event("mouseup", {
            pageX: newSize.width - this.originalSize.width,
            pageY: newSize.height - this.originalSize.height
        });
        this._mouseDrag(end);
        this._mouseStop(end);
    }
});

resizableこれは、ウィジェットが探しているマウス イベントを作成し、それらを起動するだけです。resizeBy私たちが気にするのはデルタだけなので、次のようなことをしたい場合は、さらに簡単な終わりになります。

var end = $.Event("mouseup", { pageX: newSize.width, pageY: newSize.height });

$.widget()jQuery UI の後、インスタンスを作成する前にメソッドを呼び出すと、.resizable()すべてのインスタンスにresizeToメソッドが含まれます。その部分は変わらず、次のとおりです。

$(".selector").resizable({ alsoResize: ".other-selector" });

次にサイズを変更するには、次resizeToのように新しいメソッドを呼び出します。

$(".selector").resizable("resizeTo", { height: 100, width: 200 });

これは、そのサイズに即座にドラッグしたかのように機能します。もちろん、ここにはいくつかの落とし穴があります。

  • "se"軸は、右下でサイズ変更することを前提としています。これは最も一般的なシナリオであるため、これを選択しましたが、パラメーターにすることもできます。
  • 内部イベントに少しフックしていますが、意図的に内部実装の詳細をできるだけ少なくして、これが将来壊れる可能性を低くしています。
  • jQuery UI の将来のバージョンでは絶対に壊れる可能性があります。私はその可能性を最小限に抑えようとしました。

ここでフィドルを使用し、resizeByここでバージョンを使用して実際にプレイできます。

元の答え:

あなたはこれを行うことができます：

$(".selector").trigger("resize");

alsoResize内部的にイベントへのハンドラーを装備するresizeので、それを呼び出すだけです:)

于 2010-03-26T13:58:58.040 に答える
5

バーはプログラムでトリガーできます。たとえば、東西のサイズ変更イベントをトリガーするには、次のようにします。

var elem =... // Your ui-resizable element
var eastbar = elem.find(".ui-resizable-handle.ui-resizable-e").first();
var pageX = eastbar.offset().left;
var pageY = eastbar.offset().top;

(eastbar.trigger("mouseover")
        .trigger({ type: "mousedown", which: 1, pageX: pageX, pageY: pageY })
        .trigger({ type: "mousemove", which: 1, pageX: pageX - 1, pageY: pageY })
        .trigger({ type: "mousemove", which: 1, pageX: pageX, pageY: pageY })
        .trigger({ type: "mouseup", which: 1, pageX: pageX, pageY: pageY }));

東のバー ハンドルで左に 1 ピクセル、次に右に 1 ピクセル移動します。フルサイズを実行するには、.ui-resizable-handle.ui-resizable-se東と南にサイズ変更バーがある場合にターゲットを設定できます。

于 2014-11-12T15:20:08.123 に答える