对象化JS之 －－仿outlook或者QQ的菜单
2007-12-06 09:40:21 来源：WEB开发网 闂傚倸鍊搁崐椋庢濮橆兗缂氱憸宥堢亱闂佸湱铏庨崰鏍不椤栫偞鐓ラ柣鏇炲€圭€氾拷
闂傚倸鍊搁崐椋庣矆娓氣偓楠炲鏁撻悩鎻掔€梺姹囧灩閻忔艾鐣烽弻銉︾厵闁规鍠栭。濂告煕鎼达紕校闁靛洤瀚伴獮鎺楀箣濠靛啫浜鹃柣銏⑶圭壕濠氭煙閻愵剚鐏辨俊鎻掔墛缁绘盯宕卞Δ鍐冣剝绻涘畝濠佺敖缂佽鲸鎹囧畷鎺戭潩閹典焦鐎搁梻浣烘嚀閸ゆ牠骞忛敓锟�
婵犵數濮烽弫鍛婃叏椤撱垹绠柛鎰靛枛瀹告繃銇勯幘瀵哥畼闁硅娲熷缁樼瑹閳ь剙岣胯鐓ら柕鍫濇偪濞差亜惟闁宠桨鑳堕崝锕€顪冮妶鍡楃瑐闁煎啿鐖奸崺濠囧即閵忥紕鍘梺鎼炲劗閺呮稒绂掕缁辨帗娼忛埡浣锋闂佽桨鐒﹂幑鍥极閹剧粯鏅搁柨鐕傛嫹闂傚倸鍊搁崐椋庢濮橆兗缂氱憸宥堢亱闂佸湱铏庨崰鏍不椤栫偞鐓ラ柣鏇炲€圭€氾拷 闂傚倸鍊搁崐鐑芥嚄閼哥數浠氱紓鍌欒兌缁垶銆冮崨鏉戠厺鐎广儱顦崡鎶芥煏韫囨洖校闁诲寒鍓熷铏圭磼濡搫顫岄梺鍦拡閸嬪棝鎯€椤忓浂妯勯梺鍝勬湰濞叉ḿ鎹㈠┑濠勭杸闁哄洨濮烽悰銉╂⒒娴ｅ搫甯跺鐟帮攻缁傚秴饪伴崼姘ｅ亾閺冨牆绀冩い蹇庣娴滈箖鏌ㄥ┑鍡涱€楀褜鍠栭湁闁绘ɑ鐟ョ€氼喚绮绘ィ鍐╃厱妞ゆ劑鍊曢弸搴ㄦ煟韫囧鍔滈柕鍥у瀵潙螣閸濆嫬袝婵＄偑鍊戦崹娲偡閳哄懎绠栭柍鈺佸暞閸庣喖鏌曢崶褍绨婚柟鍑ゆ嫹
<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 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>;
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 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>;
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>
中查找“对象化JS之 －－仿outlook或者QQ的菜单”更多相关内容
中查找“对象化JS之 －－仿outlook或者QQ的菜单”更多相关内容更多精彩
赞助商链接
