OUTLOOK菜单类

<HTML>

<HEAD>

<TITLE>outlook菜单</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>

</HEAD>

<TR>

</td>

</tr>

</table>

</td><td><iframe id="frm" name="frm" width="100%" height="100%" frameborder=0></iframe></td></tr>

</table>

<!--

/**//*

** ==================================================================================================

** 类名：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

---------------------------------------------------------------------------------------------------

** 作者：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 阅读(5039) 评论(10) 编辑收藏举报

刷新页面返回顶部

OUTLOOK菜单类

公告