菜单的介绍
这篇我们介绍将菜单组建添加到上节中的布局中：
我们不对菜单做任何处理 只是在这里填充作为界面的一部分。
这里我们介绍的是dhtmlxMenu 组件。 这个组件的数据我们可以从XML或者JSON中加载
它有两种呈现类型：
1.源图片 它放在imgs文件夹中
2.自定义图片 任何你想使用的位置
1.用dhtmlx.image_path 属性来设置源图片的全局路径
dhtmlx.image_path = "codebase/imgs/";dhtmlxEvent(window,"load",function(){
var layout = new dhtmlXLayoutObject(document.body,"2U");
layout.cells("a").setText("Contacts");
layout.cells("b").setText("Contact Details");
layout.cells("b").setWidth(500);
});
在下载的DHTMLX Suite 文件中 源图片都放在imgs中。
2.使用attachMenu()方法将菜单添加到布局中
dhtmlxEvent(window,"load",function(){ var layout = new dhtmlXLayoutObject(document.body,"2U"); layout.cells("a").setText("Contacts"); layout.cells("b").setText("Contact Details"); layout.cells("b").setWidth(500); var menu = layout.attachMenu();
});
3.从示例项目中复制icons文件夹到contact_manager 中去
4.使用setIconsPath() 方法设置菜单的icon路径
5.在contact_manager 文件夹中添加data文件夹
6.在data文件夹中添加一个“menu.xml” 文件。
7.在menu.xml“ 文件中添加下面代码：
<?xml version="1.0"?> <menu> <item id="fTop" text="File"> //1st item <item id="ftNWin" text="New Window"/> //1 sub-item <item id="ftPrint" text="Print" enabled="false" imgdis="printer.png"/> <item id="fts0" type="separator"/>//‘separator‘ splits level in 2 parts <item id="ftQuit" text="Quit"/> </item> <item id="eTop" text="Edit" enabled="false"/> //2nd item <item id="hTop" text="Help" enabled="false"/> //3rd item </menu>
8.使用loadXML()方法加载该文件：
DHTMLX 前端框架 建立你的一个应用程序教程(三)--添加一个菜单
原文：http://www.cnblogs.com/DemoLee/p/4032245.html