DHTMLX 前端架構 建立你的一個應用程式教程(四)--添加一個工具條toolbar

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

 

工具條例子

 

　　樣本如下：

　　

 

　　這裡我們使用的是dhtmlxToolbar 組件。

 

添加工具列到布局中：

 

　　1.使用attachToolbar() 方法初始化頁面 添加代碼到index.html中

　　

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();    menu.setIconsPath("icons/");    menu.loadStruct("data/menu.xml");    var toolbar = layout.attachToolbar(); 
});

　　

　　2.在data檔案夾中添加”toolbar.xml“檔案

　　

 

　　3.添加代碼到xml檔案中

　　

<?xml version="1.0"?><toolbar>   <item id="newContact" type="button" img="add_contact.gif"/>   <item id="delContact" type="button" text="Delete" img="delete_contact.gif"/>   <item id="sep01" type="separator"/>            <item id="help" type="button" text="Help"/></toolbar>

　　

　　4.設定自訂圖片路徑

　　

toolbar.setIconsPath("icons/");

　　

　　5.用loadStruct() 方法載入資料

　　

toolbar.loadStruct("data/toolbar.xml");

 

 

　　

DHTMLX 前端架構 建立你的一個應用程式教程(四)--添加一個工具條toolbar