zoukankan      html  css  js  c++  java
  • 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()方法加载该文件:

      

      

      

      

  • 相关阅读:
    3D数学 矩阵的更多知识(5)
    D3D中的光照(1)
    双节棍(C语言版)
    D3D中的Alpha融合技术(1)
    D3D编程必备的数学知识(5)
    Direct3D中的绘制(1)
    初始化Direct3D(2)
    D3D中的纹理映射(2)
    Direct3D中的绘制(1)
    D3D编程必备的数学知识(2)
  • 原文地址:https://www.cnblogs.com/DemoLee/p/4032245.html
Copyright © 2011-2022 走看看