OUTLOOK菜单类

<HTML>
<HEAD>
<TITLE>outlook菜单</TITLE>
<META http-equiv=content-type content=text/html;charset=gb2312>
<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>
</HEAD>
<BODY style="MARGIN: 0px" text=black vLink=white aLink=white link=white scroll=no>
<table height="100%" width="100%" border=0 cellpadding=0 cellspacing=0>
    <tr><td width="140">
        <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>
    </td><td><iframe id="frm" name="frm" width="100%" height="100%" frameborder=0></iframe></td></tr>
</table>

<SCRIPT LANGUAGE="JavaScript">
<!--
/**//*  
**    ==================================================================================================  
**    类名：CLASS_OUTLOOKBAR  
**    功能：OUTLOOK菜单  
**    示例：  
    ---------------------------------------------------------------------------------------------------  
  
    var o = new CLASS_OUTLOOKBAR();
        o.addTitle("工作安排");
        o.addTitle("通告信息");
        o.addTitle("管理制度");
        o.addTitle("系统管理");

        o.addItem(0,"今日安排","frm","http://www.google.com");
        o.addItem(0,"工作任务","frm","http://baidu.com");

        o.addItem(1,"报社通知","frm","http://www.itpub.net/forum6.html",null);

        o.setupById("o1");

        //定义需要安装的DIV
        <div id="o1" style="height:100%;"></div>

  
    ---------------------------------------------------------------------------------------------------  
**    作者：ttyp  
**    邮件：ttyp@21cn.com  
**    日期：2005-12-1  
**      版本：0.2
**    ==================================================================================================  
*/
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.addItem(0,"今日安排","frm","http://www.google.com");
    o.addItem(0,"工作任务","frm","http://baidu.com");

    o.addItem(1,"报社通知","frm","http://www.itpub.net/forum6.html",null);

    o.setupById("o1");

//-->
</SCRIPT>

</BODY>
</HTML>

OUTLOOK菜单，在IE6.0.FIREFOX1.0下测试通过
posted @ 2005-12-25 22:25  ttyp  阅读(5026)  评论(10)  编辑  收藏  举报