所以,我在这里尝试复制msdn“伪帧”。他们的页面
are laid out
就像他们使用的是一个旧的框架集,但是用Firebug检查他们的元素可以发现他们使用的是纯粹的DIV。
这是我的尝试。不过,这并不完美,它只在Chrome和Firefox中工作,它有一个我不喜欢的奇怪的突出显示选择行为,有没有人喜欢?
<!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>
