如何以编程方式触发jquery可调整大小？
如何以编程方式触发jquery可调整大小？
提问于 2010-03-26 21:26:48
我有一个div元素，它是jquery可调整大小的。它设置了alsoResize选项，因此其他元素可以同时调整大小。
我想做的是，以编程的方式设置这个可调整大小的div元素的大小，这样所有可调整大小的逻辑都会被触发(特别是这个alsoResize选项被考虑在内)。
我怎样才能做到这一点呢？
回答 3
Stack Overflow用户
发布于 2014-11-12 23:20:08
您可以通过编程方式触发条形图。例如，要触发东西调整大小事件：
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为目标。
Stack Overflow用户
发布于 2014-02-20 00:32:41
对于测试，我也需要同样的东西。Similar questions只有一个很有希望的答案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');当然，这段代码很脆弱，当小部件实现发生变化时可能会崩溃。
Stack Overflow用户
发布于 2013-04-25 21:18:59
$(".yourWindow").each(function(e) {
$(this).height($(this).find(".yourContent").height());
});宽度也一样。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/2523522
复制相关文章
相似问题