当前页面: 开发资料首页 → Javascript 专题 → web下的UI System

web下的UI System

摘要: web下的UI System

大家好，我用javascript写了一套web下的UI System，主要是树和菜单。请大家提提意见。

menu:

<script language="javascript" src="UiSystem/uisystem.js"></script> //ui 实现

<script language=javascript>

IMAGES_PATH = "images/"

var TopMenus = new Array();
var FileItems = new Array();
var EditItems = new Array();
var ToolsItems = new Array();
var HelpItems = new Array();

var subMenu = new Array();

TopMenus[0] = new TopMenu("File","文件"); // subMenu,display
TopMenus[1] = new TopMenu("Edit","编辑");
TopMenus[2] = new TopMenu("Tools","工具");
TopMenus[3] = new TopMenu("Help","帮助");

addTopMenu(TopMenus);

//File menu items
FileItems[0] = new MenuItem("images/open0.gif","新建","onFileOpen");
FileItems[1] = new MenuItem("open0.gif","打开");
FileItems[2] = new MenuItem("open0.gif","关闭");
FileItems[3] = new MenuItem("","退出","onFileExit");

//Edit menu items
EditItems[0] = new MenuItem("open0.gif","剪切");
EditItems[1] = new MenuItem("open0.gif","删除");
EditItems[2] = new MenuItem("close0.gif","复制");

//Tools menu items
ToolsItems[0] = new MenuItem("open0.gif","管理");
ToolsItems[1] = new MenuItem("open0.gif","安全");
ToolsItems[2] = new MenuItem("open0.gif","选项",null,"OptionFont");

//Help menu items
HelpItems[0] = new MenuItem("open0.gif","参照");
HelpItems[1] = new MenuItem("open0.gif","联机文档");
HelpItems[2] = new MenuItem("open0.gif","Web");

var FontItems = new Array();

FontItems[0] = new MenuItem("../images/open0.gif","宋体");
FontItems[1] = new MenuItem("../images/open0.gif","行体");
FontItems[2] = new MenuItem("../images/open0.gif","草体");

addSubMenu("File",FileItems); //Id,MenuItems
addSubMenu("Edit",EditItems);
addSubMenu("Tools",ToolsItems);
addSubMenu("Help",HelpItems);
addSubMenu("OptionFont",FontItems);

function onFileOpen()
{
//ToDo
}

function onFileExit()
{
window.close();
}
document.onclick = onClick; // 捕获click事件
document.onmouseover = onMouseOver; // 捕获mouseover事件
document.onmouseout = onMouseOut; // 捕获mouseout事件
</script>

运行效果：

</td> </tr> <tr> <td vAlign=top align=left height="100%">
↑返回目录
前一篇: 怎样捕捉 Delete 键
后一篇: Ui System