web-dev-qa-db-ja.com

プログラムでjqueryのサイズ変更可能なサイズ変更をトリガーする方法は？

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

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

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

jqueryjquery-uijquery-ui-resizable
20
Dawid Ohia

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

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

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

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

_$.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 });
_

JQueryUIの後および$.widget()インスタンスを作成する前に.resizable()メソッドを呼び出すと、すべてにresizeToメソッドがあります。その部分は変わりません、それはただ：

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

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

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

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

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

ここでフィドルを使って実際に遊ぶことができます および ここでresizeByバージョン 。

元の回答：

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

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

alsoResizeは内部でハンドラーをresizeイベントにリグアップするので、それを呼び出す必要があります:)

25
Nick Craver

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

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 }));

私は東のバーハンドルで左に1px、続いて右に1pxの動きをしています。フルサイズを実行するには、東と南のサイズ変更バーがある場合は.ui-resizable-handle.ui-resizable-seをターゲットにできます。

5
Mikaël Mayer

テストにも同じものが必要でした。 類似質問 有望な答えは1つだけです https://stackoverflow.com/a/17099382/1235394 ですが、追加の設定が必要なので、私は私自身の解決策で終わりました。

サイズ変更可能な右エッジの要素があります

$nameHeader.resizable({handles: 'e', ... });

そして、すべての要素のサイズを適切に変更するために、テスト中にすべてのコールバックをトリガーする必要がありました。テストコードの重要な部分：

var $nameHeader = $list.find('.list-header .name'),
    $nameCell = $list.find('.list-body .name');
ok($nameHeader.hasClass('ui-resizable'), 'Name header should be resizable');
equal($nameCell.outerWidth(), 300, 'Initial width of Name column');

// retrieve instance of resizable widget
var instance = $nameHeader.data('ui-resizable'),
    position = $nameHeader.position(),
    width = $nameHeader.outerWidth();
ok(instance, 'Instance of resizable widget should exist');

// mouseover initializes instance.axis to 'e'
instance._handles.trigger('mouseover');
// start dragging, fires `start` callback
instance._mouseStart({pageX: position.left + width, pageY: position.top});
// drag 50px to the right, fires `resize` callback
instance._mouseDrag({pageX: position.left + width + 50, pageY: position.top});
// stop dragging, fires `stop` callback
instance._mouseStop({pageX: position.left + width + 50, pageY: position.top});

// ensure width of linked element is changed after resizing
equal($nameCell.outerWidth(), 350, 'Name column width should change');

もちろん、このコードは脆弱であり、ウィジェットの実装が変更されると壊れることがあります。

1
Victor

ハック免責事項（jQuery 1.12.4でテスト済み）:

これは基本的に、ダイアログが開かれるのを待ってから、_1px_（resize()イベントを強制します）だけインクリメントし、次に_1px_（originalサイズを取り戻す）だけデクリメントします。 ）

ダイアログopenイベントハンドラーでこれを言うだけです：

_ $(this)
.dialog("option","width",$(this).dialog("option","width")+1)
.dialog("option","width",$(this).dialog("option","width")-1);
_

注：

ダイアログが完全にレンダリングされる前に「resizer」コードが実行されるため、これはショーエフェクト（_fadeIn,slideDown_など）では機能しない場合があります。

0
Sajjan Sarkar