DHTMLX 前端架構 建立你的一個應用程式教程(三)--添加一個菜單

標籤：style   blog   http   color   io   ar   使用   sp   檔案   

 

菜單的介紹

 

　　這篇我們介紹將菜單組建添加到上節中的布局中：

　　

　　

　　我們不對菜單做任何處理  只是在這裡填充作為介面的一部分。

　　這裡我們介紹的是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 前端架構 建立你的一個應用程式教程(三)--添加一個菜單