问MSDN“伪框架”
EN

Stack Overflow用户

提问于 2010-05-16 06:42:55

回答 1查看 103关注 0票数 1

所以，我正试图在这里复制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">&nbsp;&nbsp;</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>

javascript

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2010-05-16 07:41:06

如果您熟悉jQuery，那么您可以使用this Splitter plugin。你可以看到一个现场演示here。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/2842004

复制

相似问题

问MSDN“伪框架”
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问MSDN“伪框架”EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问MSDN“伪框架”
EN