Diviser la page HTML en différentes sections à l'aide de séparateurs à panneaux coulissants? Comment est-il fait?

Question

Je veux diviser une page Web en différentes sections comme indiqué here. J'essaie de comprendre ce que cette technique est appelée et un moyen efficace de l'appliquer?

La page est divisée en différentes sections donnant à l'utilisateur la flexibilité de dilater et de contracter les différentes sections à l'aide des poignées de panneau.

Je suppose que ce ne sont pas des cadres réguliers (que je voudrais éviter de toute façon).

Quelqu'un connaît-il un tutoriel ou un bon exemple là-bas en plus de celui sur jsfiddle?

Answer 1

l'idée est assez simple. vous cassez l'écran avec quelques éléments, peu importe (disons divs) avec une hauteur donnée.

puis d'associer un événement onclick à la poignée qui démarre le glissement. ce que l'onclick fait est d'attacher un événement mousemove au corps qui va redimensionner les éléments.

ici est quelque chose que je l'ai écrit un certain temps (avant mes jours jquery), je suis sûr qu'il pourrait être écrit beaucoup mieux, et vous pourriez trouver un plugin pour cela, je ne sais pas d'un:

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