我想要做的是以这种方式设置这个可调整大小的div元素的大小,即所有可调整大小的逻辑被触发(尤其是考虑了这个Resize选项)。
我该如何实现呢?
解决方法
没有直接的方式来触发事件,因为可调整大小的插件已经根本改变了。 It resizes as the mouse is dragged rather than syncing items up at the end.这发生在它监听内部调整大小传播事件的可调整大小的插件,这是is now fired by the _mouseDrag
handler.但它取决于变量设置的方式,所以只是射击,即使在内部也不会有帮助。
这意味着甚至超越它最多是凌乱的。我建议只要手动调整大小的resize元素直接,独立于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); } });
这只是创建可调整大小的部件正在寻找并触发它们的鼠标事件。如果你想做一些像resize这样的事情,那将是一个更简单的结局,因为我们所关心的是三角洲:
var end = $.Event("mouseup",{ pageX: newSize.width,pageY: newSize.height });
您可以在jQuery UI之后调用$ .widget()方法,然后创建.resizable()实例之前,它们都将具有resizeTo方法。那部分没有改变,只是:
$(".selector").resizable({ alsoResize: ".other-selector" });
$(".selector").resizable("resizeTo",{ height: 100,width: 200 });
这将像您立即将其拖动到该大小。当然这里有几个问题:
>“se”轴假设你想要右下角调整大小 – 我选择了这是因为它是迄今为止最常见的情况,但你可以使它成为一个参数。
>我们正在内部事件挂钩,但我有意使用尽可能少的内部实现细节,以便今后不太可能中断。
>在将来的jQuery UI版本中绝对可以打破,我只是尽量减少这种机会。
You can play with it in action with a fiddle here和the resizeBy
version here。
原来的答案:
你可以这样做:
$(".selector").trigger("resize");