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()方法加載該文件：