<HTML>
<HEAD>
<TITLE>outlook菜单</TITLE>
<META http-equiv=content-type content=text/html;charset=gb2312>
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<style>![](https://www.cnblogs.com/Images/dot.gif)
.outlook-title
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
}{
border:1px outset;
background-color:buttonface;
color:black;
text-align:center;
cursor:hand;
font-size:9pt;
}
.outlook-item
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
}{
padding:2px;
font-size:9pt;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
a.outlook-item:hover
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
}{
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>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<SCRIPT LANGUAGE="JavaScript">![](https://www.cnblogs.com/Images/dot.gif)
<!--
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
/**//**//**//*
** ==================================================================================================
** 类名:CLASS_OUTLOOKBAR
** 功能:OUTLOOK菜单
** 示例:
---------------------------------------------------------------------------------------------------
var o = new CLASS_OUTLOOKBAR();
o.addTitle("工作安排");
o.addTitle("通告信息");
o.addTitle("管理制度");
o.addTitle("系统管理");
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
o.addItem(0,"今日安排","frm","http://www.google.com");
o.addItem(0,"工作任务","frm","http://baidu.com");
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
o.addItem(1,"报社通知","frm","http://www.itpub.net/forum6.html",null);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
o.setupById("o1");
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
//定义需要安装的DIV
<div id="o1" style="height:100%;"></div>
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
---------------------------------------------------------------------------------------------------
** 作者:ttyp
** 邮件:ttyp@21cn.com
** 日期:2005-12-1
** 版本:0.2
** ==================================================================================================
*/
function CLASS_OUTLOOKBAR(id,name)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{
var THIS1 = this;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
this.id = getUnique(id);
this.name = getUnique(name);
this.width = "140";
this.height = "100%";
this.titles = new Array();
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
function getUnique(p)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(p!=null)
{
return p;
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
} else
{
return "outlook_" + new Date().getTime() + "_";
}
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.addTitle = function(name)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
function title(name)
{
var THIS2 = this;
this.name = name;
this.items = new Array();
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.addItem = function(name,target,url,image,align)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
function item(name,target,url,image,align)
{
this.name = name;
this.image = image;
this.target = target;
this.url = url;
this.align = align;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
var _item = new item(name,target,url,image,align);
THIS2.items[THIS2.items.length] = _item;
return _item;
}
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
var _title = new title(name);
this.titles[this.titles.length] = _title;
return _title;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
this.step = 4;
this.speed = 10;
this.selectedIndex = 0;
this.timer = 0;
this.rate = 100;
this.run = false;
this.wait = new Array();
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.select = function(index)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(this.selectedIndex!=index)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(this.run==false)
{
this.rate = 100;
this.run = true;
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
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;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
var ooI = oldI.childNodes[0].childNodes[0];
var nnI = newI.childNodes[0].childNodes[0];
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
oldI.style.display = "";
newI.style.display = "";
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
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;
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(THIS1.wait.length>0)
{
THIS1.select(THIS1.wait[0]);
THIS1.wait = THIS1.wait.slice(1,-1);
}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
} else
{
ooI.style.overflow = "hidden";
nnI.style.overflow = "hidden";
oldI.style.height = THIS1.rate +"%";
newI.style.height = (100 - THIS1.rate) + "%";
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
},this.speed);
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
}else
{
this.wait[this.wait.length] = index;
}
}
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.setup = function(contain)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
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";
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
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";
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(title!=null&&typeof(title.items)!="undefined")
{
var vv = document.createElement("div");
vv.style.overflow = "auto";
vv.style.height = "100%";
vv.style.width = "100%";
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
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";
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(title.items[i].image!=null)
{
var img = document.createElement("img");
img.src = title.items[i].image;
div.appendChild(img);
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(typeof(title.items[i].align)!="undefined"&&title.items[i].align==1)
{
var lbl = document.createElement("label");
lbl.innerHTML = "<br>";
div.appendChild(lbl);
}
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
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);
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
tdis.appendChild(vv);
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
tris.appendChild(tdis);
return tris;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
for(var i=0;i<this.titles.length;i++)
{
var tr = document.createElement("tr");
var td = document.createElement("td");
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
tr.style.height = "25px";
td.style.width = "100%";
td.className = "outlook-title";
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
td.innerHTML = this.titles[i].name;
tr.id = this.id + i;
tr.appendChild(td);
table.appendChild(tr);
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (i==this.selectedIndex)
{
var tris = getItem("100%","100%","",this.titles[i]);
table.appendChild(tris);
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
} else
{
var tri = getItem("100%","0%","none",this.titles[i]);
table.appendChild(tri);
}
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(typeof(contain.outerHTML)=="undefined")
{
contain.appendChild(table);
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
} else
{
contain.innerHTML = table.outerHTML;
}
//bind event
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
for(var i=0;i<this.titles.length;i++)
{
var title = document.getElementById(this.id + i);
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(title)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
function mapping(index)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
try
{
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
title.onclick = function()
{THIS1.select(index);}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
title.oncontextmenu = function()
{ return false;}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
title.nextSibling.oncontextmenu = function()
{return false;}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
} catch (e)
{
}
}
mapping(i);
}
}
}
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.addItem = function(index,name,target,url,image,align)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(index>=0&&index<this.titles.length)
{
return this.titles[index].addItem(name,target,url,image,align);
}
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.setupById = function(id)
{
var d = document.getElementById(id);
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(d)
{
this.setup(d);
}
}
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
var o = new CLASS_OUTLOOKBAR();
o.addTitle("工作安排");
o.addTitle("通告信息");
o.addTitle("管理制度");
o.addTitle("系统管理");
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
o.addItem(0,"今日安排","frm","http://www.google.com");
o.addItem(0,"工作任务","frm","http://baidu.com");
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
o.addItem(1,"报社通知","frm","http://www.itpub.net/forum6.html",null);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
o.setupById("o1");
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
//-->
</SCRIPT>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
</BODY>
</HTML>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
OUTLOOK菜单,在IE6.0.FIREFOX1.0下测试通过