Interfaccia utente jQuery ridimensionabile anche Ridimensiona inversa

Come rendere ridimensionabile l’interfaccia utente jQuery Ridimensionare la direzione inversa.

supponiamo che in html ci sia un tag div diviso, se ridimensiono in alto significa che l’altra cosa deve ridimensionare verso il basso

 $(function() { $("#resizable").resizable({alsoResize: ".myiframe"}); });  
This is the resizable content...
This must resize in reverse direction...

l’ho provato ma non serve per favore guida per risolvere questo

Modificando il codice utilizzato da jQuery per implementare l’opzione alsoResize , possiamo creare la nostra opzione alsoResizeReverse . Quindi possiamo semplicemente usare questo come segue:

 $("#resizable").resizable({ alsoResizeReverse: ".myframe" }); 

La struttura dell’opzione originalResize originale è stata modificata rispetto alle varie versioni dell’interfaccia utente di jQuery e il mio codice originale non funziona nelle versioni più recenti. Fornirò il codice per l’aggiunta di questa funzionalità nella versione 1.8.1 e 1.11.4.

È stato necessario modificare solo alcune cose, ad esempio l’ovvio ridenominazioneResize to alsoResizeReverse e sottrarre il delta invece di aggiungerlo (ciò che rende reversibile il ridimensionamento). Il codice originalResize originale inizia nella riga 2200 della versione 1.8.1 di jQuery UI e nella riga 7922 della versione 1.11.4 . Puoi vedere le poche modifiche necessarie qui .

Per aggiungere la funzionalità alsoResizeReverse , aggiungi questo al tuo javascript (Questo dovrebbe essere messo fuori da document.ready ()):

Per le versioni più recenti dell’interfaccia utente jQuery (l’esempio è basato sulla 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"); } }); 

Per la versione precedente (basata su v1.8.1 – la mia risposta originale):

 $.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"); } }); 

Ecco una demo: http://jsfiddle.net/WpgzZ/

Ho avuto un problema nel far funzionare il codice “Simen Echholt” con jQuery 1.9.1 / jquery-ui (1.10.2), ma ha funzionato quando ho scambiato ” $ (this) .data (” ridimensionabile “) ” con ” $ (questo) .data (” ui-ridimensionabile “) “.

Aggiornamento a jQuery 2.1.1 e jQuery UI 1.11.2.

 $.ui.plugin.add("resizable", "alsoResizeReverse", { start: function() { var that = $(this).resizable("instance"), o = that.options, _store = function(exp) { $(exp).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) }); }); }; if (typeof(o.alsoResizeReverse) === "object" && !o.alsoResizeReverse.parentNode) { if (o.alsoResizeReverse.length) { o.alsoResizeReverse = o.alsoResizeReverse[0]; _store(o.alsoResizeReverse); } else { $.each(o.alsoResizeReverse, function(exp) { _store(exp); }); } } else { _store(o.alsoResizeReverse); } }, 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 }, _alsoResizeReverse = function(exp, c) { $(exp).each(function() { var el = $(this), start = $(this).data("ui-resizable-alsoResizeReverse"), style = {}, css = c && c.length ? c : 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); }); }; if (typeof(o.alsoResizeReverse) === "object" && !o.alsoResizeReverse.nodeType) { $.each(o.alsoResizeReverse, function(exp, c) { _alsoResizeReverse(exp, c); }); } else { _alsoResizeReverse(o.alsoResizeReverse); } }, stop: function() { $(this).removeData("resizable-alsoResizeReverse"); } }); $(function() { $("#resizable").resizable({ alsoResizeReverse: ".myframe" }); }); 
 #resizable, .myframe { border: 1px solid black; padding: 10px; margin-bottom: 20px; width: 50%; height: 150px } 
    
This is the resizable content...
This must resize in reverse direction...
 $('#div1').resizable({ handles: 'n', resize: function(){ $('#div2').css("height","-"+ui.size.height+"px"); } }).bind("resize", function () { $(this).css("top", "auto"); //To handle the issue with top }); 

Questo dovrebbe anche funzionare per ridimensionare un altro div nella direzione opposta.

Anche se il codice inviato da Simen funziona molto bene, ecco il mio codice per ridimensionare due div verticalmente (e funziona bene)

  
resizable
content

Adattato le idee di Marg T e Joseph Baker – che ritengo sia un approccio molto migliore. Questo metodo non richiede alcun hack o plugin di libreria Jquery per dividere un div in due riquadri. Basta aggiungere una funzione per compensare la larghezza nell’evento ridimensionabile ‘resize’:

 $("#left_pane").resizable({ handles: 'e', //'East' draggable edge resize: function() { $("#right_pane").outerWidth($("#container").innerWidth() - $("#left_pane").outerWidth()); } }); 

Ecco il violino JS completo.

Aggiornato per jquery-ui 1.10.4

 $.ui.plugin.add('resizable', 'alsoResizeReverse', { start: function () { var that = $(this).data('ui-resizable'), o = that.options, _store = function (exp) { $(exp).each(function() { var el = $(this); el.data('ui-resizable-alsoresize-reverse', { width: parseInt(el.width(), 10), height: parseInt(el.height(), 10), left: parseInt(el.css('left'), 10), top: parseInt(el.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) { _store(exp); }); } }else{ _store(o.alsoResizeReverse); } }, resize: function (event, ui) { var that = $(this).data('ui-resizable'), 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 }, _alsoResizeReverse = function(exp, c) { $(exp).each(function() { var el = $(this), start = $(this).data('ui-resizable-alsoresize-reverse'), style = {}, css = c && c.length ? c : 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); // subtracting instead of adding if (sum && sum >= 0) { style[prop] = sum || null; } }); 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){ $(this).removeData("resizable-alsoresize-reverse"); } });