如何調整jsfiddle.net中多個相鄰textareas的大小？

如何通過在區域1，2和3上拖動鼠標來調整textarea的大小，就像jsfiddle.net網站一樣？

我的代碼是：

HTML：

<div id="content"> 
    <fieldset id="LeftPanel"> 
     <div id="div_A" class="window top"> 
      A 
     </div> 
     <div id="div_left" class="handler_horizontal"></div> 
     <div id="div_B" class="window bottom"> 
      B 
     </div> 
    </fieldset> 
    <div id="div_vertical" class="handler_vertical"></div> 
    <fieldset id="RightPanel"> 
     <div id="div_C" class="window top"> 
      C 
     </div> 
     <div id="div_right" class="handler_horizontal"></div> 
     <div id="div_D" class="window bottom"> 
      D 
     </div> 
    </fieldset> 
</div>

JS：

$(function() { 
    window.onresize = resize; 
    resize(); 
}); 

function resize() { 
    var h = (window.innerHeight || (window.document.documentElement.clientHeight || window.document.body.clientHeight)); 
    var divHight = 20 + $("#div_left").height();//20=body padding:10px 
    $("#content").css({ "min-height": h - divHight + "px" }); 
    $("#div_vertical").css({ "height": h - divHight + "px" }); 
    $("#LeftPanel").css({ "height": h - divHight + "px" }); 
    $("#RightPanel").css({ 
     "height": h - divHight + "px", 
     "width": $("#content").width() - $("#LeftPanel").width() - $("#div_vertical").width() + "px" 
    }); 
}

CSS：

body { 
    background: none repeat scroll 0 0 #EFEFEF; 
    overflow: hidden; 
    position: relative; 
    margin: 0px; 
    padding: 10px; 
} 
div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { 
    margin: 0; 
    padding: 0; 
} 
fieldset{ 
    border: 0 none; 
} 
#LeftPanel 
{ 
    width: 50%; 
    float: left; 
} 
#RightPanel 
{ 
    width: 50%; 
    float: right; 
} 
.handler_vertical { 
    cursor: col-resize; 
    width: 8px; 
    float: left; 
} 
.handler_horizontal { 
    cursor: row-resize; 
    height: 8px; 
    width: 100%; 
    float: left; 
} 
.window { 
    border: 1px solid #ADADAD; 
    width: 100%; 
    float: left; 
} 
.top { 
    height: 25%; 
} 
.bottom { 
    height: 75%; 
}

您也可以從獲取代碼：http://jsfiddle.net/xBjnY/

來源

2012-01-11 artwl

能否請您查看此解決方案：http://jsfiddle.net/xBjnY/9/

$(function() { 
    window.onresize = resize; 
    resize(); 
}); 

function resize() { 
    var h = (window.innerHeight || (window.document.documentElement.clientHeight || window.document.body.clientHeight)); 
    var divHight = 20 + $("#div_left").height(); //20=body padding:10px 
    $("#content").css({ 
     "min-height": h - divHight + "px" 
    }); 
    $("#div_vertical").css({ 
     "height": h - divHight + "px" 
    }); 
    $("#LeftPanel").css({ 
     "height": h - divHight + "px" 
    }); 
    $("#RightPanel").css({ 
     "height": h - divHight + "px", 
     "width": $("#content").width() - $("#LeftPanel").width() - $("#div_vertical").width() + "px" 
    }); 
} 

jQuery.resizable = function(resizerID, vOrH) { 
    jQuery('#' + resizerID).bind("mousedown", function(e) { 
     var start = e.pageY; 
     if (vOrH == 'v') start = e.pageX; 
     jQuery('body').bind("mouseup", function() { 
      jQuery('body').unbind("mousemove"); 
      jQuery('body').unbind("mouseup"); 

     }); 
     jQuery('body').bind("mousemove", function(e) { 
      var end = e.pageY; 
      if (vOrH == 'v') end = e.pageX; 
      if (vOrH == 'h') { 
       jQuery('#' + resizerID).prev().height(jQuery('#' + resizerID).prev().height() + (end - start)); 
       jQuery('#' + resizerID).next().height(jQuery('#' + resizerID).next().height() - (end - start)); 
      } 
      else { 
       jQuery('#' + resizerID).prev().width(jQuery('#' + resizerID).prev().width() + (end - start)); 
       jQuery('#' + resizerID).next().width(jQuery('#' + resizerID).next().width() - (end - start)); 
      } 
      start = end; 
     }); 
    }); 
} 

jQuery.resizable('div_vertical', "v"); 
jQuery.resizable('div_right', "h"); 
jQuery.resizable('div_left', "h");

是不是你在找什麼？它有幫助嗎？

來源

2012-01-11 13:06:26

非常感謝，這只是我want.last之一，是可以設置最小寬度（和高）？ – artwl 2012-01-11 14:12:21

是否可以使用MIT或Apache許可證在github上發佈？ – koppor 2014-02-22 23:32:52

唯一的問題是，如果您調整大小以使該框比它打破的內容小，我想它可以通過限制調整大小來修復。 – Dendromaniac 2015-05-04 01:49:31

你需要編寫一些硬核JavaScript代碼。 ;）在您存儲鼠標位置的mousedown事件中，並在setTimeout（或setInterval）中檢查當前鼠標位置（例如，像一次evey 16毫秒以獲得〜60FPS，因此看起來不錯）。然後評估開始鼠標位置和當前鼠標位置之間的差異並更新css/width/height。

來源

2012-01-11 13:06:31 freakish

如何調整jsfiddle.net中多個相鄰textareas的大小？

回答

相關問題