jQuery UI Resizable也调整反向

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用户界面的新版本（例如基于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/

来源

2010-07-30 12:35:57

+0

真的是朋友！ – 2010-08-02 04:49:46

+0

+1，你有没有时间。 – 2011-08-03 10:28:16

+0

只是想我会补充说，你把这个添加到你的jquery-us.js，这样既resize和alsoResizeReverse作品。（只是为了防止任何人感到困惑）另外，很棒的工作！ – Richard 2012-02-21 15:28:27

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的方向。

来源

2012-04-20 13:58:50

+1

那么在我的情况下'用户界面没有defineded' – Kiwy 2013-12-30 11:12:42

2

即使张贴泗门代码工作得非常好，这里是我的代码垂直调整2个格（它工作正常）

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

来源

2012-09-07 12:48:01

+1

嘿队友，你应该问你的问题在另一个问题 – Littm 2012-09-22 00:08:37

+0

代码工作正常，但底部div有调整大小问题。需要一个小调整我猜，我无法弄清楚。我尝试了溢出 - 不同的风格..！ – raja777m 2015-04-16 18:41:47

8

我不得不让“泗门Echholt” -code问题使用jQuery 1.9.1/jquery-ui（1.10.2），但它在我交换“$（this）.data（”resizable“）”与“$（this）.data “ui-resizable”）“。

来源

2013-04-18 11:52:18 robertpaulsen

+0

我想我可能会提到，在使用jQuery 2.0.3/jQuery UI 1.10.3时，我还必须将'$ .browser.opera'更改为'$ .support.opera'。 – 2013-10-08 07:43:14

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

来源

2014-05-07 13:20:35

5

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

来源

2014-11-27 16:16:35

1

改编自玛格T和约瑟夫·贝克的想法 - 我认为这是一个更好的方法。此方法不需要任何Jquery库hack或插件将div分割为两个窗格。只需添加一个函数来抵消可调整大小的“调整”事件宽度：

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

下面是完整的JS fiddle。

来源

2017-03-27 19:03:59 freeworlder

jQuery UI Resizable也调整反向

回答

相关问题