仿OutLook或者QQ的菜单
我们在做开发时，经常要做表单验证，比如验证文本框必须填内容时，而文本框又很多时，传统的做法是逐个判断: if (form1.name.value == "") { alert("Sorry,please input your name!") form1.focus(); } 这样一来要写的代码太多了,有没有“偷懒”的方法呢，答案是肯定的，请看下面的代码：代码如下:
<html><head><title>仿OutLook或者QQ的菜单</title><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..1..<br>2..1..<br>2..1..<br>2..1..<br>2..1..<br>2..1..<br>2..1..<br>2..1..<br>2..1..<br>2..1..<br>2..1..<br>2..1..<br>2..1..<br>2..1..<br>2..1..<br>2..<br>2..<br>2..<br>2..<br>2..<br>2..<br>2..<br>2..<br>2..<br>2..<br>2..<br>2..<br>2..<br>2..<br>2..<br>2..<br>2..<br>2..<br>2..<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.innerHTML = (str==null?" ":str);loPar.children.innerHTML = (cont==null?" ":cont);liContH -= parseInt(loPar.children.offsetHeight);}//打开／关闭第x个目录夹loMain.showfolderX = function(aix){loMain.showme(loMain.children.children)}//打开/关闭当前obj所在的目录loMain.showme = function(obj){if (loMain.moving) return;loMain.moving = true;if (obj.bOpen){obj.bOpen = false;loMain.closefolder(obj.parentElement.children);obj.className = 'folder1';}else{obj.bOpen = true;loMain.openfolder(obj.parentElement.children);obj.className = 'folder2';var lxfolders = loMain.children;for (var i=0; i<lxfolders.length; i++){var loChild = lxfolders.children;if(loChild.uniqueID!=obj.uniqueID){lxfolders.children.style.height=1;loChild.bOpen = false;loChild.className = 'folder1';}}}loMain.SlideItemsAction(obj.parentElement.children);}//为目录内容设置Slidevar 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;var loDown = loSlide.children;if (obj.scrollHeight<=liContH||obj.parentElement.children.bOpen!=true){loUp.style.display="none";loDown.style.display="none";}else{loSlideItem = obj;var lxOffset = getTrueOffset(obj);var lileft = lxOffset+obj.offsetWidth-20;var litop= lxOffset+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 ;while(e){x+=parseInt(e.offsetLeft);y+=parseInt(e.offsetTop);e=e.offsetParent;}return ;}return loMain;}</SCRIPT></head><body></body></html>
页:
[1]