分享
 
 
 

对象化JS之----仿outlook或者QQ的菜单

王朝html/css/js·作者佚名  2006-01-08
窄屏简体版  字體: |||超大  

<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>

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有