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>";
43this.appendChild(loPar);
44loPar.children.innerHTML = (str==null?" ":str);
45loPar.children.innerHTML = (cont==null?" ":cont);
46liContH -= parseInt(loPar.children.offsetHeight);
47 }
48 //打开／关闭第x个目录夹
49 loMain.showfolderX = function(aix){
50loMain.showme(loMain.children.children)
51 }
52 //打开/关闭当前obj所在的目录
53 loMain.showme = function(obj){
54if (loMain.moving) return;
55loMain.moving = true;
56if (obj.bOpen){
57 obj.bOpen = false;
58 loMain.closefolder(obj.parentElement.children);
59 obj.className = 'folder1';
60}else{
61 obj.bOpen = true;
62 loMain.openfolder(obj.parentElement.children);
63 obj.className = 'folder2';
64 var lxfolders = loMain.children;
65 for (var i=0; i<lxfolders.length; i++){
66 var loChild = lxfolders.children;
67 if(loChild.uniqueID!=obj.uniqueID){
68 lxfolders.children.style.height=1;
69 loChild.bOpen = false;
70 loChild.className = 'folder1';
71 }
72 }
73}
74loMain.SlideItemsAction(obj.parentElement.children);
75 }
76 //为目录内容设置Slide
77 var loSlideItem = null;
78 var lbSlideing = false;
79 loMain.SlideCilckdown = function(){//向下滚动
80loSlideItem.scrollTop += 2;
81if (!lbSlideing&&loSlideItem.scrollTop<loSlideItem.scrollHeight) setTimeout(lsUniqueID+'.SlideCilckdown()',1)
82 }
83 loMain.SlideCilckup = function(){//向上滚动
84loSlideItem.scrollTop -= 2;
85if (!lbSlideing&&loSlideItem.scrollTop>0) setTimeout(lsUniqueID+'.SlideCilckup()',1)
86 }
87 loMain.SlideClickStart = function(){ //允许开始滚动
88lbSlideing=false;
89 }
90 loMain.SlideClickStop = function(){//强制停止滚动
91lbSlideing=true;
92 }
93 loMain.SlideItemsAction = function(obj){
94var loUp = loSlide.children;
95var loDown = loSlide.children;
96if (obj.scrollHeight<=liContH||obj.parentElement.children.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+obj.offsetWidth-20;
103 var litop= lxOffset+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){
118if (ai==null) ai=liContH;
119if (ai<ait){ obj.style.height=1; ai=1}
120if (ai>1){
121 obj.style.height = ai;
122 ai -= ait;
123 setTimeout(lsUniqueID+'.closefolder('+obj.uniqueID+','+ai+')',1)
124 return;
125}
126loMain.moving = false;
127 }
128 //逐渐打开obj所在的内容显示
129 loMain.openfolder = function(obj,ai){
130if (ai==null) ai=1;
131if (liContH>ai){
132 obj.style.height = ai;
133 ai += ait;
134 setTimeout(lsUniqueID+'.openfolder('+obj.uniqueID+','+ai+')',1)
135 return;
136}
137loMain.moving = false;
138 }
139 function getTrueOffset(e){
140 var x=0; var y=0;
141 if(!e)return ;
142 while(e){
143 x+=parseInt(e.offsetLeft);
144 y+=parseInt(e.offsetTop);
145 e=e.offsetParent;
146 }
147 return ;
148}
149return loMain;
150}
151</SCRIPT>
152
页:
[1]