Splitting HTML page into different sections using sliding panel dividers? How is it done?

I'm wanting to divide a web page up into different sections as shown here. I'm trying to figure it out what this technique is called and an efficient way to implement it?

The page is divided up into different sections giving the user the flexiblity to expand and contract the different sections using panel handles.

I'm assuming these aren't regular frames (which I'd like to avoid using anyways).

Does anybody know of a tutorial or good example out t开发者_开发问答here besides the one on jsfiddle?

---

the idea is quite simple. you break up the screen with some elements, it does not really matter which (say divs) with a given height.

then attach a onclick event to the handle that starts the drag. what the onclick does is attach a mousemove event to the body which will resize the elements.

here is something i wrote a while back (before my jquery days), i'm sure it could be written much better, and you might find a plugin for this, i don't know of one:

function WidenHandle(widenedELement, handleElement, ondblClick, startWidth, withCoverDiv, onDrop)
{
    this.Handle = handleElement;
    this.IsClosed = false;
    this.Element = widenedELement;
    this.LastX = 0;
    this.LastY = 0;
    this.AttachedDragFunction = null;
    this.AttachedDropFunction = null;
    this.StartWidth = startWidth ? startWidth : 300;
    this.CoverDiv;
    this.OnDrop = onDrop;
    this.IsDragging = false;
    if (withCoverDiv)
    {
        var coverDiv = document.createElement("div");
        coverDiv.style.width = "2000px";
        coverDiv.style.height = "2000px";
        coverDiv.style.display = "none";
        coverDiv.style.position = "fixed";
        coverDiv.style.zIndex = "1000";
//        coverDiv.style.backgroundColor = "red";
//        coverDiv.style.opacity = "0.3";
        coverDiv.style.top = '0px';
        this.CoverDiv = coverDiv;
        document.body.appendChild(coverDiv);
    }

    if (this.Handle.addEventListener)
    {
        this.Handle.addEventListener("mousedown", function(element)
        {
            return function(event)
            {
                element.StartDragging(event);
                if (element.CoverDiv)
                    element.CoverDiv.style.display = "";
                if (event.preventDefault)
                    event.preventDefault();
          }
        } (this), true);

        this.Handle.addEventListener("dblclick", function(element)
        {
            return function(event)
            {
                element.Close(event);
                if (element.CoverDiv)
                    element.CoverDiv.style.display = "none";
                ondblClick(element);
            }
        } (this), true);
    }
    else
    {
        this.Handle.attachEvent("onmousedown", function(element)
        {
            return function(event)
            {
                element.StartDragging(event);
                if (element.CoverDiv)
                        element.CoverDiv.style.display = "";
                if (event.preventDefault)
                    event.preventDefault();
            }
        } (this));

        this.Handle.attachEvent("ondblclick", function(element)
        {
            return function(event)
            {
                element.Close(event);
                if (element.CoverDiv)
                    element.CoverDiv.style.display = "none";
                ondblClick(element);
            }
        } (this), true);
    }
}

WidenHandle.prototype.StartDragging = function(event)
{
    this.IsDragging = true;
    if (this.CoverDiv)
        this.CoverDiv.style.display = "none";
    this.ClearAttachedEvents();

    this.LastX = this.GetX(event);
    // ** attach mouse move and mouse up events to document ** //
    this.AttachedDragFunction = function(element)
    {
        return function(event)
        {
            element.OnDragging(event);
        }
    } (this);

    this.AttachedDropFunction = function(element)
    {
        return function(event)
        {
            element.OnDropping(event);
        }
    } (this);

    if (window.attachEvent) // ie
    {
        document.attachEvent('onmousemove', this.AttachedDragFunction);
        document.attachEvent('onmouseup', this.AttachedDropFunction);
    }
    else // ff
    {
        document.onmousemove = this.AttachedDragFunction;
        document.onmouseup = this.AttachedDropFunction;
    }
}
// ** for repositioning popup while dragging ** //
WidenHandle.prototype.OnDragging = function(event)
{
    clearHtmlSelection();
    this.WidenCell(event);
}

// ** for release popup movement when dropping ** //
WidenHandle.prototype.OnDropping = function(event)
{
    this.IsDragging = false;
    if (this.CoverDiv)
        this.CoverDiv.style.display = "none";

    this.ClearAttachedEvents();

    if (this.OnDrop)
        this.OnDrop();
}

WidenHandle.prototype.ClearAttachedEvents = function()
{
    // ** detach events from document ** //
    if (window.attachEvent) // ie
    {
        document.detachEvent('onmousemove', this.AttachedDragFunction);
        document.detachEvent('onmouseup', this.AttachedDropFunction);
    }
    else // ff
    {
        document.onmousemove = null;
        document.onmouseup = null;
    }
}

WidenHandle.prototype.GetX = function(event)
{
    // ** return x position of mouse ** //
    var posx = 0;

    if (!event) event = window.event;
    if (event.pageX)
    {
        posx = event.pageX;
    }
    else if (event.clientX)
    {
        posx = event.clientX;
    }

    return posx;
}

WidenHandle.prototype.WidenCell = function(event)
{
    if (!this.Element.style.width)
        this.Element.style.width = this.Element.offsetWidth - 9 + "px";

    var width = parseInt(this.Element.style.width) + (this.GetX(event) - this.LastX);
    if (width > 13)
        this.Element.style.width = width + "px";

    // ** remember last mouse position ** //
    this.LastX = this.GetX(event);
}

WidenHandle.prototype.Close = function(event)
{
    var width = parseInt(this.Element.style.width);
    if (width < 30)
    {
        this.IsClosed = false;
        this.Element.style.width = "";
            return;
//        width = this.StartWidth;
    }
    else
    {
        width = 14;
        this.IsClosed = true;
    }
    this.Element.style.width = width + "px";
}

function clearHtmlSelection()
{
    var sel;
    if (document.selection && document.selection.empty)
    {
        document.selection.empty();
    }
    else if (window.getSelection)
    {
        sel = window.getSelection();
        if (sel && sel.removeAllRanges) sel.removeAllRanges();
    }
}