<html>
<head>
</head>
<script language="javascript">
function PageLoad()
{
/*var myMenu = new MainMenu('menu','test.xml');
myMenu.Show();*/
var myMenu = new MainMenu('menu');
var menuFile = new MenuItem('File','文件',null,'F');
var menuSave = new MenuItem('Save','保存','document.execCommand("SaveAs")','S');
var menuExit = new MenuItem('Exit','退出','Exit()','X');
var menuEdit = new MenuItem('Edit','编辑',null,'E');
var menuView = new MenuItem('View','查看',null,'V');
var menuProg = new MenuItem('Prog','通过程序脚本初始化','SelectOpt(this)');
var menuConf = new MenuItem('Conf','通过配置文件初始化','SelectOpt(this)');
var menuChk = new MenuItem('Chk','测试：复选项');
var menuChk1 = new MenuItem('Chk1','测试：复选项1','CheckOpt(this)');
var menuChk2 = new MenuItem('Chk1','测试：复选项2','CheckOpt(this)');
var menuHelp = new MenuItem('Help','帮助',null,'H');
var menuTopics = new MenuItem('Topics','帮助主题',null,'T');
var menuContent = new MenuItem('Content','帮助内容',null,'C');
var menuAbout = new MenuItem('About','关于 MenuItem','alert("MenuItem Ver1.00 by Akira(akira_cn@msn.com)")','A');
menuFile.addChild(menuSave);
menuFile.addChild(menuExit);
menuView.addChild(menuProg);
menuView.addChild(menuConf);
menuView.addLine(); //分隔行
menuView.addChild(menuChk);
menuChk.addChild(menuChk1);
menuChk.addChild(menuChk2);
menuHelp.addChild(menuTopics);
menuHelp.addChild(menuContent);
menuHelp.addLine();
menuHelp.addChild(menuAbout);
myMenu.addItem(menuFile);
myMenu.addItem(menuEdit);
myMenu.addItem(menuView);
myMenu.addItem(menuHelp);
myMenu.Show();
menuEdit.Disable();
menuTopics.Disable();
menuContent.Disable();
menuProg.Select();
menuChk1.Check();
}
function contact()
{
alert('联系我们');
}
function Exit()
{
self.opener = self;
self.close();
}
function SelectOpt(target)
{
var editBox1 = document.getElementById('editBox1');
var editBox2 = document.getElementById('editBox2');
if (target.id == 'Conf')
{
editBox1.style.display = "none";
editBox2.style.display = "block";
}
else
{
editBox2.style.display = "none";
editBox1.style.display = "block";
}
target.Select();
}
function CheckOpt(target)
{
target.Check();
}
</script>
<body style='padding:0 0 0 0;margin:0 0 0 0' onload='PageLoad()'>
<textarea id="editBox1" style="width:100%;height:90%">
通过程序初始化主菜单的例子：
<script>
var myMenu = new MainMenu('menu');
var menuFile = new MenuItem('File','文件',null,'F');
var menuSave = new MenuItem('Save','保存','document.execCommand("SaveAs")','S');
var menuExit = new MenuItem('Exit','退出','Exit()','X');
var menuEdit = new MenuItem('Edit','编辑',null,'E');
var menuView = new MenuItem('View','查看',null,'V');
var menuProg = new MenuItem('Prog','通过程序脚本初始化','SelectOpt(this)');
var menuConf = new MenuItem('Conf','通过配置文件初始化','SelectOpt(this)');
var menuChk1 = new MenuItem('Chk1','测试：复选项1','CheckOpt(this)');
var menuChk2 = new MenuItem('Chk1','测试：复选项2','CheckOpt(this)');
var menuHelp = new MenuItem('Help','帮助',null,'H');
var menuTopics = new MenuItem('Topics','帮助主题',null,'T');
var menuContent = new MenuItem('Content','帮助内容',null,'C');
var menuAbout = new MenuItem
('About','关于 MenuItem','alert('MenuItem Ver1.00 by Akira(akira_cn@msn.com)')','A');
myMenu.addItem(menuFile);
myMenu.addItem(menuEdit);
myMenu.addItem(menuView);
myMenu.addItem(menuHelp);
menuFile.addChild(menuSave);
menuFile.addChild(menuExit);
menuView.addChild(menuProg);
menuView.addChild(menuConf);
menuView.addLine(); //分隔行
menuView.addChild(menuChk1);
menuView.addChild(menuChk2);
menuHelp.addChild(menuTopics);
menuHelp.addChild(menuContent);
menuHelp.addLine();
menuHelp.addChild(menuAboug);
myMenu.Show();
menuEdit.Disable();
menuTopics.Disable();
menuContent.Disable();
menuProg.Select();
menuChk1.Check();
</script>
</textarea>
<textarea id="editBox2" style="width:100%;height:90%;display:none">
通过配置文件初始化主菜单的例子：
<!--xml配置文件，例如保存为test.xml-->
<?xml version="1.0" encoding="gb2312" standalone="yes"?>
<MainMenu>
<MenuItem id="File" Text="文件" Accelerator="F">
<MenuItem id="Save" Text="保存" Accelerator="S" onClick="document.execCommand('SaveAs')"/>
<MenuItem id="Exit" Text="退出" Accelerator="X" onClick="Exit()"/>
</MenuItem>
<MenuItem id="Edit" Text="编辑" Accelerator="E" Disabled="true">
</MenuItem>
<MenuItem id="View" Text="查看" Accelerator="V">
<MenuItem id="Prog" Text="通过程序脚本初始化" Selected="true" onClick="SelectOpt(this)"/>
<MenuItem id="Conf" Text="通过配置文件初始化" onClick="SelectOpt(this)"/>
<MenuItem/>
<MenuItem id="Chk1" Text="测试：复选项1" Checked="true" onClick="CheckOpt(this)"/>
<MenuItem id="Chk2" Text="测试：复选项2" onClick="CheckOpt(this)"/>
</MenuItem>
<MenuItem id="Help" Text="帮助" Accelerator="H">
<MenuItem id="Topics" Text="帮助主题" Accelerator="T" Disabled="true"/>
<MenuItem id="Content" Text="帮助内容" Accelerator="C" Disabled="true"/>
<MenuItem/>
<MenuItem id="About" Text="关于 MenuItem" Accelerator="A" onClick="alert('MenuItem Ver1.00 by Akira(akira_cn@msn.com)')"/>
</MenuItem>
</MainMenu>
<script>
var myMenu = new MainMenu('menu','test.xml'); //从配置文件test.xml中读取菜单信息
myMenu.Show();
</script>
</textarea>
</body>
</html>
<!-------------------------------------------------------------------------
菜单控件主体程序部分
Version 1.00 Akira (akira_cn@msn.com)
-------------------------------------------------------------------------->
<script language="javascript">
function MenuItem(id, text, clickEvent, accelerator, subWidth)
{
this.id = null;
this.text = null;
this.accelerator = null;
this.clickEvent = clickEvent;
if (id == null)
{
this.id = "menu" + (new Date()).getTime();
}
else
this.id = id;
this.text = text;
if (subWidth == null)
{
this.subWidth = 0;
for (var i = 0; this.text != null && i < this.text.length; i++)
{
this.subWidth = this.subWidth - 0 + (text.charCodeAt(i) > 127 ? 20 : 10);
}
//this.subWidth = this.text != null ? this.text.length * 16 : 96;//100;
}
else
this.subWidth = subWidth;
if (clickEvent == null)
this.onclick = function(){};
else
this.onclick = function(){eval(clickEvent);};
if (accelerator != null) //快捷键
{
this.accelerator = accelerator;
}
this.subMenuItems = new Array();
this.visible = true;
this.disabled = false;
this.checked = false;
this.selected = false;
MenuItem.prototype.Hide = function()
{
this.visible = false;
this._span.style.display = "none";
}
MenuItem.prototype.Show = function()
{
this.visible = true;
this._span.style.display = "block";
}
MenuItem.prototype.Enable = function()
{
this.disabled = false;
this._span.EventHandler = this;
this._span.onmouseover = function(){this.EventHandler._span_MouseOver(this,event);}
this._span.onmouseout = function(){this.EventHandler._span_MouseOut(this,event);}
this._span.onclick = function(){this.EventHandler._span_Click(this,event);}
this._span.style.color = "#000000";
}
MenuItem.prototype.Disable = function()
{
this.disabled = true;
this._span.onmouseover = function(){}
this._span.onmouseout = function(){}
this._span.onclick = function(){}
this._span.style.color = "#ACA899";
}
MenuItem.prototype.Check = function()
{
if (!this.checked)
{
var textObj = document.createElement('b');
textObj.innerText = '√';
this._span.appendChild(textObj);
for (var i = 0; i < this._span.childNodes.length - 1; i++)
{
this._span.appendChild(this._span.removeChild(this._span.childNodes[i]));
}
this.checked = true;
this._span.style.paddingLeft = "6px";
}
else
{
this._span.removeChild(this._span.childNodes[0]);
this.checked = false;
this._span.style.paddingLeft = "18px";
}
}
MenuItem.prototype.Select = function()
{
var parent = this.parent;
for (var i = 0; i < parent.subMenuItems.length; i++)
{
parent.subMenuItems[i]._unselect();
}
var liObj = document.createElement("li");
this._span.appendChild(liObj);
for (var i = 0; i < this._span.childNodes.length - 1; i++)
{
liObj.appendChild(this._span.removeChild(this._span.childNodes[i]));
}
this.selected = true;
//this.subWidth = this.subWidth - 0 + 16;
this._span.style.paddingLeft = "2px";
}
MenuItem.prototype._unselect = function()
{
if (this.selected)
{
var liObj = this._span.removeChild(this._span.childNodes[0]);
for (var i = 0; i < liObj.childNodes.length; i++)
{
this._span.appendChild(liObj.childNodes[i]);
}
this.selected = false;
this._span.style.paddingLeft = "18px";
//this.subWidth = this.subWidth - 16;
}
}
MenuItem.prototype.addChild = function(menuItem)
{
this.subMenuItems.push(menuItem);
menuItem.parent = this;
}
MenuItem.prototype.addLine = function()
{
this.addChild(new MenuItem());
}
MenuItem.prototype.hasChild = function()
{
return this.subMenuItems.length > 0;
}
this._span = document.create
