这个菜单是怎么实现的

Question

http://www.flyinweb.com/dzh/dzh.htm
左边的菜单可以折叠,是怎么实现的,是AJAX的工具吗,是什么工具,还可以拖大拖小

Answer 1

csdn的也可以来回拽， 可大可小的。就是简单地框架。

Answer 2

来回拽的是框架-- 折叠应该是js+css(个人意见)

Answer 3

我看也是框架。。然后折叠的话，用treeview控件就OK了啊

Answer 4

你保存下网页，在文件夹里的dzh.js文件就有实现的代码

Answer 5

这个我知道,我想上CSDN的人都知道,谁可以给我代码吗,

Answer 6

js 设置左框架的宽度为1px 或为200px

Answer 7

框架+JS
参考 梅花雪 的js。
http://www.51aspx.com/CV/NetFocus,Web,Utility,TreeView.js.html

Answer 8

看原文件就知道是框架做的:<iframe id="contentFrame" name="mainFrame" src="Main.htm" width="100%" height="100%" vspace="0" hspace="0" marginwidth="0" marginheight="0" frameborder="0" scrolling="yes"></iframe>
做一个T型的框架就可以了.

Answer 9

对不起,我以为你说的是整个页面呢,左边的那个用js可以实现.
<div id="main" class=dragclass onselectstart="return false" ondblclick=go() title="展开时：双击折叠&#13;折叠时：单击展开">应用了一个go()js函数.

Answer 10

看他的go()函数的源码;function go()
{
if ($('leftTD').style.display == "")
{
$('leftTD').style.display = "none";
$('cheat').childNodes[0].style.backgroundPosition = 'left';
}
else
{
$('leftTD').style.display = "";
$('cheat').childNodes[0].style.backgroundPosition = 'right';
}
}

Answer 11

他的js全部代码
JavaScript Document
function $(d){return document.getElementById(d);}function GetOffset(e) 
{ 
var t=e.offsetTop; 
var l=e.offsetLeft;
while(e=e.offsetParent) 
{ 
t +=e.offsetTop;  
l +=e.offsetLeft;  
}
return [t,l];
}function go()
{
if ($('leftTD').style.display == "")
{
$('leftTD').style.display = "none";
$('cheat').childNodes[0].style.backgroundPosition = 'left';
}
else
{
$('leftTD').style.display = "";
$('cheat').childNodes[0].style.backgroundPosition = 'right';
}
}function trygo()
{
if ($('leftTD').style.display == "none") go();
}function tryclose()
{
if ($('leftTD').style.display == "") go();
}  if  (document.getElementById){
    (
      function(){
      
        var n = 500;
        var dragok = false;
        var y,x,d,dy,dx;
        
        function move(e)
        {
          if (!e) e = window.event;
          if (dragok){

var mainstyle=$('main').style;
  try{
var left = dx + e.clientX - x; if (left<160||left>750){
mainstyle.border='1px dashed #D0D8D9';
return;
}
else
{
mainstyle.border='';
} mainstyle.left=left;
mainstyle.position="absolute";
$('cheat').style.display='none';
return false;
  }
  catch(e){}
  }
        }
        
var shadowTimer;        function down(e){
          if (!e) e = window.event;

          var temp = (typeof e.target != "undefined")?e.target:e.srcElement;
          if (temp.tagName != "HTML"|"BODY" && temp.className != "dragclass"){
            temp = (typeof temp.parentNode != "undefined")?temp.parentNode:temp.parentElement;
          }
          if('TR'==temp.tagName){
            temp = (typeof temp.parentNode != "undefined")?temp.parentNode:temp.parentElement;
            temp = (typeof temp.parentNode != "undefined")?temp.parentNode:temp.parentElement;
            temp = (typeof temp.parentNode != "undefined")?temp.parentNode:temp.parentElement;
          }
        
          if (temp.className == "dragclass"){
            dragok = true;
            temp.style.zIndex = n;
            d = temp;
            dx = GetOffset(temp)[1];
dy = GetOffset(temp)[0];
            x = e.clientX;            document.onmousemove = move;
shadowTimer=window.setTimeout(function(){$('shadow').style.zIndex=100},150);
            return false;
          }
        }
        
        function up(){ if (dragok == true)
{
window.clearTimeout(shadowTimer); $('shadow').style.zIndex=-10;
$('cheat').style.display='';
$('main').style.height="100%";
$('main').style.border='';
$('main').style.position="static";
if ($('leftTD').style.display == "none")
{
$('leftTD').style.display = "";
$('cheat').childNodes[0].style.backgroundPositionX = 'right';
}
}
try{
var _$w = parseInt($('main').style.left) + "px";
$('leftTD').style.width = _$w;
$('subjects').style.width = _$w;
}catch(e){}
dragok = false; document.onmousemove = null;
        }
        
        document.onmousedown = down;
        document.onmouseup = up;
      
      }
    )();
  }
  
  
function Init()
{
BodyAutoFitHeight();
window.onresize = BodyAutoFitHeight;
window.setTimeout(BodyAutoFitHeight,3000); if($('navDirection'))
{
$('navDirection').onclick=function()
{
var cel=$('mainTable').rows[0].cells;
cel[0].swapNode(cel[2]);
this.innerText=(this.innerText.indexOf('右')>0?'导航在左':'导航在右');
}
}
}
  
function BodyAutoFitHeight()
{
$('subjects').style.height = document.body.clientHeight-120;//205;
$('mainTable').style.height = document.body.clientHeight-60;
}