我们在做开发时，经常要做表单验证，比如验证文本框必须填内容时，而文本框又很多时，传统的做法是逐个判断: 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> οnlοad=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 οnmοuseοut='"+lsUniqueID+".SlideClickStop()' οnmοusedοwn='"+lsUniqueID+".SlideClickStart();"+lsUniqueID+".SlideCilckup()' style='position:absolute;display:none;width:10;height:10'></button><button οnmοuseοut='"+lsUniqueID+".SlideClickStop()' οnmοusedοwn='"+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 οnclick='"+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> </head> <body> </body> </html>
[Ctrl+A 全选 提示:你可先修改部分代码,再点运行代码]
代码如下:
<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> οnlοad=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 οnmοuseοut='"+lsUniqueID+".SlideClickStop()' οnmοusedοwn='"+lsUniqueID+".SlideClickStart();"+lsUniqueID+".SlideCilckup()' style='position:absolute;display:none;width:10;height:10'></button><button οnmοuseοut='"+lsUniqueID+".SlideClickStop()' οnmοusedοwn='"+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 οnclick='"+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> </head> <body> </body> </html>
[Ctrl+A 全选 提示:你可先修改部分代码,再点运行代码]
177
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
