QQ菜单OUTLOOK风格

  1<html>
  2<head>
  3<meta http-equiv='Content-Type' content='text/html; charset=gb2312'>
  4<style type='text/css'>
  5.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}
  6.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}
  7.foldercont{}{background: #D9ECF4; border: 1px outset; border-color: #B0D8FF #0077FF #0077FF #B0D8FF; font-size: 9pt; cursor: default;}
  8</style>
  9
 10<SCRIPT LANGUAGE=javascript>
 11onload=function(){
 12 var lstr = ""
 13 for (var i=0; i<30; i++) lstr+= "haha..<br>";
 14 var lofolder = new outlookfolder(null,335,100,15);
 15 lofolder.addfolder("菜单1","1..<br>2..");
 16 lofolder.addfolder("菜单2",lstr);
 17 lofolder.addfolder("菜单3");
 18 lofolder.addfolder("菜单4");
 19 lofolder.addfolder("菜单5");
 20 lofolder.showfolderX(0);
 21}
 22     //[容器,高,宽,展开速度]
 23function outlookfolder(aoP,aih,aiw,ait){
 24 if (aih==null) aih=400;
 25 if (aiw==null) aiw="100%";
 26 if (ait==null) ait=20;
 27 var loMain  = document.createElement("<span style='overflow:hidden;height:"+aih+";width:"+aiw+"'></span>");
 28    var lsUniqueID = loMain.uniqueID;
 29 var loSlide = document.createElement("span");
 30    loSlide.innerHTML = "<button onmouseout='"+lsUniqueID+".SlideClickStop()' onmousedown='"+lsUniqueID+".SlideClickStart();"+lsUniqueID+".SlideCilckup()' style='position:absolute;display:none;width:10;height:10'></button><button onmouseout='"+lsUniqueID+".SlideClickStop()' onmousedown='"+lsUniqueID+".SlideClickStart();"+lsUniqueID+".SlideCilckdown()' style='position:absolute;display:none;width:10;height:10'></button>";
 31 var liContH = aih;
 32    if (aoP==null){
 33        document.body.appendChild(loMain);
 34        document.body.appendChild(loSlide);
 35    }else{
 36        aoP.appendChild(loMain);
 37        aoP.appendChild(loSlide);
 38    }
 39         //增加一个目录[名字,内容]
 40    loMain.addfolder = function(str,cont){
 41     var loPar = document.createElement("SPAN");
 42     loPar.innerHTML = "<span onclick='"+lsUniqueID+".showme(this)' style='overflow:hidden;width:100%;' class='folder1'></span><span style='position:relative;overflow:hidden;width:100%;height:1' class='foldercont'></span>";
 43  this.appendChild(loPar);
 44  loPar.children[0].innerHTML = (str==null?"　":str);
 45  loPar.children[1].innerHTML = (cont==null?"　":cont);
 46  liContH -= parseInt(loPar.children[0].offsetHeight);
 47    }
 48         //打开／关闭第x个目录夹
 49 loMain.showfolderX = function(aix){
 50  loMain.showme(loMain.children[aix].children[0])
 51 }
 52      //打开/关闭当前obj所在的目录
 53    loMain.showme = function(obj){
 54  if (loMain.moving) return;
 55  loMain.moving = true;
 56  if (obj.bOpen){
 57   obj.bOpen = false;
 58   loMain.closefolder(obj.parentElement.children[1]);
 59   obj.className = 'folder1';
 60  }else{
 61   obj.bOpen = true;
 62   loMain.openfolder(obj.parentElement.children[1]); 
 63   obj.className = 'folder2';
 64   var lxfolders = loMain.children;
 65   for (var i=0; i<lxfolders.length; i++){
 66    var loChild = lxfolders[i].children[0];
 67    if(loChild.uniqueID!=obj.uniqueID){
 68     lxfolders[i].children[1].style.height=1;
 69     loChild.bOpen = false;
 70     loChild.className = 'folder1';
 71    }
 72   }
 73  }
 74  loMain.SlideItemsAction(obj.parentElement.children[1]);
 75    }
 76         //为目录内容设置Slide
 77    var loSlideItem = null;
 78 var lbSlideing = false;
 79 loMain.SlideCilckdown = function(){  //向下滚动
 80  loSlideItem.scrollTop += 2;
 81  if (!lbSlideing&&loSlideItem.scrollTop<loSlideItem.scrollHeight) setTimeout(lsUniqueID+'.SlideCilckdown()',1)
 82 }
 83 loMain.SlideCilckup = function(){  //向上滚动
 84  loSlideItem.scrollTop -= 2;
 85  if (!lbSlideing&&loSlideItem.scrollTop>0) setTimeout(lsUniqueID+'.SlideCilckup()',1)
 86 }
 87 loMain.SlideClickStart = function(){ //允许开始滚动
 88  lbSlideing=false;
 89 }
 90 loMain.SlideClickStop = function(){  //强制停止滚动
 91  lbSlideing=true;
 92 }
 93    loMain.SlideItemsAction = function(obj){
 94  var loUp   = loSlide.children[0];
 95  var loDown = loSlide.children[1];
 96  if (obj.scrollHeight<=liContH||obj.parentElement.children[0].bOpen!=true){
 97   loUp.style.display="none";
 98   loDown.style.display="none";
 99  }else{
100   loSlideItem = obj;
101   var lxOffset = getTrueOffset(obj);
102   var lileft = lxOffset[0]+obj.offsetWidth-20;
103   var litop  = lxOffset[1]+obj.offsetHeight+5;
104   with(loUp.style){
105    display="";
106    left=lileft;
107    top=litop;
108   }
109   with(loDown.style){
110    display="";
111    left=lileft;
112    top=litop+liContH-40;
113   }
114  }
115    }
116        //逐渐关闭obj所在的内容显示
117 loMain.closefolder = function(obj,ai){
118  if (ai==null) ai=liContH;
119  if (ai<ait){ obj.style.height=1; ai=1}
120  if (ai>1){
121   obj.style.height = ai;
122   ai -= ait;
123   setTimeout(lsUniqueID+'.closefolder('+obj.uniqueID+','+ai+')',1)
124   return;
125  }
126  loMain.moving = false;
127 }
128     //逐渐打开obj所在的内容显示
129 loMain.openfolder = function(obj,ai){
130  if (ai==null) ai=1;
131  if (liContH>ai){
132   obj.style.height = ai;
133   ai += ait;
134   setTimeout(lsUniqueID+'.openfolder('+obj.uniqueID+','+ai+')',1)
135   return;
136  }
137  loMain.moving = false;
138 }
139 function getTrueOffset(e){
140    var x=0; var y=0;
141    if(!e)return [x,y];
142    while(e){
143      x+=parseInt(e.offsetLeft);
144      y+=parseInt(e.offsetTop);
145      e=e.offsetParent;
146   }
147   return [x,y];
148  }
149  return loMain;
150}
151</SCRIPT>
152
posted @ 2007-09-14 10:58  天纯蓝  阅读(542)  评论(0)    收藏  举报