Use of layout containers and stacking containers in Dojo development-JS Tutorial-php.cn

Use of layout containers and stacking containers in Dojo development

黄舟

Release： 2017-02-09 16:46:32

Original

1485 people have browsed it

In this blog, let’s learn the use of layout containers BorderContainer and stacking containers commonly used in Dojo development.

1. BorderContainer

It is a layout container, mainly divided into 5 areas, top, bottom, left, center. Each BorderContainer has two different layouts, which can be controlled through the "design" attribute, namely headline and sidebar. The layout methods are as shown in the figure below:

Use of layout containers and stacking containers in Dojo development

2. Stacking container

When there is a lot of content on the page, you can use stacking containers to display some elements. There are three main types:

StackContainer is the most common type and requires you to write control and code yourself.

AccordionContainer navigation buttons are displayed in the panel.

TabContainer buttons are lined up on the front end.

3. Sample code

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>dojo之BorderContainer和堆叠容器</title>
    <style type="text/css">
        html, body
        {
            width: 100%;
            height: 100%;
            margin: 0;
            overflow: hidden;
        }
        #borderContainer
        {
            width: 100%;
            height: 100%;
        }
    </style>
    <script type="text/javascript">
        dojoConfig = { parseOnLoad: true };
    </script>
    <link href="Scripts/dijit/themes/claro/claro.css" rel="stylesheet" />
    <script type="text/javascript" src="Scripts/dojo/dojo.js"></script>
    <script type="text/javascript">
        require(["dojo/parser", "dijit/layout/ContentPane", "dijit/layout/BorderContainer",
         "dijit/layout/TabContainer", "dijit/layout/AccordionContainer", "dijit/layout/AccordionPane"]);
    </script>
</head>
<body class="claro">
    <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="gutters:true,liveSplitters:false"
        id="borderContainer">
        <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:&#39;top&#39;,splitter:false"
            style="background-color: grey">
            合肥市防汛抗旱综合应用系统
        </div>
        <div data-dojo-type="dijit/layout/AccordionContainer" data-dojo-props="minSize:20,region:&#39;right&#39;,splitter:true"
            style="width: 300px;" id="leftAccordion">
            <div data-dojo-type="dijit/layout/AccordionPane" title="汛情概览">
            </div>
            <div data-dojo-type="dijit/layout/AccordionPane" title="实时雨情">
            </div>
            <div data-dojo-type="dijit/layout/AccordionPane" title="汛情预警" selected="true">
            </div>
            <div data-dojo-type="dijit/layout/AccordionPane" title="实时水情">
            </div>
        </div>
        <div data-dojo-type="dijit/layout/TabContainer" data-dojo-props="region:&#39;center&#39;,tabStrip:true">
            <div data-dojo-type="dijit/layout/ContentPane" title="系统首页" selected="true">
                系统首页</div>
            <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="closable:true" title="实时视频">
                实时视频</div>
            <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="closable:true" title="水利工程">
                水利工程</div>
        </div>
        <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:&#39;bottom&#39;"
            style="background-color: red">
            暖枫无敌2015 @版权所有 当前时间：2015年12月15日 星期二
        </div>
    </div>
</body>
</html>

Copy after login

4. The display effect is as shown below:

Use of layout containers and stacking containers in Dojo development

## The above is the content used in layout containers and stacking containers developed by Dojo. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!