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也調整反向

回答

相關問題