jQuery UI可调整大小也可以反向调整

时间：2010-07-30 06:08:56

标签： jquery jquery-ui jquery-ui-resizable

如何使jQuery UI Resizable也可以反向调整。

假设在html中有两个div标签，如果我向上调整意味着另一个东西必须向下调整大小

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

我尝试了但没有用，请指导解决此问题

7 个答案:

答案 0 :(得分：55)

通过修改jQuery用于实现alsoResize选项的代码，我们可以创建自己的alsoResizeReverse选项。然后我们可以简单地使用如下：

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

原始alsoResize选项的结构已在各种版本的jQuery UI上进行了更改，而我的原始代码在较新版本中不起作用。我将在1.8.1和1.11.4版本中提供添加此功能的代码。

只需要更改一些内容，例如明显重命名alsoResize到alsoResizeReverse并减去delta而不是添加它（使调整大小反转的原因）。原始alsoResize代码从jQuery UI的version 1.8.1第2200行和version 1.11.4的第7922行开始。您可以看到需要进行的一些更改here。

要添加alsoResizeReverse功能，请将其添加到您的javascript（这应该放在document.ready（）之外）：

对于较新版本的jQuery UI（示例基于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");
    }
});

对于旧版本（基于v1.8.1 - 我的原始答案）：

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

以下是演示：http://jsfiddle.net/WpgzZ/

答案 1 :(得分：8)

我遇到了一个问题，让“Simen Echholt”代码与jQuery 1.9.1 / jquery-ui（1.10.2）一起使用，但是当我交换“ $（this）.data（” 可调整大小“）”with“ $（this）.data（” ui-resizable “）”。

答案 2 :(得分：5)

更新到jQuery 2.1.1和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
}
<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]

答案 3 :(得分：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
    });

这也应该可以调整另一个相反方向的div。

答案 4 :(得分：2)

即使西门发布的代码效果很好， 这是我的代码垂直调整两个div（它工作正常）

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

答案 5 :(得分：2)

改编了来自marg和Joseph Baker的想法 - 我认为这是一个更好的方法。此方法不需要任何Jquery库hack或插件将div拆分为两个窗格。只需在可调整大小的'resize'事件中添加一个函数来偏移宽度：

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

这是完整的JS fiddle。

答案 6 :(得分：1)

更新了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");
  }
});
相关问题
最新问题