Dojo開發之佈局容器和堆疊容器使用

暖楓無敵發表於2015-12-15

      本篇部落格我們來學習一下Dojo開發中常用到的佈局容器BorderContainer和堆疊容器的使用。

      1、BorderContainer

      它是一個佈局容器，主要分為5個區域，上下左右中。每個BorderContainer都有兩種不同的方式佈局，可以通過“design”屬性來控制，分別為headline和sidebar，佈局方式如下圖所示：


      2、堆疊容器

      當頁面中的內容比較多的時候，可以使用堆疊容器顯示部分元素，主要有3種型別:

      StackContainer最普通的一種，需要自己編寫控制和程式碼。

      AccordionContainer導航按鈕在皮膚內顯示。

     TabContainer按鈕在前端一字排開。


    3、示例程式碼

    

<!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:'top',splitter:false"
            style="background-color: grey">
            合肥市防汛抗旱綜合應用系統
        </div>
        <div data-dojo-type="dijit/layout/AccordionContainer" data-dojo-props="minSize:20,region:'right',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:'center',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:'bottom'"
            style="background-color: red">
            暖楓無敵2015 @版權所有 當前時間：2015年12月15日 星期二
        </div>
    </div>
</body>
</html>

    4、顯示效果如下圖所示：

    

===========================================================================

如果覺得對您有幫助，微信掃一掃支援一下：




相關文章