可調頁面劃分邊界

我在我的HTML頁面中有兩列。可調頁面劃分邊界

<div id="content"> 
    <div id="left"></div> 
    <div id="right"></div> 
</div>

他們每個人都佔據了網頁的一半

#content { 
    height: 100%; 
} 

#left, #right { 
    float: left; 
    width: 50%; 
    height: 100%; 
    overflow: auto; 
}

我想左，右兩半之間的邊界是由用戶調節。也就是說，用戶可以在他/她瀏覽頁面時將邊界向左或向右移動。以某種方式可以做到這一點嗎？

來源

2013-03-16 Mika H.

是的，是的，它是。 – 2013-03-16 22:52:07

您正在描述通常稱爲「分割窗格」的內容。 http://stackoverflow.com/questions/12194469/best-way-to-do-a-split-pane-in-html – 2013-03-16 22:56:06

我討厭成爲所有「骨架」......但有一些那裏的框架爲你提供這個... ExtJS，jQuery，dojo – 2013-03-16 23:23:27

是的，但它需要JavaScript。要應用它，你當然可以只設置各邊的width：

var leftPercent = 50; 
function updateDivision() { 
    document.getElementById('left').style.width = leftPercent + '%'; 
    document.getElementById('right').style.width = (100 - leftPercent) + '%'; 
}

現在你可以調整師帶，說leftPercent = 50; updateDivision()，但用戶不打算這樣做。有多種不同的方式可以將其呈現給用戶。可能最適合的方式是在他們可能拖動的中間位置設置一條小線。對於這一點，你可以使用一些CSS的定位：

#content { 
    position: relative; 
} 
#divider { 
    position: absolute; 
    /* left to be set by JavaScript */ 
    width: 1px; 
    top: 0; 
    bottom: 0; 
    background: black; 
    cursor: col-resize; 
    /* feel free to customize this, of course */ 
}

，然後確保你在content得到了div與divider的id和更新updateDivision同時更新divider的left：

document.getElementById('left').style.left = leftPercent + '%';

然後你只需要一個小邏輯來處理拖動。（在這裏，我已經把所有的元素融入到適當命名變量）：

divider.addEventListener('mousedown', function(e) { 
    e.preventDefault(); 
    var lastX = e.pageX; 
    document.documentElement.addEventListener('mousemove', moveHandler, true); 
    document.documentElement.addEventListener('mouseup', upHandler, true); 
    function moveHandler(e) { 
     e.preventDefault(); 
     e.stopPropagation(); 
     var deltaX = e.pageX - lastX; 
     lastX = e.pageX; 
     leftPercent += deltaX/parseFloat(document.defaultView.getComputedStyle(content).width) * 100; 
     updateDivision(); 
    } 
    function upHandler(e) { 
     e.preventDefault(); 
     e.stopPropagation(); 
     document.documentElement.removeEventListener('mousemove', moveHandler, true); 
     document.documentElement.removeEventListener('mouseup', upHandler, true); 
    } 
}, false);

你應該能夠閱讀它，看看它是如何工作的，但在短期：它偵聽當有人壓在分頻器。當他們這樣做時，它會在用戶移動鼠標時將監聽器附加到頁面上。當他們這樣做時，它會更新變量並調用updateDivision來更新樣式。當最終獲得mouseup時，它會停止在頁面上進行偵聽。

作爲進一步的改進，您可以讓每個元素在拖動時都有相應的cursor樣式，以便在拖動時您的光標不會閃爍。

Try it out.

來源

2013-03-16 23:13:00 icktoofay

-2

分部沒有什麼東西會發生。這就像寫：

<h1></h1>

和更改H1 CSS和期待的東西在那裏

來源

2013-03-16 23:12:50 Max

可調頁面劃分邊界

回答

相關問題