Modyfikując kod używany przez jQuery do implementacji opcji alsoResize, możemy stworzyć własną opcję alsoResizeReverse. Wtedy możemy po prostu użyć tego, co następuje:
$("#resizable").resizable({
alsoResizeReverse: ".myframe"
});
Struktura oryginalnego alsoResize opcja została zmieniona na różnych wersji jQuery UI i mój oryginalny kod nie działa w nowszych wersjach. Podam kod dodający tę funkcjonalność w wersjach 1.8.1 i 1.11.4.
Tylko kilka rzeczy trzeba było zmienić, jak oczywistej zmiany nazwy alsoResize do alsoResizeReverse i odjęcie delta zamiast dodawania go (co sprawia, że zmiany rozmiaru odwrócone). Oryginalny kod alsoResize rozpoczyna się w linii 2200 od version 1.8.1 interfejsu jQuery UI i linii 7922 od version 1.11.4. Możesz zobaczyć kilka niezbędnych zmian here.
Aby dodać funkcjonalność alsoResizeReverse, dodać do swojej javascript (To powinno być umieszczone poza document.ready()):
nowsze wersje jQuery UI (przykład oparty jest na 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");
}
});
Dla starszej wersji (na podstawie v1.8.1 - mój oryginalny odpowiedź):
$.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");
}
});
Oto demo: http://jsfiddle.net/WpgzZ/
Naprawdę poważny przyjacielu !! –
+1, wow, masz na to czas. –
Po prostu pomyślałem, że dodam, że ADD to do twojego jquery-us.js, tak że działa również równieżRizeize, a takżeResizeReverse. (Tylko na wypadek, gdyby ktoś był zdezorientowany). Świetna robota! – Richard