jQuery UI Resizable alsoResize反向 [英] jQuery UI Resizable alsoResize reverse
问题描述
如何使jQuery UI可调整大小还可以调整反向大小.
How to make the jQuery UI Resizable alsoResize reverse direction.
假设在html中有两个div标签，如果我向上调整大小意味着另一件事必须向下调整大小
suppose in the html there is two div tag is there, if i resize in upward means the other thing has to resize downward
<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>
我尝试过，但是没有用，请指导解决此问题
i tried it but of no use please guide to solve this
推荐答案
通过修改jQuery用于实现alsoResize选项的代码，我们可以创建自己的alsoResizeReverse选项.然后我们可以简单地使用它，如下所示:
By modifying the code jQuery uses to implement the alsoResize option, we can make our own alsoResizeReverse option. Then we can simply use this as follows:
$("#resizable").resizable({
alsoResizeReverse: ".myframe"
});
原始的alsoResize选项的结构已在jQuery UI的各个版本上更改，并且我的原始代码在较新的版本中不起作用.我将在版本1.8.1和1.11.4中提供用于添加此功能的代码.
The structure of the original alsoResize option has been changed over the various versions of jQuery UI and my original code does not work in the newer versions. I'll give the code for adding this functionality in version 1.8.1 and 1.11.4.
仅需更改一些内容，例如将alsoResize重命名为alsoResizeReverse并减去delta而不是添加它(这会使调整大小相反).原始alsoResize代码从版本1.8的第2200行开始jQuery UI的.1 和版本1.11.4 .您可以此处.
Only a few things had to be changed, such as the obvious renaming alsoResize to alsoResizeReverse and subtracting the delta instead of adding it (what makes the resize reversed). The original alsoResize code starts on line 2200 of version 1.8.1 of jQuery UI and line 7922 of version 1.11.4. You can see the few changes needed here.
要添加alsoResizeReverse功能，请将其添加到您的javascript中(应放置在document.ready()之外):
To add the alsoResizeReverse functionality, add this to your javascript (This should be put outside of document.ready()):
对于较新版本的jQuery UI(示例基于v1.11.4):
For newer versions of jQuery UI (example is based on 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-我的原始答案):
For older version (based on v1.8.1 -- my original answer):
$.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/
这篇关于jQuery UI Resizable alsoResize反向的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
