//菜单项对象,包括菜单的title和菜单内页面的url
function MenuItem(title_,url_,iconurl_) {
this.title = title_;
this.url = url_;
this.iconUrl = iconurl_;
this.iframeId = "";
this.buttonId = "";
this.frameLoaded = false; //和菜单关联的iframe是否已经导入了页面
}
function MenuCanvas(divId_) {//显示菜单的div
this.nowIndex = 0;
this.menuHeight = 30; //菜单按钮的高度 px
this.width = 300; //canvas宽 px
this.height = 700; //canvas高 px
this.left = 0; //canvas左上角 x坐标,px
this.top = 0; //canvas高 y坐标,px
this.menuItems = new Array();
this.divId = divId_;
this.containerDiv = document.getElementById(this.divId);
//alert(this.divId);
//alert(this.containerDiv);
this.addMenuItem = function(item) {
item.iframeId = 'menuitemframe_' + this.menuItems.length;
item.buttonId = 'menuitembutton_' + this.menuItems.length;
this.menuItems[this.menuItems.length] = item;
this.containerDiv.innerHTML += '<iframe id="menuitemframe_' + (this.menuItems.length - 1) + '" src="" style="position:absolute;" MARGINWIDTH="0" MARGINHEIGHT="0" FRAMEBORDER="0"></iframe>';
this.containerDiv.innerHTML += '<button id="menuitembutton_' + (this.menuItems.length - 1) + '" style="cursor:hand;position:absolute;background-color:#DDDDDD;border-left:1px ridge white;border-right:1px groove #AAAAAA;border-top:1px ridge white;border-bottom:1px groove #AAAAAA;" οnmοuseοver="javascript:mouseover(this);" οnmοuseοut="javascript:mouseout(this);" οnclick="javascript:menuClick(' +(this.menuItems.length - 1)+ ');"><img src="' + item.iconUrl + '">' + item.title + '</button>';
};
this.show = function() {
var nowy = 0;
this.containerDiv.style.left = this.left + 'px';
this.containerDiv.style.top = this.top + 'px';
this.containerDiv.style.width = this.width + 'px';
this.containerDiv.style.height = this.height + 'px';
for(var i = 0; i < this.menuItems.length; i++) {
var item = this.menuItems[i];
var bt = document.getElementById(item.buttonId);
bt.style.left = this.left + 'px';
bt.style.top = nowy;
bt.style.width = this.width + 'px';
bt.style.height = this.menuHeight;
nowy += this.menuHeight;
var fm = document.getElementById(item.iframeId);
if(this.nowIndex == i) {
fm.style.left = this.left + 'px';
fm.style.top = nowy + 'px';
fm.style.width = this.width + 'px';
fm.style.height = (this.height - this.menuItems.length * this.menuHeight) + 'px';
nowy += (this.height - this.menuItems.length * this.menuHeight);
if(!item.frameLoaded) {
document.getElementById(item.iframeId).src = item.url;
item.frameLoaded = true;
}
} else {
fm.style.left = this.left + 'px';
fm.style.top = this.top + 'px';
fm.style.width = '0px';
fm.style.height = '0px';
}
}
};
this.clickMenu = function(i) {
if(i < 0 || i > this.menuItems.length)
return;
this.nowIndex = i;
//var item = this.menuItems[i];
//if(!item.frameLoaded) {
// document.getElementById(item.iframeId).src = item.url;
// item.frameLoaded = true;
//}
this.show();
};
}
function mouseover(b) {
//b.style.borderTop = "2px #FFFFFF";
//b.style.borderLeft = "2px #FFFFFF"
b.style.borderRight = "2px groove yellow";
b.style.borderBottom = "2px groove yellow"
//document.body.style.cursor = "hand";
}
function mouseout(b) {
b.style.borderTop = "1px ridge white";
b.style.borderLeft = "1px ridge white"
//b.style.borderRight = "0px";
//b.style.borderBottom = "0px"
b.style.borderRight = "1px groove #AAAAAA";
b.style.borderBottom = "1px groove #AAAAAA"
//document.body.style.cursor = "pointer";
}
function menuClick(i) {
menus.clickMenu(i);
}
以上为navi.js的内容
使用方法如下:
<SCRIPT language=javascript src="navi.js"></SCRIPT>
<body οnlοad="javascript:onload();onsize();">
<div id="menudiv">
</div>
<SCRIPT language=javascript>
var menus;
function onload() {
menus = new MenuCanvas('menudiv');
menus.addMenuItem(new MenuItem('车辆跟踪','test1.htm','images/realtime.gif'));
menus.addMenuItem(new MenuItem('菜单项2','http://www.google.com/','images/selmap.gif'));
menus.addMenuItem(new MenuItem('菜单项3','http://www.baidu.com/','images/history.gif'));
menus.addMenuItem(new MenuItem('菜单项4','http://www.126.com/','images/alert.gif'));
onsize();
menus.show();
}
function onsize() {
//alert('size');
menus.width = 200;//document.body.clientWidth;
menus.height = document.body.clientHeight;
menus.show();
}
window.onresize = onsize;
</SCRIPT>
</body>