jQuery UI es de tamaño variable alsoResize inversa

Cómo hacer que la interfaz de usuario jQuery de tamaño variable alsoResize dirección inversa.

suponga que en el html hay dos etiqueta div es no, si se cambia el tamaño de en hacia arriba significa otra cosa que tiene que cambiar el tamaño de la baja

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

lo he probado, pero de no uso, por favor guía para resolver este

7 Kommentare

  1. 55

    Modificando el código de jQuery se utiliza para implementar la alsoResize opción, podemos hacer nuestra propia alsoResizeReverse opción. A continuación, simplemente podemos utilizar esto como sigue:

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

    La estructura de la original alsoResize opción ha sido cambiado a lo largo de las distintas versiones de jQuery UI y original de mi código no funciona en las versiones más recientes. Voy a dar el código para añadir esta funcionalidad en la versión 1.8.1 y 1.11.4.

    Sólo un par de cosas que tenía que ser cambiado, tales como el obvio cambio de nombre de alsoResize a alsoResizeReverse y restando el delta en lugar de agregar (lo que hace que el cambio de tamaño se invierte). El original alsoResize código comienza en la línea de 2200 de la versión 1.8.1 de jQuery UI y la línea 7922 de versión 1.11.4. Usted puede ver los pocos cambios necesarios aquí.

    Para agregar el alsoResizeReverse funcionalidad, añade esto a tu javascript (Esto debe ser puesto fuera de documento.listo()):

    Para las nuevas versiones de jQuery interfaz de usuario (ejemplo está basado en 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");
        }
    });

    Para la versión anterior (basado en v1.8.1-mi respuesta original):

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

    Aquí una demo: http://jsfiddle.net/WpgzZ/

    • Realmente tgr amigo !!
    • +1, wow hombre ¿tiene tiempo para eso.
    • Sólo pensé que me gustaría añadir que AGREGAR esto a su jquery-us.js para que tanto alsoResize, y alsoResizeReverse obras. (Sólo en caso de que alguien estaba confundido) También, gran trabajo!
    • funciona muy bien! estábamos buscando panel de división tipo de un componente. utiliza este código para construir uno. gracias!
    • cuddos bro, muy bonito
    • Impresionante! En mi humilde opinión esto debe agregarse a JQuery fuente oficial…
    • Este se comporta de forma inesperada si su .de tamaño variable, de elementos position:absolute y left:##px conjunto.
    • Lo siento decir pero esto no funciona en las versiones más recientes de JQuery UI
    • Buen Trabajo! Por desgracia, cambia la relación de aspecto del otro elemento. Lo estoy usando para un video y cuando el redimensionamiento de la función detiene el vídeo de la barra de control es mucho más largos que el propio vídeo. Es allí una manera de pasar a la «relación de aspecto» opción para los otros elementos de la función de cambiar el tamaño?
    • gracias, cómo establecer minWidth para el elemento de la inversa de tamaño variable?

  2. 8

    Tuve un problema para conseguir el «Simen Echholt»-código para trabajar con jQuery 1.9.1/jquery-ui (1.10.2), pero funcionó cuando cambié el «$(this).de datos(«de tamaño variable«)» con «$(this).de datos(«de la interfaz de usuario puede cambiar de tamaño«)«.

    • Pensé que podría hablar de que yo también tenía que cambiar $.browser.opera a $.support.opera al usar jQuery 2.0.3/jQuery UI 1.10.3.
  3. 5

    Actualización de jQuery 2.1.1 y jQuery UI 1.11.2.

    JS:

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

    CSS:

    #resizable,
    .myframe {
      border: 1px solid black;
      padding: 10px;
      margin-bottom: 20px;
      width: 50%;
      height: 150px
    }

    HTML:

    <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/%5D%5B1%5D

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

    Esto también se debe trabajar para cambiar el tamaño de otro div en la dirección opuesta.

    • Bueno, en mi caso ui is not defineded
  5. 2

    Incluso si el código publicado por Simen funciona muy bien,
    aquí está mi código para el tamaño de las dos div vertical (y funciona bien)

    <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>
    • Hey compañero, usted debe preguntar a su pregunta en otra pregunta
    • El código funciona bien, pero la parte inferior div tener algún problema en cambiar de tamaño. Necesita una pequeña modificación supongo, yo no podía entenderlo.He tratado de desbordamiento-diferentes estilos..!
  6. 2

    Adaptado a las ideas de marg t y Joseph Baker – que creo que es un enfoque mucho mejor. Este método no requiere ningún tipo de librería de Jquery hack o un plugin para dividir un div en dos paneles. Sólo añadir una función para compensar la anchura en las de tamaño variable ‘resize’ evento:

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

    Aquí la completa JS violín.

  7. 1

    Actualizado para 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");
      }
    });

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea