如何以編程方式觸發jquery可調整大小的大小？

Question

我有一個div元素，使jquery Resizable。它也有Resize選項集，所以其他元素同時調整大小。

我想要做的是以這種方式編程設置此可調整大小的div元素的大小，以便觸發所有可調整大小的邏輯（尤其是這也考慮到了這個也是Resize選項）。

我該如何做到這一點？

Answer 1

更新：它看起來像jQuery UI的內部發生了巨大的變化，因爲我回答了這個問題，並且解僱了這個事件不再有效。

由於可調整大小的插件已經根本改變，沒有直接的方法來觸發事件了。 It resizes as the mouse is dragged rather than syncing items up at the end。這發生在它偵聽內部resize傳播事件的可調整大小的插件is now fired by the _mouseDrag handler。但它取決於沿途設置的變量，因此即使在內部開火也無濟於事。

這意味着即使壓倒一切也是凌亂。如果可能的話，我建議直接手動調整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中突破，我只試圖儘量減少這種可能性。

You can play with it in action with a fiddle here and the resizeBy version here。

---

原來的答覆：

你可以這樣做：

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

alsoResize內部鑽機一下處理器的resize事件，所以你只需要調用一個:)

Answer 2

$(".yourWindow").each(function(e) { 
    $(this).height($(this).find(".yourContent").height()); 
}); 

而且與寬度相同。

Answer 3

我需要相同的東西進行測試。 Similarquestions只有一個有希望的答案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'); 

當然這個代碼是脆，可能會破壞時widget實現改變。

Answer 4

您可以通過編程方式觸發橫條。例如，觸發東西resize事件：

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。

Answer 5

哈克聲明（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); 

注：

這可能與顯示特效工作（如fadeIn,slideDown等）爲「縮放工具」代碼執行對話框被完全呈現之前。