Làm cách nào để điều chỉnh kích thước của nhiều vùng văn bản lân cận như trong jsfiddle.net?

Question

Làm cách nào để điều chỉnh kích thước của vùng văn bản bằng cách kéo chuột trên các khu vực 1, 2 và 3, giống như trang web jsfiddle.net?

Mã của tôi là:

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%; 
} 

Bạn cũng có thể lấy mã từ: http://jsfiddle.net/xBjnY/

Answer 1

bạn có thể vui lòng kiểm tra giải pháp này: 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"); 

Có những gì bạn đang tìm kiếm? Nó có giúp được không?

Answer 2

Bạn cần phải viết một số mã JavaScript hardcore. ;) Trên mousedown sự kiện bạn lưu trữ vị trí chuột và trong setTimeout (hoặc setInterval) bạn kiểm tra vị trí chuột hiện tại (ví dụ như một lần evey 16 miliseconds để có được ~ 60FPS vì vậy nó có vẻ tốt). Sau đó, bạn đánh giá sự khác biệt giữa vị trí chuột bắt đầu và vị trí chuột hiện tại và cập nhật css/width/height.