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()方法加载该文件:

      

      

      

      

  • 相关阅读:
    python爬虫之urllib库(三)
    python爬虫之urllib库(二)
    认识CSS中css引入方式、选择器、文本样式设置以及显示模式
    认识CSS中盒子模型
    python爬虫之urllib库(一)
    认识CSS中css背景样式设置
    python爬虫之认识爬虫和爬虫原理
    认识CSS中css的三大特性:层叠性、继承性以及优先级
    认识HTML中表格、列表标签以及表单控件
    python-基础学习篇(八)
  • 原文地址:https://www.cnblogs.com/DemoLee/p/4032245.html
Copyright © 2011-2022 走看看