zoukankan      html  css  js  c++  java
  • 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

    可以拖动、最大、最小

  • 相关阅读:
    [saiku] 系统登录成功后查询Cubes
    216. Combination Sum III
    215. Kth Largest Element in an Array
    214. Shortest Palindrome
    213. House Robber II
    212. Word Search II
    211. Add and Search Word
    210. Course Schedule II
    分硬币问题
    开始学习Python
  • 原文地址:https://www.cnblogs.com/CreateFree/p/8393534.html
Copyright © 2011-2022 走看看