DHTMLX Front-end framework build one of your application Tutorials (iii)--Add a menu

Introduction to the Menu

This article describes adding a menu build to the layout in the previous section:

　　

　　

We do not do any processing of the menu just here to populate as part of the interface.

Here we introduce the Dhtmlxmenu component. The data for this component can be loaded from XML or JSON.

It has two types of rendering:

1. Source Picture It is placed in the IMGs folder

2. Customize the picture any location you want to use

　　

To add a menu to the layout:

1. Use the Dhtmlx.image_path property to set the global path of the source picture

　　

Dhtmlx.image_path = "codebase/imgs/";d htmlxevent (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); });

　　

The source images in the downloaded dhtmlx Suite file are placed in the IMGs.

2. Use the Attachmenu () method to add a menu to the layout

　　

Dhtmlxevent (window, "load",function() {    varnew Dhtmlxlayoutobject ( Document.body, "2U");    Layout.cells ("a"). SetText ("Contacts");    Layout.cells ("B"). SetText ("Contact Details");    Layout.cells ("B"). SetWidth (+);      var menu = Layout.attachmenu ();
});

3. Copy the icons folder from the sample project to Contact_manager

4. Use the Seticonspath () method to set the icon path of the menu

　　

5. Add the Data folder to the Contact_manager folder

　　

6. Add a "menu.xml" file to the Data folder.

7. Add  The following code to the file:

　　

<?XML version= "1.0"?><Menu>    <ItemID= "Ftop"text= "File">//1st Item<ItemID= "Ftnwin"text= "New window"/>//1 sub-item<ItemID= "Ftprint"text= "Print"enabled= "false"Imgdis= "Printer.png"/>        <ItemID= "Fts0"type= "Separator"/>//' separator ' splits level in 2 parts<ItemID= "Ftquit"text= "Quit"/>    </Item>    <ItemID= "Etop"text= "Edit"enabled= "false"/>//2nd Item<ItemID= "HTop"text= "Help"enabled= "false"/>//3rd Item</Menu>

　　

8. Load the file using the Loadxml () method:

　　

　　

　　

　　

DHTMLX Front-end framework build one of your application Tutorials (iii)--Add a menu