jQuery UI Resizable alsoResize reverse [英] jQuery UI Resizable alsoResize reverse
问题描述
如何使 jQuery UI Resizable 也反向 Resize.
假设在 html 中有两个 div 标签，如果我向上调整大小意味着另一件事必须向下调整大小
<div id = "可调整大小">这是可调整大小的内容...<div class="myframe">这必须反向调整大小...
我试过了，但没有用，请指导解决这个问题
通过修改 jQuery 用于实现 alsoResize 选项的代码，我们可以制作自己的 alsoResizeReverse 选项.然后我们可以简单地使用它如下:
$("#resizable").resizable({也ResizeReverse:.myframe"});原始 alsoResize 选项的结构已在 jQuery UI 的各个版本中发生变化，而我的原始代码在较新的版本中不起作用.我将给出在 1.8.1 和 1.11.4 版本中添加此功能的代码.
只有几件事情需要改变，例如明显地将 alsoResize 重命名为 alsoResizeReverse 并减去 delta 而不是添加它(是什么使调整大小颠倒).原始 alsoResize 代码从 1.8.1 版 jQuery UI 和 1.11.4 版.您可以在此处查看所需的一些更改.
要添加 alsoResizeReverse 功能，请将其添加到您的 javascript 中(这应该放在 document.ready() 之外):
对于较新版本的 jQuery UI(示例基于 v1.11.4):
$.ui.plugin.add("resizable", "alsoResizeReverse", {开始:函数(){var that = $(this).resizable("instance"),o = that.options;$(o.alsoResizeReverse).each(function() {var el = $(this);el.data("ui-resizable-alsoresizeReverse", {宽度: parseInt(el.width(), 10), 高度: parseInt(el.height(), 10),左: parseInt(el.css("left"), 10), 顶部: parseInt(el.css("top"), 10)});});},调整大小:函数(事件，用户界面){var that = $(this).resizable("instance"),o = that.options,os = that.originalSize,op = that.originalPosition,增量 = {高度: (that.size.height - os.height) ||0,宽度: (that.size.width - os.width) ||0,顶部: (that.position.top - op.top) ||0,左:(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 ?[宽度"，高度"]:[宽度"，高度"，顶部"，左侧"];$.each(css, function(i, prop) {var sum = (start[prop] || 0) - (delta[prop] || 0);if (sum && sum >= 0) {样式[prop] = sum ||空值;}});el.css(样式)；});},停止:函数(){$(this).removeData("resizable-alsoresize-reverse");}});对于旧版本(基于 v1.8.1 - 我的原始答案):
$.ui.plugin.add("resizable", "alsoResizeReverse", {开始:功能(事件，用户界面){var self = $(this).data("resizable"), o = self.options;var_store = 函数(exp){$(exp).each(function() {$(this).data("resizable-alsoresize-reverse", {宽度: parseInt($(this).width(), 10), 高度: parseInt($(this).height(), 10),左: parseInt($(this).css('left'), 10), 顶部: 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); });}}别的{_store(o.alsoResizeReverse);}},调整大小:功能(事件，用户界面){var self = $(this).data("resizable"), o = self.options, os = self.originalSize, op = self.originalPosition;变量增量 = {高度:(self.size.height - os.height) ||0, 宽度: (self.size.width - os.width) ||0,顶部: (self.position.top - op.top) ||0, 左: (self.position.left - op.left) ||0},_alsoResizeReverse = 函数(exp，c){$(exp).each(function() {var el = $(this), start = $(this).data("resizable-alsoresize-reverse"), style = {}, css = c &&c.长度?c : ['宽度', '高度', '顶部', '左'];$.each(css || ['width', 'height', 'top', 'left'], function(i, prop) {var sum = (start[prop]||0) - (delta[prop]||0);//减法而不是加法if (sum && sum >= 0)样式[prop] = sum ||空值;});//Opera固定相对位置if (/relative/.test(el.css('position')) && $.browser.opera) {self._revertToRelativePosition = true;el.css({ position: 'absolute', top: 'auto', left: 'auto' });}el.css(样式)；});};if (typeof(o.alsoResizeReverse) == 'object' && !o.alsoResizeReverse.nodeType) {$.each(o.alsoResizeReverse, function(exp, c) { _alsoResizeReverse(exp, c); });}别的{_alsoResizeReverse(o.alsoResizeReverse);}},停止:功能(事件，用户界面){var self = $(this).data("resizable");//Opera固定相对位置如果(self._revertToRelativePosition && $.browser.opera){self._revertToRelativePosition = false;el.css({ 位置: '相对' });}$(this).removeData("resizable-alsoresize-reverse");}});这是一个演示:http://jsfiddle.net/WpgzZ/
How to make the jQuery UI Resizable alsoResize reverse direction.
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
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"
});
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.
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.
To add the alsoResizeReverse functionality, add this to your javascript (This should be put outside of document.ready()):
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");
}
});
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");
}
});
Here's a demo: http://jsfiddle.net/WpgzZ/
这篇关于jQuery UI Resizable alsoResize reverse的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
