如何使jQuery UI可调整大小也可以反向方向。
假设在html中有两个div标签是有的，如果我调整大小向上的意思，另一件事情必须向下调整
<script>
$(function() {
$("#resizable").resizable({alsoResize: ".myiframe"});
});
</script>
<div id = "resizable">
This is the resizable content...
</div>
<div class="myframe">
This must resize in reverse direction...
</div>
我试过，但没有使用请指导解决这个
解决方法
通过修改jQuery用来实现alsoResize选项的代码，我们可以做出我们自己的alsoResizeReverse选项。然后我们可以简单地使用如下：
$("#resizable").resizable({
alsoResizeReverse: ".myframe"
});
原始的alsoResize选项的结构已经在jQuery UI的各个版本上更改，我的原始代码在较新的版本中不工作。我将给出在版本1.8.1和1.11.4中添加此功能的代码。
只有少数事情必须改变，如明显重命名也调整为也ResizeReverse和减去增量，而不是添加它(什么使得调整大小反转)。原始的alsoResize代码从jQuery UI的version 1.8.1行的2200行开始，version 1.11.4行的7922行。你可以看到需要的少量修改here。
要添加alsoResizeReverse功能，将它添加到您的javascript(这应该放在document.ready())之外：
对于较新版本的jQuery UI(示例基于v1.11.4)：
$.ui.plugin.add("resizable","alsoResizeReverse",{
start: function() {
var that = $(this).resizable( "instance" ),o = that.options;
$(o.alsoResizeReverse).each(function() {
var el = $(this);
el.data("ui-resizable-alsoresizeReverse",{
width: parseInt(el.width(),10),height: parseInt(el.height(),left: parseInt(el.css("left"),top: parseInt(el.css("top"),10)
});
});
},resize: function(event,ui) {
var that = $(this).resizable( "instance" ),o = that.options,os = that.originalSize,op = that.originalPosition,delta = {
height: (that.size.height - os.height) || 0,width: (that.size.width - os.width) || 0,top: (that.position.top - op.top) || 0,left: (that.position.left - op.left) || 0
};
$(o.alsoResizeReverse).each(function() {
var el = $(this),start = $(this).data("ui-resizable-alsoresize-reverse"),style = {},css = el.parents(ui.originalElement[0]).length ?
[ "width","height" ] :
[ "width","height","top","left" ];
$.each(css,function(i,prop) {
var sum = (start[prop] || 0) - (delta[prop] || 0);
if (sum && sum >= 0) {
style[prop] = sum || null;
}
});
el.css(style);
});
},stop: function() {
$(this).removeData("resizable-alsoresize-reverse");
}
});
对于较旧的版本(基于v1.8.1 – 我的原始答案)：
$.ui.plugin.add("resizable",{
start: function(event,ui) {
var self = $(this).data("resizable"),o = self.options;
var _store = function(exp) {
$(exp).each(function() {
$(this).data("resizable-alsoresize-reverse",{
width: parseInt($(this).width(),height: parseInt($(this).height(),left: parseInt($(this).css('left'),top: parseInt($(this).css('top'),10)
});
});
};
if (typeof(o.alsoResizeReverse) == 'object' && !o.alsoResizeReverse.parentNode) {
if (o.alsoResizeReverse.length) { o.alsoResize = o.alsoResizeReverse[0]; _store(o.alsoResizeReverse); }
else { $.each(o.alsoResizeReverse,function(exp,c) { _store(exp); }); }
}else{
_store(o.alsoResizeReverse);
}
},ui){
var self = $(this).data("resizable"),o = self.options,os = self.originalSize,op = self.originalPosition;
var delta = {
height: (self.size.height - os.height) || 0,width: (self.size.width - os.width) || 0,top: (self.position.top - op.top) || 0,left: (self.position.left - op.left) || 0
},_alsoResizeReverse = function(exp,c) {
$(exp).each(function() {
var el = $(this),start = $(this).data("resizable-alsoresize-reverse"),css = c && c.length ? c : ['width','height','top','left'];
$.each(css || ['width','left'],prop) {
var sum = (start[prop]||0) - (delta[prop]||0); // subtracting instead of adding
if (sum && sum >= 0)
style[prop] = sum || null;
});
//Opera fixing relative position
if (/relative/.test(el.css('position')) && $.browser.opera) {
self._revertToRelativePosition = true;
el.css({ position: 'absolute',top: 'auto',left: 'auto' });
}
el.css(style);
});
};
if (typeof(o.alsoResizeReverse) == 'object' && !o.alsoResizeReverse.nodeType) {
$.each(o.alsoResizeReverse,c) { _alsoResizeReverse(exp,c); });
}else{
_alsoResizeReverse(o.alsoResizeReverse);
}
},stop: function(event,ui){
var self = $(this).data("resizable");
//Opera fixing relative position
if (self._revertToRelativePosition && $.browser.opera) {
self._revertToRelativePosition = false;
el.css({ position: 'relative' });
}
$(this).removeData("resizable-alsoresize-reverse");
}
});
这里是一个演示：http://jsfiddle.net/WpgzZ/
