zoukankan      html  css  js  c++  java
  • JavaScript实现仿QQ折叠式菜单代码

    代码简介:

    JS仿QQ折叠菜单,JavaScript代码有点多,用时候把它另存为一个新文件好了。可以用到后台管理上很不错。相信你会喜欢的。

    代码内容:

    <html>
    <head>
    <title>JavaScript实现仿QQ折叠式菜单代码_网页代码站(www.webdm.cn)</title>
    </head>
    <body>
    <STYLE type="text/css">
    A:link { FONT-SIZE: 12px; TEXT-DECORATION: none}
    A:visited { FONT-SIZE: 12px; TEXT-DECORATION: none}
    A:hover { COLOR: #006CD9; FONT-SIZE: 12px; TEXT-DECORATION: none}
    BODY { FONT-SIZE: 12px;}
    TD { FONT-SIZE: 12px; line-height: 150%}
    </style>
    <script language="JavaScript">
    <!--
    function showitem(id,name)
    {
    return ("<span><a href='"+id+"' target=_blank>"+name+"</a></span><br>")
    }
    function switchoutlookBar(number)
    {
    	var i = outlookbar.opentitle;
    	outlookbar.opentitle=number;
    	var id1,id2,id1b,id2b
    	if (number!=i && outlooksmoothstat==0){
    		if (number!=-1)
    		{
    			if (i==-1){
    				id2="blankdiv";
    				id2b="blankdiv";
    			}
    			else{
    				id2="outlookdiv"+i;
    				id2b="outlookdivin"+i;
    				document.all("outlooktitle"+i).style.border="1px none navy";
    				document.all("outlooktitle"+i).style.background=outlookbar.maincolor;
    				document.all("outlooktitle"+i).style.color="#ffffff";
    				document.all("outlooktitle"+i).style.textalign="center";
    			}
    			id1="outlookdiv"+number
    			id1b="outlookdivin"+number
    			document.all("outlooktitle"+number).style.border="1px none white";
    			document.all("outlooktitle"+number).style.background=outlookbar.maincolor; //title
    			document.all("outlooktitle"+number).style.color="#ffffff";///
    			document.all("outlooktitle"+number).style.textalign="center";
    			smoothout(id1,id2,id1b,id2b,0);
    		}
    		else
    		{
    			document.all("blankdiv").style.display="";
    			document.all("blankdiv").sryle.height="100%";
    			document.all("outlookdiv"+i).style.display="none";
    			document.all("outlookdiv"+i).style.height="0%";
    			document.all("outlooktitle"+i).style.border="1px none navy";
    			document.all("outlooktitle"+i).style.background=outlookbar.maincolor;
    			document.all("outlooktitle"+i).style.color="#ffffff";
    			document.all("outlooktitle"+i).style.textalign="center";
    		}
    	}
    }
    function smoothout(id1,id2,id1b,id2b,stat)
    {
    	if(stat==0){
    		tempinnertext1=document.all(id1b).innerHTML;
    		tempinnertext2=document.all(id2b).innerHTML;
    		document.all(id1b).innerHTML="";
    		document.all(id2b).innerHTML="";
    		outlooksmoothstat=1;
    		document.all(id1b).style.overflow="hidden";
    		document.all(id2b).style.overflow="hidden";
    		document.all(id1).style.height="0%";
    		document.all(id1).style.display="";
    		setTimeout("smoothout('"+id1+"','"+id2+"','"+id1b+"','"+id2b+"',"+outlookbar.inc+")",outlookbar.timedalay);
    	}
    	else
    	{
    		stat+=outlookbar.inc;
    		if (stat>100)
    			stat=100;
    		document.all(id1).style.height=stat+"%";
    		document.all(id2).style.height=(100-stat)+"%";
    		if (stat<100) 
    			setTimeout("smoothout('"+id1+"','"+id2+"','"+id1b+"','"+id2b+"',"+stat+")",outlookbar.timedalay);
    		else
    		{
    			document.all(id1b).innerHTML=tempinnertext1;
    			document.all(id2b).innerHTML=tempinnertext2;
    			outlooksmoothstat=0;
    			document.all(id1b).style.overflow="auto";
    			document.all(id2).style.display="none";
    		}
    	}
    }
    function getOutLine()
    {
    	outline="<table "+outlookbar.otherclass+">";
    	for (i=0;i<(outlookbar.titlelist.length);i++)
    	{
    		outline+="<tr><td name=outlooktitle"+i+" id=outlooktitle"+i+" "; 
    		if (i!=outlookbar.opentitle) 
    			outline+=" nowrap align=center style='cursor:hand;background-color:"+outlookbar.maincolor
    
    +";color:#ffffff;height:20;border:1 none navy' ";
    		else
    			outline+=" nowrap align=center style='cursor:hand;background-color:"+outlookbar.maincolor
    
    +";color:white;height:20;border:1 none white' ";
    		outline+=outlookbar.titlelist[i].otherclass
    		outline+=" onclick='switchoutlookBar("+i+")'><span class=smallFont>";
    		outline+=outlookbar.titlelist[i].title+"</span></td></tr>";
    		outline+="<tr><td name=outlookdiv"+i+" valign=top align=center id=outlookdiv"+i+" style='100%"
    		if (i!=outlookbar.opentitle) 
    			outline+=";display:none;height:0%;";
    		else
    			outline+=";display:;height:100%;";
    		outline+="'><div name=outlookdivin"+i+" id=outlookdivin"+i+" style='overflow:auto;100%;height:100%'>";
    		for (j=0;j<outlookbar.itemlist[i].length;j++)
    			outline+=showitem(outlookbar.itemlist[i][j].key,outlookbar.itemlist[i][j].title);
    		outline+="</div></td></tr>"
    	}
    	outline+="</table>"
    	return outline
    }
    function show()
    {
    	var outline;
    	outline="<div id=outLookBarDiv name=outLookBarDiv style='width=100%;height:100%'>"
    	outline+=outlookbar.getOutLine();
    	outline+="</div>"
    	document.write(outline);
    }
    function theitem(intitle,instate,inkey)
    {
    	this.state=instate;
    	this.otherclass=" nowrap ";
    	this.key=inkey;
    	this.title=intitle;
    }
    function addtitle(intitle)
    {
    	outlookbar.itemlist[outlookbar.titlelist.length]=new Array();
    	outlookbar.titlelist[outlookbar.titlelist.length]=new theitem(intitle,1,0);
    	return(outlookbar.titlelist.length-1);
    }
    function additem(intitle,parentid,inkey)
    {
    	if (parentid>=0 && parentid<=outlookbar.titlelist.length)
    	{
    		outlookbar.itemlist[parentid][outlookbar.itemlist[parentid].length]=new theitem(intitle,2,inkey);
    		outlookbar.itemlist[parentid][outlookbar.itemlist[parentid].length-1].otherclass=" nowrap align=left style='height:5' ";
    		return(outlookbar.itemlist[parentid].length-1);
    	}
    	else
    		additem=-1;
    }
    function outlook()
    {
    	this.titlelist=new Array();
    	this.itemlist=new Array();
    	this.divstyle="style='height:100%;100%;overflow:auto' align=center";
    	this.otherclass="border=0 cellspacing='0' cellpadding='0' style='height:100%;100%'valign=middle align=center ";
    	this.addtitle=addtitle;
    	this.additem=additem;
    	this.starttitle=-1;
    	this.show=show;
    	this.getOutLine=getOutLine;
    	this.opentitle=this.starttitle;
    	this.reflesh=outreflesh;
    	this.timedelay=50;
    	this.inc=10;
    	this.maincolor = "#336699"
    }
    function outreflesh()
    {
    	document.all("outLookBarDiv").innerHTML=outlookbar.getOutLine();
    }
    function locatefold(foldname)
    {
    	if (foldname=="")
    		foldname = outlookbar.titlelist[0].title
    	for (var i=0;i<outlookbar.titlelist.length;i++)
    	{
    		if(foldname==outlookbar.titlelist[i].title)
    		{
    			outlookbar.starttitle=i;
    			outlookbar.opentitle=i;
    		}
    	}
    }
    var outlookbar=new outlook();
    var tempinnertext1,tempinnertext2,outlooksmoothstat
    outlooksmoothstat = 0;
    var t;
    t=outlookbar.addtitle('网页代码站')
    outlookbar.additem('网页特效',t,'/')
    outlookbar.additem('代码下载',t,'/')
    t=outlookbar.addtitle('计算机编程')
    outlookbar.additem('实用技巧',t,'/')
    outlookbar.additem('硬件相关',t,'http://www.webdm.cn/')
    t=outlookbar.addtitle('技术资料')
    outlookbar.additem('Web开发',t,'/')
    outlookbar.additem('数据库类',t,'/')
    //-->
    </script>
    <table id=mnuList style="WIDTH:150px;HEIGHT: 100%" cellspacing=0 cellpadding=0 align=center border=0>
    <tr>
    <td bgcolor=#F0F0E5 id=outLookBarShow style="HEIGHT: 100%" valign=top align=middle name="outLookBarShow">
    <script language="JavaScript">
    <!--
    locatefold("")
    outlookbar.show() 
    //-->
    </script>
    </td>
    </tr>
    </table>
    </body>
    </html>
    <br>
    <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!</p>
    

    代码来自:http://www.webdm.cn/webcode/9e2fa018-d0a7-4b90-856e-12bd9e62734b.html

  • 相关阅读:
    PDF文件中的Form保存问题
    Understanding IP Fragmentation
    tcp ip guide IPsec IKE
    Windows安全事件日志中的事件编号与描述
    Cisco PIX fix up and Juniper firewall FTP ALG
    很好的IPSec介绍,详细解释了IKE协商的2个阶段的作用
    virtualbox 下运行Ubuntu 8.10的分辨率和guest additions的问题。
    Fixing the ‘Do you want to display nonsecure items’ message
    windows xp 开始菜单里面所有项目右键不起作用。
    HP backup and recovery manager
  • 原文地址:https://www.cnblogs.com/webdm/p/1982032.html
Copyright © 2011-2022 走看看