• ArcGIS API For JavaScript 开发(三)使用小部件设计页面框架


    其实上一个的鹰眼、比例尺、图例等都是小部件;这篇文章主要是页面布局设计,dojo提供了非常多的小部件,从功能的角度可以分为3大类:表单小部件、布局小部件和应用小部件。

    表单小部件于HTML中的表单部件。

    布局小部件主要有3类,主要在dijit中:

    面板:盛放和显示大块的内容,包括文本、图片、图表以及其他小部件。类的小部件有ContentPane、FloatingPane和ExpandoPane,后面两个位于DojoX中。

    对齐方式容器:BorderContainer、LayoutContainer与SplitContainer。

    堆叠容器:此类小部件可以把前面的小部件层叠在一起,而一次只显示一个屏面。AccordionContainer、TabContainer、StackContainer。

    使用面板组织页面元素

    最常用的面板是ContentPane,在dojo中有两个ContentPane的实现,一个是dijit/layout/ContentPane ;另一个是 dojox/layout/ContentPane ,后者扩展了前者。当提及ContentPane,如果不特别说明,就是值的前者,也就是dijit中的ContentPane。

    Dijit/TitlePane与ContentPane基本类似,只是在ContentPane的基础上增加了一个标题栏,其中包含一个标题和一个按钮,按钮的作用是隐藏或显示其内容。

    Dojo/layout/FloatingPane 是可以模拟Windows窗口效果的浮动面板,dojo/layout/ExpandoPane 也与 ContentPane 基本类似,但是可以折叠或展开,并可以包含其他布局小部件。

    ContentPane

    是所有布局小部件的基石

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>面板ContentPage的Demo</title>
    
        <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/tundra/tundra.css">
        <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
        <script src="http://js.arcgis.com/3.9/"></script>
    
        <script>
            dojoConfig = { isDebug: true, async: true };
        </script>
    
        <script>
            require([
                "dojo/parser", "dijit/layout/ContentPane", "dijit/form/Button",
                "dojo/domReady!"
            ], function (parser) {
                parser.parse();
            });
        </script>
    
    </head>
    <body>
        <div data-dojo-type="dijit/layout/ContentPane" style="100px;height:200px;float:left;">
            <div data-dojo-type="dijit/form/Button">相关的信息</div>
        </div>
    </body>
    </html>

    注意的是在<html>标签中加入lang=en,但是在使用dojo小部件的时候一定要去掉,否则会出现“dojo/parser::parse() error”错误。如果要加入lang=en ,那么在dojoConfig中也要添加 lang:'en'。

    然后还有一点就是由于使用了 data-dojo-type 标签属性使用了dojo小部件,但是由于这个不是标准的HTML,浏览器不能直接解析dojo的小部件,所以需要使用dojo/parser的功能来解析。没错,dojo/parser的parse() 方法就是用于解析小部件的标签属性。

    FlaotingPane

    可以拖动、最大、最小

  • 相关阅读:
    括号序列的dp问题模型
    粉刷匠
    木棍加工
    物流运输
    最短路图
    DP基础(线性DP)总结
    离散化
    树链剖分
    NOIP2016 “西湖边超萌小松鼠” 模拟赛
    NOI导刊 2009 提高二
  • 原文地址:https://www.cnblogs.com/CreateFree/p/8393534.html
Copyright © 2020-2023  润新知