Durch die Änderung des Codes, den jQuery zur Implementierung der Option alsoResize verwendet, können wir unsere eigene alsoResizeReverse Option erstellen. Dann können wir einfach diese wie folgt verwenden:
$("#resizable").resizable({
alsoResizeReverse: ".myframe"
});
Die Struktur der ursprünglichen alsoResize Option hat mich über die verschiedenen Versionen von jQuery UI und meinem ursprünglichen Code funktioniert nicht in den neueren Versionen geändert. Ich gebe den Code für das Hinzufügen dieser Funktionalität in Version 1.8.1 und 1.11.4.
Nur ein paar Dinge musste geändert werden, wie die offensichtliche Umbenennung alsoResize-alsoResizeReverse und Subtrahieren der delta anstatt es hinzuzufügen (was die Größe ändern macht umgekehrt). Der ursprüngliche Code alsoResize beginnt in Zeile 2200 von version 1.8.1 von jQuery UI und Zeile 7922 von version 1.11.4. Sie können die wenigen Änderungen sehen, die benötigt werden here.
Um die alsoResizeReverse Funktionalität, fügen Sie diese zu Ihrer javascript (Diese außerhalb von document.ready() gesetzt werden sollte):
Für neuere Versionen von jQuery UI (Beispiel basiert auf 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");
}
});
Für ältere Version (basierend auf v1.8.1 - meine ursprüngliche Antwort):
$.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");
}
});
Hier ist eine Demo: http://jsfiddle.net/WpgzZ/
Wirklich grt Freund !! –
+1, wow Mann hast du Zeit dafür. –
Nur gedacht, ich würde hinzufügen, dass Sie dies zu Ihrem jquery-us.js hinzufügen, so dass sowohl auchResize undResizeReverse funktioniert. (Nur für den Fall, dass jemand verwirrt war) Auch, gute Arbeit! – Richard