DHTMLX 前端框架建立你的一个应用程序教程(四)--添加一个工具条toolbar

使用dhtmlxToolbar组件创建工具栏的步骤与实践

最新推荐文章于 2023-03-17 17:47:06 发布

转载最新推荐文章于 2023-03-17 17:47:06 发布 · 215 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/DemoLee/p/4032256.html

文章标签：

#前端框架

本文详细介绍了如何使用dhtmlxToolbar组件为网页添加工具栏，包括初始化页面、添加工具栏代码、配置工具栏图标路径、加载工具栏结构等关键步骤。通过提供具体的XML文件示例，帮助开发者快速掌握工具栏的定制与应用。

工具条例子

　　样本如下：

　　这里我们使用的是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>