JS打造类似QQ的折叠菜单

代码简介：
QQ折叠菜单，JavaScript网页版，仿OUTLOOK菜单，相当牛，见识一下。
代码内容：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>JS打造类似QQ的折叠菜单_网页代码站(www.webdm.cn)</title>
<style>
.outlook-title
{
    border:1px outset;    
    background-color:buttonface;
    color:black;
    text-align:center;
    cursor:hand;
    font-size:9pt;
}
.outlook-item
{
    padding:2px;
    font-size:9pt;
}
 
a.outlook-item:hover
{
    color:blue;
}
</style>
 
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
 
</head>
<body>
    <form id="form1" runat="server">
    <div>
 <div id="Layer1">
<table height="100%" width="100%" border=0 cellpadding=0 cellspacing=0>
    <tr><td width="144"><div id="Div1">
      <table style="WIDTH: 140px; HEIGHT: 100%" cellspacing=0 cellpadding=0 bgcolor=#aca899 border=1 hspace="0" vspace="0">
        <tr>
          <td id=outLookBarShow style="HEIGHT: 100%"  align=middle name="outLookBarShow">
            <div id="o1" style="height:100%;"></div></td>
        </tr>
      </table>
    </div>
        </td>
    <td width="828" height="600"><iframe id="frm" name="frm" width="100%" height="100%" frameborder=0></iframe></td></tr>
</table>
</div>
     
    <SCRIPT LANGUAGE="JavaScript">
<!--
function CLASS_OUTLOOKBAR(id,name)
{
    var THIS1 = this;
 
    this.id    = getUnique(id);
    this.name = getUnique(name);
    this.width = "140";
    this.height = "100%";
    this.titles = new Array();
 
    function getUnique(p){
        if(p!=null){
            return p;
        } else {
            return "outlook_" + new Date().getTime() + "_";
        }
    }
 
    this.addTitle = function(name){    
 
        function title(name){
            var THIS2    = this;
            this.name    = name;
            this.items    = new Array();
         
            this.addItem = function(name,target,url,image,align){
 
                function item(name,target,url,image,align){
                    this.name = name;
                    this.image = image;
                    this.target = target;
                    this.url = url;
                    this.align = align;
                }
 
                var        _item = new item(name,target,url,image,align);
                THIS2.items[THIS2.items.length] = _item;
                return _item;
            }
        }
 
        var _title = new title(name);
        this.titles[this.titles.length] = _title;
        return _title;
    }
 
    this.step    = 4;
    this.speed    = 10;
    this.selectedIndex = 0;
    this.timer  = 0;
    this.rate    = 100;
    this.run    = false;
    this.wait = new Array();
 
    this.select = function(index){
        if(this.selectedIndex!=index){
            if(this.run==false){
                this.rate = 100;
                this.run = true;
                this.timer = window.setInterval(function(){
                 
                    THIS1.rate-= THIS1.step;                    
                    var oldI = document.getElementById(THIS1.id + THIS1.selectedIndex).nextSibling;
                    var newI = document.getElementById(THIS1.id + index).nextSibling;
 
                    var ooI = oldI.childNodes[0].childNodes[0];
                    var nnI = newI.childNodes[0].childNodes[0];
 
                    oldI.style.display = "";
                    newI.style.display = "";
 
                    if(THIS1.rate<0){
                        window.clearInterval(THIS1.timer);
                        THIS1.timer = 0;
                        ooI.style.overflow="auto";
                        nnI.style.overflow = "auto";
                        oldI.style.display = "none";
                        THIS1.run = false;
                        THIS1.selectedIndex = index;
                        if(THIS1.wait.length>0){
                            THIS1.select(THIS1.wait[0]);
                            THIS1.wait = THIS1.wait.slice(1,-1);
                        }
                    } else {                        
                        ooI.style.overflow = "hidden";
                        nnI.style.overflow = "hidden";
                        oldI.style.height = THIS1.rate +"%";
                        newI.style.height = (100 - THIS1.rate) + "%";
                    }
 
                },this.speed); 
            }else{
                this.wait[this.wait.length] = index;
            }
        }
    }
 
    this.setup = function(contain){
        if(contain!=null){        
            var table = document.createElement("table");
                table.style.width    = "100%";
                table.style.height    = "100%";
                table.cellPadding = "0px";
                table.cellSpacing = "0px";
                table.style.border = "0px solid red";
                table.bgColor = "#aca899";
 
                function getItem(width,height,display,title){
                    var tris = document.createElement("tr");
                    var tdis = document.createElement("td");
                        tdis.style.width = width;
                        tris.style.height = height;
                        tris.style.display = display;
                        tdis.className    = "outlook-item";
                        tdis.style.verticalAlign = "top";    
 
                        if(title!=null&&typeof(title.items)!="undefined"){
                             
                            var vv = document.createElement("div");
                                vv.style.overflow = "auto";
                                vv.style.height = "100%";
                                vv.style.width = "100%";
 
                            for(var i=0;i<title.items.length;i++){
                                var div = document.createElement("div");
                                    div.style.textAlign = "center";
                                    div.style.height = "24px";                                    
                                    div.style.paddingTop = "4px";
 
                                if(title.items[i].image!=null){
                                    var img = document.createElement("img");
                                        img.src = title.items[i].image;
                                        div.appendChild(img);
                                    if(typeof(title.items[i].align)!="undefined"&&title.items[i].align==1){
                                        var lbl = document.createElement("label");
                                            lbl.innerHTML = "<br>";
                                            div.appendChild(lbl);
                                    }
                                }
 
                                var a    = document.createElement("a");
                                    a.target    = title.items[i].target;
                                    a.innerHTML = title.items[i].name;
                                    a.href        = title.items[i].url;
                                    div.appendChild(a);
                                    vv.appendChild(div);                                                                                
                            }                    
 
                            tdis.appendChild(vv);
                        }
 
                        tris.appendChild(tdis);
                        return tris;
                }
         
                for(var i=0;i<this.titles.length;i++){        
                    var tr = document.createElement("tr");
                    var td = document.createElement("td");
 
                        tr.style.height = "25px";
                        td.style.width    = "100%";                        
                        td.className    = "outlook-title";    
 
                        td.innerHTML    = this.titles[i].name;
                        tr.id            = this.id + i;
                                                                         
                        tr.appendChild(td);
                        table.appendChild(tr);
                         
                        if (i==this.selectedIndex){
                            var tris = getItem("100%","100%","",this.titles[i]);
                                table.appendChild(tris);                                
                        } else {
                            var tri     = getItem("100%","0%","none",this.titles[i]);
                                table.appendChild(tri);
                        }    
                                             
                }
 
                if(typeof(contain.outerHTML)=="undefined"){
                    contain.appendChild(table);
                } else {        
                    contain.innerHTML = table.outerHTML;
                }    
                 
                //bind event
                for(var i=0;i<this.titles.length;i++){
                    var title = document.getElementById(this.id + i);
                    if(title){
                        function mapping(index){
                            try    {
                                title.onclick = function(){THIS1.select(index);}
                                title.oncontextmenu = function(){ return false;}
                                title.nextSibling.oncontextmenu = function(){return false;}
                            } catch (e){
                            }
                        }
                        mapping(i);
                    }
                }
        }
    }
 
    this.addItem = function(index,name,target,url,image,align){
        if(index>=0&&index<this.titles.length){
            return this.titles[index].addItem(name,target,url,image,align);
        }
    }
 
    this.setupById = function(id){
        var d = document.getElementById(id);
        if(d){
            this.setup(d);
        }
    }
}
 
var o = new CLASS_OUTLOOKBAR();
 
o.addTitle("用户管理");
    o.addTitle("在线超市");
    o.addTitle("掘宝世界");
    o.addTitle("维修管理");
    o.addTitle("新闻管理");
o.addTitle("BBS管理");
 
//用户管理
  o.addItem(0,"更新用户","frm","user.aspx");
 
//IT在线超市
    o.addItem(1,"上传","frm","http://www.google.com");
    o.addItem(1,"更新","frm","http://baidu.com");
     
//二手掘宝世界
 o.addItem(2,"二手交易","frm","http://baidu.com");
 
//维修管理
o.addItem(3,"项目添加","frm","#");
o.addItem(3,"项目更新","frm","http://baidu.com");
 
//新闻管理
o.addItem(4,"添加新闻","frm","#");
o.addItem(4,"更新新闻","frm","http://www.163.com");
//o1是一个层
 o.setupById("o1");
//-->
</SCRIPT>
</div>
</form>
<br />
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！</p>
</body>
</html>
posted @ 2011-07-19 12:24 网页代码站阅读(316) 评论(0) 编辑收藏举报
刷新页面返回顶部
登录后才能查看或发表评论，立即登录或者逛逛博客园首页
公告

昵称：网页代码站
园龄： 14年5个月
粉丝： 59
关注： 0
+加关注
2011年7月
日
一
二
三
四
五
六
JS打造类似QQ的折叠菜单

公告

搜索

常用链接

我的标签

随笔分类

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论
