Div的調整與jQuery

Question

我有以下結構 http://img109.imageshack.us/img109/589/layoutwireframe.png

我需要調整大小到％工作在側邊欄 - 當然，如果我調整SidebarTop段，SidebarBottom部分需要更新太 - 增加頂部會降低底部 - 反向。

我找到解決方案來調整大小相同的塊，但這增加了兩個。我需要的是如果增加其他減少。

謝謝！

Answer 1

您可以通過修改jQuery使用來實現alsoResize選項的代碼創建一個Reverse調整大小，我們可以讓我們自己alsoResizeReverse選項。然後，我們可以簡單地使用這個如下：

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

而對於加入alsoResizeReverse選項代碼：只有幾件事情必須改變，如明顯的重命名alsoResize到alsoResizeReverse和減去增量，而不是將它添加的（什麼使調整大小逆轉）。原始的alsoResize代碼從此版本的jQuery UI（來自Google CDN的1.8.1）的第2200行開始。

的代碼（這應該是放在外面的document.ready的（））：

$.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/

Answer 2

定義一個小DIV，您可以調整大小和拖動。

<div id="resizeDiv"></div> 

現在只需在您的文檔中添加以下jQuery代碼。

$('#resizeDiv') 
    .draggable(); 
    .resizable(); 

jQuery的美妙之處在於我們可以簡單地鏈接函數調用。首先我們調用使DIV可拖動的.draggable（）函數，然後調用resizable（）。 您可能想要在啓動/停止/調整大小事件時定義回調函數。要做到這一點，我們簡單地定義：

$('#resizeDiv') 
    .resizable({ 
     start: function(e, ui) { 
      alert('resizing started'); 
     }, 
     resize: function(e, ui) { 

     }, 
     stop: function(e, ui) { 
      alert('resizing stopped'); 
     } 
    }); 

注意，回調函數有兩個參數。首先是事件對象，接下來是UI。 UI對象具有以下字段：

• ui.helper - {頂，左}之前調整大小開始

• UI - 包含輔助元件

• ui.originalPosition一個jQuery對象.originalSize - 調整大小前的{寬度，高度}

• ui.position - {top，left}當前位置

• ui.size - {寬度，高度}當前大小