如何像jsfiddle.net一样调整多个相邻textarea的大小?

如何像jsfiddle.net网站一样，通过在区域1、2和3上拖动鼠标来调整文本区域的大小?

How can I adjust the size of textarea by draging the mouse on areas 1, 2 and 3, just like the jsfiddle.net website?

我的代码是:

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

You can also get the code from:http://jsfiddle.net/xBjnY/