1
Ainsi, j'essaye de répliquer des "pseudoframes" de MSDN ici. Leurs pages are laid out comme ils utilisent un jeu de cadres old-school, mais inspecter leurs éléments avec firebug révèle qu'ils l'ont fait avec purement div.MSDN "pseudoframe"
Voici ma tentative. Ce n'est pas parfait cependant, il ne fonctionne que dans Chrome et Firefox, il a ce comportement de sélection de surbrillance étrange que je n'aime pas, tout preneur?
<!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>
Remarque: vous ne pouvez le voir dans l'action à MSDN lorsque vous choisissez le ['Classic'] (http://msdn.microsoft.com/en-us/library/preferences/experience/?returnurl=%252fen- us% 252flibrary% 252fms724408% 28v% 253dVS.85% 29.aspx) Voir. – BalusC