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
<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}
.folder1 
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>11
onload=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
//[容器,高,宽,展开速度]23
function 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
//为目录内容设置Slide77
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
