< html > < head > < meta http-equiv ='Content-Type' content ='text/html; charset =gb2312' > < style type ='text/css' > ... .folder1 {...}{text-align:center; background: #00A4E1; border: 2px outset; background-image:url(Images/skin/folder_bg.gif); border-color: #00BBFF #0077FF #FFFFFF #00BBFF; cursor: hand; font-size: 9pt}.folder2 {...}{text-align:center; background: #20C1FF; border: 2px outset; background-image:url(Images/skin/folder_bg.gif); border-color: #00BBFF #0077FF #0077FF #60D3FF; cursor: hand; font-size: 9pt}.foldercont{...}{background: #D9ECF4; border: 1px outset; border-color: #B0D8FF #0077FF #0077FF #B0D8FF; font-size: 9pt; cursor: default;} </ style > < SCRIPT LANGUAGE =javascript > ... onload=function()...{ var lstr = "" for (var i=0; i<30; i++) lstr+= "haha..<br>"; var lofolder = new outlookfolder(null,335,100,15); lofolder.addfolder("菜单1","1..<br>2.."); lofolder.addfolder("菜单2",lstr); lofolder.addfolder("菜单3"); lofolder.addfolder("菜单4"); lofolder.addfolder("菜单5"); lofolder.showfolderX(0);} //[容器,高,宽,展开速度]function outlookfolder(aoP,aih,aiw,ait)...{ if (aih==null) aih=200; if (aiw==null) aiw="100%"; if (ait==null) ait=10; var loMain = document.createElement("<span style='overflow:hidden;height:"+aih+";width:"+aiw+"'></span>"); var lsUniqueID = loMain.uniqueID; var loSlide = document.createElement("span"); loSlide.innerHTML = "<button οnmοuseοut='"+lsUniqueID+".SlideClickStop()' οnmοusedοwn='"+lsUniqueID+".SlideClickStart();"+lsUniqueID+".SlideCilckup()' style='position:absolute;display:none;width:10;height:10'></button><button οnmοuseοut='"+lsUniqueID+".SlideClickStop()' οnmοusedοwn='"+lsUniqueID+".SlideClickStart();"+lsUniqueID+".SlideCilckdown()' style='position:absolute;display:none;width:10;height:10'></button>"; var liContH = aih; if (aoP==null)...{ document.body.appendChild(loMain); document.body.appendChild(loSlide); }else...{ aoP.appendChild(loMain); aoP.appendChild(loSlide); } //增加一个目录[名字,内容] loMain.addfolder = function(str,cont)...{ var loPar = document.createElement("SPAN"); loPar.innerHTML = "<span οnclick='"+lsUniqueID+".showme(this)' style='overflow:hidden;width:100%;' class='folder1'></span><span style='position:relative;overflow:hidden;width:100%;height:1' class='foldercont'></span>"; this.appendChild(loPar); loPar.children[0].innerHTML = (str==null?" ":str); loPar.children[1].innerHTML = (cont==null?" ":cont); liContH -= parseInt(loPar.children[0].offsetHeight); } //打开/关闭第x个目录夹 loMain.showfolderX = function(aix)...{ loMain.showme(loMain.children[aix].children[0]) } //打开/关闭当前obj所在的目录 loMain.showme = function(obj)...{ if (loMain.moving) return; loMain.moving = true; if (obj.bOpen)...{ obj.bOpen = false; loMain.closefolder(obj.parentElement.children[1]); obj.className = 'folder1'; }else...{ obj.bOpen = true; loMain.openfolder(obj.parentElement.children[1]); obj.className = 'folder2'; var lxfolders = loMain.children; for (var i=0; i<lxfolders.length; i++)...{ var loChild = lxfolders[i].children[0]; if(loChild.uniqueID!=obj.uniqueID)...{ lxfolders[i].children[1].style.height=1; loChild.bOpen = false; loChild.className = 'folder1'; } } } loMain.SlideItemsAction(obj.parentElement.children[1]); } //为目录内容设置Slide var loSlideItem = null; var lbSlideing = false; loMain.SlideCilckdown = function()...{ //向下滚动 loSlideItem.scrollTop += 2; if (!lbSlideing&&loSlideItem.scrollTop<loSlideItem.scrollHeight) setTimeout(lsUniqueID+'.SlideCilckdown()',1) } loMain.SlideCilckup = function()...{ //向上滚动 loSlideItem.scrollTop -= 2; if (!lbSlideing&&loSlideItem.scrollTop>0) setTimeout(lsUniqueID+'.SlideCilckup()',1) } loMain.SlideClickStart = function()...{ //允许开始滚动 lbSlideing=false; } loMain.SlideClickStop = function()...{ //强制停止滚动 lbSlideing=true; } loMain.SlideItemsAction = function(obj)...{ var loUp = loSlide.children[0]; var loDown = loSlide.children[1]; if (obj.scrollHeight<=liContH||obj.parentElement.children[0].bOpen!=true)...{ loUp.style.display="none"; loDown.style.display="none"; }else...{ loSlideItem = obj; var lxOffset = getTrueOffset(obj); var lileft = lxOffset[0]+obj.offsetWidth-20; var litop = lxOffset[1]+obj.offsetHeight+5; with(loUp.style)...{ display=""; left=lileft; top=litop; } with(loDown.style)...{ display=""; left=lileft; top=litop+liContH-40; } } } //逐渐关闭obj所在的内容显示 loMain.closefolder = function(obj,ai)...{ if (ai==null) ai=liContH; if (ai<ait)...{ obj.style.height=1; ai=1} if (ai>1)...{ obj.style.height = ai; ai -= ait; setTimeout(lsUniqueID+'.closefolder('+obj.uniqueID+','+ai+')',1) return; } loMain.moving = false; } //逐渐打开obj所在的内容显示 loMain.openfolder = function(obj,ai)...{ if (ai==null) ai=1; if (liContH>ai)...{ obj.style.height = ai; ai += ait; setTimeout(lsUniqueID+'.openfolder('+obj.uniqueID+','+ai+')',1) return; } loMain.moving = false; } function getTrueOffset(e)...{ var x=0; var y=0; if(!e)return [x,y]; while(e)...{ x+=parseInt(e.offsetLeft); y+=parseInt(e.offsetTop); e=e.offsetParent; } return [x,y]; } return loMain;} </ SCRIPT >