我有以下结构 http://img109.imageshack.us/img109/589/layoutwireframe.png
我需要调整大小以处理侧边栏上的 % - 例如,如果我调整 SidebarTop 部分的大小,SidebarBottom 部分也需要更新 - 增加顶部将减少底部和反向。
我找到了调整相同块大小的解决方案,但这两者都会增加。我需要的是如果一个增加另一个减少。
谢谢!
我有以下结构 http://img109.imageshack.us/img109/589/layoutwireframe.png
我需要调整大小以处理侧边栏上的 % - 例如,如果我调整 SidebarTop 部分的大小,SidebarBottom 部分也需要更新 - 增加顶部将减少底部和反向。
我找到了调整相同块大小的解决方案,但这两者都会增加。我需要的是如果一个增加另一个减少。
谢谢!
您可以通过修改 jQuery 用于实现alsoResize 选项的代码来创建Reverse
调整大小,我们可以制作自己的alsoResizeReverse 选项。然后我们可以简单地使用它,如下所示:
$("#resizable").resizable({
alsoResizeReverse: ".myframe"
});
以及添加alsoResizeReverse 选项的代码:只需要更改一些内容,例如明显地将alsoResize 重命名为alsoResizeReverse 并减去增量而不是添加增量(使调整大小反转的原因)。在这个版本的 jQuery UI(来自 Google CDN 的 1.8.1)中,原始的 alsoResize 代码从第 2200 行开始。
代码(这应该放在 document.ready() 之外):
$.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/
定义一个可以调整大小和可拖动的小 DIV。
<div id="resizeDiv"></div>
现在只需在您的文档中添加以下 jQuery 代码。
$('#resizeDiv')
.draggable();
.resizable();
jQuery 的美妙之处在于我们可以简单地链接函数调用。首先我们调用 .draggable() 函数使 DIV 可拖动,然后我们调用 resizable()。您可能希望在开始/停止/调整大小事件上定义回调函数。为此,我们只需定义:
$('#resizeDiv')
.resizable({
start: function(e, ui) {
alert('resizing started');
},
resize: function(e, ui) {
},
stop: function(e, ui) {
alert('resizing stopped');
}
});
请注意,回调函数有两个参数。首先是事件对象,然后是 ui。ui 对象具有以下字段:
ui.helper – 一个包含辅助元素的 jQuery 对象
ui.originalPosition – {top, left} 开始调整大小之前
ui.originalSize – {width, height} 开始调整大小之前
ui.position – {top, left} 当前位置
ui.size – {width, height} 当前大小