如何使 jQuery UI Resizable 也可以反向调整大小。
假设在 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 jquery-ui jquery-ui-resizable
通过修改 jQuery 用来实现alsoResize 选项的代码，我们可以创建自己的alsoResizeReverse 选项。然后我们可以简单地使用它：
$("#resizable").resizable({
alsoResizeReverse: ".myframe"
});
原始alsoResize 选项的结构已在各种版本的 jQuery UI 中发生更改，我的原始代码在较新的版本中不起作用。我将给出在 1.8.1 和 1.11.4 版本中添加此功能的代码。
只需要更改几件事，例如将alsoResize 重命名为alsoResizeReverse 并减去delta 而不是添加它（这使得调整大小反转）。原始的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(), 10),
left: parseInt(el.css("left"), 10), 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", "alsoResizeReverse", {
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(), 10), height: parseInt($(this).height(), 10),
left: parseInt($(this).css('left'), 10), 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);
}
},
resize: function(event, 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"), style = {}, css = c && c.length ? c : ['width', 'height', 'top', 'left'];
$.each(css || ['width', 'height', 'top', 'left'], function(i, 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, function(exp, 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/
【讨论】：
position:absolute 和 left:##px，则会出现意外行为。
我在让“Simen Echholt”代码与 jQuery 1.9.1/jquery-ui (1.10.2) 一起工作时遇到问题，但是当我交换“$(this).data(”时它工作了resizable")" 与 "$(this).data("ui-resizable")"。
【讨论】：
$.browser.opera 更改为 $.support.opera。
更新到 jQuery 2.1.1 和 jQuery UI 1.11.2。
$.ui.plugin.add("resizable", "alsoResizeReverse", {
start: function() {
var that = $(this).resizable("instance"),
o = that.options,
_store = function(exp) {
$(exp).each(function() {
var el = $(this);
el.data("ui-resizable-alsoResizeReverse", {
width: parseInt(el.width(), 10),
height: parseInt(el.height(), 10),
left: parseInt(el.css("left"), 10),
top: parseInt(el.css("top"), 10)
});
});
};
if (typeof(o.alsoResizeReverse) === "object" && !o.alsoResizeReverse.parentNode) {
if (o.alsoResizeReverse.length) {
o.alsoResizeReverse = o.alsoResizeReverse[0];
_store(o.alsoResizeReverse);
} else {
$.each(o.alsoResizeReverse, function(exp) {
_store(exp);
});
}
} else {
_store(o.alsoResizeReverse);
}
},
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
},
_alsoResizeReverse = function(exp, c) {
$(exp).each(function() {
var el = $(this),
start = $(this).data("ui-resizable-alsoResizeReverse"),
style = {},
css = c && c.length ?
c :
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);
});
};
if (typeof(o.alsoResizeReverse) === "object" && !o.alsoResizeReverse.nodeType) {
$.each(o.alsoResizeReverse, function(exp, c) {
_alsoResizeReverse(exp, c);
});
} else {
_alsoResizeReverse(o.alsoResizeReverse);
}
},
stop: function() {
$(this).removeData("resizable-alsoResizeReverse");
}
});
$(function() {
$("#resizable").resizable({
alsoResizeReverse: ".myframe"
});
});#resizable,
.myframe {
border: 1px solid black;
padding: 10px;
margin-bottom: 20px;
width: 50%;
height: 150px
}<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<div id="resizable">
This is the resizable content...
</div>
<div class="myframe">
This must resize in reverse direction...
</div>【讨论】：
$('#div1').resizable({
handles: 'n',
resize: function(){
$('#div2').css("height","-"+ui.size.height+"px");
}
}).bind("resize", function () {
$(this).css("top", "auto"); //To handle the issue with top
});
这也应该可以在相反方向调整另一个 div 的大小。
【讨论】：
ui is not defineded
即使西门贴出的代码效果很好， 这是我垂直调整两个 div 大小的代码（效果很好）
<script>
var myheight = ($(window).height()-50);
var mywidth = $(window).width();
$(window).load(function () {
$("#resizable").height(100);
$("#content").height(myheight-$("#resizable").height());
});
</script>
<div id="resizable" style="border:1px solid #333; overflow:auto">resizable</div>
<div id="content" style="border:1px solid red; overflow:auto">content</div>
<script>
$("#resizable").resizable({
handles: 's',
maxHeight: myheight,
resize: function() {
$("#content").height(myheight-$("#resizable").height());
}
});
</script>
【讨论】：
改编自 marg t 和 Joseph Baker 的想法——我认为这是一种更好的方法。此方法不需要任何 Jquery 库 hack 或插件即可将 div 拆分为两个窗格。只需在可调整大小的“resize”事件中添加一个函数来偏移宽度：
$("#left_pane").resizable({
handles: 'e', //'East' draggable edge
resize: function() {
$("#right_pane").outerWidth($("#container").innerWidth() - $("#left_pane").outerWidth());
}
});
这是完整的JS fiddle。
【讨论】：
为 jquery-ui 1.10.4 更新
$.ui.plugin.add('resizable', 'alsoResizeReverse', {
start: function () {
var that = $(this).data('ui-resizable'),
o = that.options,
_store = function (exp) {
$(exp).each(function() {
var el = $(this);
el.data('ui-resizable-alsoresize-reverse', {
width: parseInt(el.width(), 10), height: parseInt(el.height(), 10),
left: parseInt(el.css('left'), 10), top: parseInt(el.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) { _store(exp); }); }
}else{
_store(o.alsoResizeReverse);
}
},
resize: function (event, ui) {
var that = $(this).data('ui-resizable'),
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
},
_alsoResizeReverse = function(exp, c) {
$(exp).each(function() {
var el = $(this), start = $(this).data('ui-resizable-alsoresize-reverse'), style = {},
css = c && c.length ? c : 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); // subtracting instead of adding
if (sum && sum >= 0) {
style[prop] = sum || null;
}
});
el.css(style);
});
};
if (typeof(o.alsoResizeReverse) === 'object' && !o.alsoResizeReverse.nodeType) {
$.each(o.alsoResizeReverse, function(exp, c) { _alsoResizeReverse(exp, c); });
}else{
_alsoResizeReverse(o.alsoResizeReverse);
}
},
stop: function(event, ui){
$(this).removeData("resizable-alsoresize-reverse");
}
});
【讨论】：