使用滑动面板分割器将HTML页面分割成不同的部分？它是如何完成的？

Question

我想将网页分成不同的部分，如图所示here。我试图弄清楚这种技术被称为什么，并且是一种有效的实现方法？

页面被分成不同的部分，赋予用户灵活性以使用面板手柄扩展和缩小不同部分。

我假设这些不是常规框架（我想避免使用反正）。

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