使用滑動面板分割器將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(); 
    } 
}