1
그래서 여기 MSDN "가상 프레임"을 복제하려고합니다. 그들의 페이지는 are laid out처럼 오래된 학교 프레임 셋을 사용하고 있지만, 방화범이 끌리는 요소를 검사하면 순전히 div로이 작업을 수행 한 것으로 드러납니다.MSDN "pseudoframe"
여기 내 시도입니다. 완벽하지는 않지만 크롬과 파이어 폭스에서만 작동합니다. 내가 좋아하지 않는 이상한 하이라이트 선택 동작이 있습니다. 당신이 jQuery에 익숙하다면
<!doctype html>
<html>
<head>
<title>msdn "pseudoframe"</title>
<style>
body
{
background-color: #aaa;
margin: 0;
padding: 0;
}
div#pseudoframe, div#main
{
border: solid 1px black;
background-color: #fff;
}
div#pseudoframe
{
position: absolute;
left: 0;
width: 180px;
height: 100%;
overflow-x: auto;
overflow-y: none;
}
div#sizeMod
{
background-color: #a0a;
position: absolute;
left: 220px;
height: 100%;
cursor: e-resize;
}
div#main
{
font-weight: bold;
font-size: 2em;
padding: 24px;
margin-left: 224px;
}
</style>
<script type="text/javascript">
function initialize()
{
// get the pseudoframe and attach an event to the mouse flyover.
var pf = document.getElementById('pseudoframe');
var main = document.getElementById('main');
var resize = document.getElementById('sizeMod');
pf['onmouseover'] = function(event)
{
event = event || window.event;
var el = event.srcElement || event.target ;
// are we within 5 px of the border? if we are,
// change the mouse cursor to resize.
};
pf['onscroll'] = function(event)
{
event = event || window.event;
var el = event.srcElement || event.target ;
var sizeMod = document.getElementById('sizeMod');
//alert(el.scrollLeft);
sizeMod.style.right = '-' + (el.scrollLeft) + 'px';
//alert(sizeMod.style.right);
// are we within 5 px of the border? if we are,
// change the mouse cursor to resize.
};
resize['onmousedown'] = function(event)
{
event = event || window.event;
var el = event.srcElement || event.target ;
window.lockResize = true;
};
window['onmouseup'] = function(event)
{
event = event || window.event;
var el = event.srcElement || event.target ;
window.lockResize = false; //release on any mouse up event
//alert('unlocked');
};
window['onmousemove'] = function(event)
{
event = event || window.event;
var el = event.srcElement || event.target ;
if(window.lockResize == true)
{
// resize. get client x and y.
var x = event.clientX;
var y = event.clientY;
pf.style.width = x + 'px';
resize.style.left = x + 'px';
main.style.marginLeft = x + 'px';
//alert(pf.style.width);
event.stopPropagation();
event.preventDefault();
return false;
}
};
}
</script>
</head>
<body onload=" initialize(); ">
<div id="pseudoframe">
<ul>
<li>Code</li>
<li>MICROSOFT CODE
<ul>
<li>WINDOWS XP SOURCE</li>
<li>WINDOWS VISTA SOURCE</li>
<li>WINDOWS 7 SOURCE</li>
<li>WINDOWS 8 SOURCE</li>
</ul>
</li>
<li>DOWNLOAD ALL MICROSOFT CODE EVER WRITTEN</li>
<li>DOWNLOAD ALL MAC OS CODE EVER WRITTEN</li>
<li>DOWNLOAD ALL AMIGA GAME CONSOLE CODE</li>
<li>DOWNLOAD ALL CODE EVER WRITTEN PERIOD</li>
</ul>
</div>
<div id="sizeMod"> </div>
<div id="main">
lorem ipsum microsoft pseudoframe
lorem ipsum microsoft pseudoframe
lorem ipsum microsoft pseudoframe
lorem ipsum microsoft pseudoframe
lorem ipsum microsoft pseudoframe
lorem ipsum microsoft pseudoframe
lorem ipsum microsoft pseudoframe
lorem ipsum microsoft pseudoframe
lorem ipsum microsoft pseudoframe
</div>
</body>
</html>
참고 : ['Classic']을 선택하면 MSDN에서이 기능을 볼 수 있습니다 (http://msdn.microsoft.com/en-us/library/preferences/experience/?returnurl=%252fen- 우리 % 252flibrary % 252fms724408 % 28v % 253dVS.85 % 29.aspx)보기. – BalusC