DHTMLX 前端框架建立你的一个应用程序教程(三)--添加一个菜单

浏览数：47 / 时间：2015年06月09日

菜单的介绍

　　这篇我们介绍将菜单组建添加到上节中的布局中：

　　我们不对菜单做任何处理只是在这里填充作为界面的一部分。

　　这里我们介绍的是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>