Разделить HTML-страницу на разные разделы с помощью раздвижных панелей? Как это сделать?

Question

Я хочу разделить веб-страницу на несколько разделов, как показано здесь. Я пытаюсь выяснить, как называется эта техника и эффективный способ ее реализации?

Страница разделена на различные разделы, что дает пользователю гибкость в расширении и сокращении различных разделов с помощью ручек панели.

Я предполагаю, что это не обычные кадры (которые я хотел бы избежать в любом случае).

Кто-нибудь знает учебник или хороший пример, кроме как на jsfiddle?

Answer 1

Идея довольно проста. Вы разбиваете экран с некоторыми элементами, на самом деле не имеет значения, какой (скажем, div) с заданной высотой.

затем прикрепите событие onclick к дескриптору, который начинает перетаскивание. то, что делает onclick, это прикрепляет событие mousemove к телу, которое изменяет размеры элементов.

Вот кое-что, что я написал некоторое время назад (до моих дней jquery), я уверен, что это могло бы быть написано намного лучше, и вы могли бы найти плагин для этого, я не знаю одного:

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();
    }
}