Divs redimensionnent avec jQuery

Question

je la structure suivante http://img109.imageshack.us/img109/589/layoutwireframe.png

J'ai besoin du Redimensionner pour travailler% sur la barre latérale - ex si je redimensionnez la section sidebartop, la partie sidebarbottom ont besoin de mettre à jour trop - de plus en plus partie supérieure diminuera bas - et inverse.

Je trouve une solution pour redimensionner les mêmes blocs mais cela augmente les deux. Ce dont j'ai besoin est si l'on augmente d'autres diminution.

Merci!

Answer 1

Vous pouvez créer un Reverse Redimensionner en modifiant le code jQuery utilise pour mettre en œuvre l'option alsoResize, nous pouvons faire notre propre option alsoResizeReverse. Ensuite, nous pouvons utilise simplement cela comme suit:

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

Et le code pour ajouter l'option alsoResizeReverse: Seulement quelques choses devaient changer, comme le alsoResize de changement de nom évident pour alsoResizeReverse et en soustrayant le delta au lieu de l'ajouter (ce qui rend le redimensionnement inversé). Le code original alsoResize commence à la ligne 2200 dans cette version de jQuery UI (1.8.1 de Google CDN).

Le code (ce qui devrait être mis à l'extérieur de document.ready()):

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

Voici une démo: http://jsfiddle.net/WpgzZ/

Answer 2

Définissez un petit DIV que vous pouvez redimensionner et déplacer.

<div id="resizeDiv"></div> 

Maintenant ajoutez simplement le code jQuery suivant dans votre document.

$('#resizeDiv') 
    .draggable(); 
    .resizable(); 

La beauté de jQuery est que nous pouvons simplement chaîner l'appel de fonction. D'abord nous avons appelé la fonction .draggable() qui rend le DIVgable et ensuite nous avons appelé resizable(). Vous pouvez définir des fonctions de rappel sur les événements de démarrage/arrêt/redimensionnement. Pour ce faire, nous définissons simplement:

$('#resizeDiv') 
    .resizable({ 
     start: function(e, ui) { 
      alert('resizing started'); 
     }, 
     resize: function(e, ui) { 

     }, 
     stop: function(e, ui) { 
      alert('resizing stopped'); 
     } 
    }); 

Notez que la fonction de rappel obtient deux arguments. Le premier est l'objet d'événement et le suivant est ui. L'objet ui a les champs suivants:

• ui.helper - un objet jQuery contenant l'élément d'aide

• ui.originalPosition - {haut, gauche} avant Redimensionnement commencé

• ui .originalSize - {width, height} avant le redimensionnement commencé

• ui.position - {haut, gauche} position actuelle

• ui.size - {largeur, hauteur} taille actuelle