wake-up-neo.com

jQuery UI Resizable auchResize reverse

So ändern Sie die Größe der jQuery-Benutzeroberfläche auch in umgekehrter Richtung.

angenommen, in der HTML-Datei gibt es zwei div-Tags. Wenn ich die Größe nach oben verändere, bedeutet dies, dass die andere Sache die Größe nach unten ändern muss

<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>

ich habe es ausprobiert, aber es hilft mir nicht weiter, es zu lösen

Durch die Änderung des Codes, den jQuery zur Implementierung der Option alsoResize verwendet, können wir unsere eigene Option alsoResizeReverse erstellen. Dann können wir das einfach wie folgt verwenden:

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

Die Struktur der ursprünglichen alsoResize-Option wurde in den verschiedenen Versionen der jQuery-Benutzeroberfläche geändert, und mein ursprünglicher Code funktioniert in den neueren Versionen nicht. Ich gebe den Code zum Hinzufügen dieser Funktionalität in Version 1.8.1 und 1.11.4.

Es mussten nur wenige Dinge geändert werden, z. B. die offensichtliche Umbenennung von alsoResize in alsoResizeReverse und das Subtrahieren der delta, anstatt sie hinzuzufügen (was die Größenänderung rückgängig macht). Der ursprüngliche alsoResize-Code beginnt in Zeile 2200 von Version 1.8.1 von jQuery UI und Zeile 7922 von Version 1.11.4 . Die wenigen erforderlichen Änderungen sehen Sie hier .

Um die alsoResizeReverse-Funktionalität hinzuzufügen, fügen Sie dies Ihrem Javascript hinzu (Dies sollte außerhalb von document.ready () stehen):

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/

54
Simen Echholt

Ich hatte ein Problem mit dem "Simen Echholt" -Code, um mit jQuery 1.9.1/jquery-ui (1.10.2) zu arbeiten, aber es funktionierte, wenn ich " $ (this) .data (" resizable) austauschte ") " mit " $ (this) .data (" ui-resizable ") ". 

8
robertpaulsen

Aktualisieren Sie auf jQuery 2.1.1 und die jQuery-Benutzeroberfläche 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
}
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<div id="resizable">
  This is the resizable content...
</div>

<div class="myframe">
  This must resize in reverse direction...
</div>

[ http://jsfiddle.net/WpgzZ/1136/([1]

5
$('#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
    });

Dies sollte auch funktionieren, um die Größe eines anderen Div in entgegengesetzter Richtung zu ändern.

4
josephbaker

Die Ideen von marg t und Joseph Baker wurden angepasst - was meiner Meinung nach ein weitaus besserer Ansatz ist. Diese Methode erfordert keinen Hack oder Plugin einer Jquery-Bibliothek, um ein div in zwei Bereiche aufzuteilen. Fügen Sie einfach eine Funktion hinzu, um die Breite in dem anpassbaren 'resize' -Ereignis zu korrigieren:

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

Hier ist die komplette JS-Geige .

2
freeworlder

Auch wenn der von Simen veröffentlichte Code sehr gut funktioniert, ist Hier der Code, um zwei div vertikal zu ändern (und es funktioniert gut)

<script>
    var myheight  = ($(window).height()-50);
    var mywidth  = $(window).width();
    $(window).load(function () {
        $("#resizable").height(100); 
        $("#content").height(myheight-$("#resizable").height()); 
    });
</script>

<div id="resizable" style="border:1px solid #333; overflow:auto">resizable</div> 
<div id="content" style="border:1px solid red; overflow:auto">content</div> 

<script>
    $("#resizable").resizable({ 
        handles: 's', 
        maxHeight: myheight,
        resize: function() {
        $("#content").height(myheight-$("#resizable").height());
        }
    });
</script>
2
marg t

Aktualisiert für 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");
  }
});
1
Jaron Gao