首页 > 代码库 > DHTMLX 前端框架 建立你的一个应用程序教程(三)--添加一个菜单
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()方法加载该文件：
DHTMLX 前端框架 建立你的一个应用程序教程(三)--添加一个菜单
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。