我有一个div元素,这是jquery可调整大小。它还有Resize选项集,所以其他元素同时调整大小。
我想要做的是以这种方式设置这个可调整大小的div元素的大小,即所有可调整大小的逻辑被触发(尤其是考虑了这个Resize选项)。
我该如何实现呢?
解决方法
更新:看起来jQuery UI的内部结构已经发生了巨大的变化,因为我回答了这一点,并且触发事件不再起作用。
没有直接的方式来触发事件,因为可调整大小的插件已经根本改变了。 @L_403_0@.这发生在它监听内部调整大小传播事件的可调整大小的插件,这是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); } });@H_404_17@这只是创建可调整大小的部件正在寻找并触发它们的鼠标事件。如果你想做一些像resize这样的事情,那将是一个更简单的结局,因为我们所关心的是三角洲:
var end = $.Event("mouseup",{ pageX: newSize.width,pageY: newSize.height });@H_404_17@您可以在jQuery UI之后调用$ .widget()方法,然后创建.resizable()实例之前,它们都将具有resizeTo方法。那部分没有改变,只是:
$(".selector").resizable({ alsoResize: ".other-selector" });@H_404_17@$(".selector").resizable("resizeTo",{ height: 100,width: 200 });@H_404_17@这将像您立即将其拖动到该大小。当然这里有几个问题:
>“se”轴假设你想要右下角调整大小 – 我选择了这是因为它是迄今为止最常见的情况,但你可以使它成为一个参数。
>我们正在内部事件挂钩,但我有意使用尽可能少的内部实现细节,以便今后不太可能中断。
>在将来的jQuery UI版本中绝对可以打破,我只是尽量减少这种机会。You can play with it in action with a fiddle here和the
resizeBy
version here。原来的答案:
你可以这样做:
$(".selector").trigger("resize");@H_404_17@