スライディングパネルディバイダを使用してHTMLページを別のセクションに分割しますか？どうしたの？

Question

hereのように、Webページを別のセクションに分割したいと考えています。私はこの技法が何と呼ばれ、それを実装する効率的な方法を理解しようとしていますか？

ページは異なるセクションに分割され、パネルハンドルを使用してさまざまなセクションを展開および縮小する柔軟性がユーザーに与えられます。

私はこれが通常のフレームではないと仮定しています（私はとにかく使用しないでください）。

誰かがjsfiddleにあるもの以外にチュートリアルや良い例を知っていますか？

Answer 1

アイデアはかなりシンプルです。 あなたはいくつかの要素で画面を分割しますが、与えられた高さでどのdiv要素をどういう意味で使うかは問題になりません。

ドラッグを開始するハンドルにonclickイベントをアタッチします。 onclickが行うことは、要素のサイズを変更するmousemoveイベントをボディに付加することです。ここ

は（私のjqueryの日の前に）私はしばらく前に書いたものです、私はそれがはるかに優れて書くことができます確信している、とあなたは、このためのプラグインを見つけるかもしれないが、私は1つの知らない：

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