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

 

菜单的介绍

 

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

　　

　　

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

　　这里我们介绍的是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()方法加载该文件：