备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

Dojo学习笔记（八）：Dojo布局——面板

2017-11-15 2651
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

    Dojo提供了多种基本的布局方式，使用这些布局，可以有层次，有意义的组织控件，使得 web 界面获得更好的用户体验。

    Dojo提供布局小部件分为三类：面板、对齐方式容器和堆叠容器。

1、dijit/layout/ConentPane

    ContentPane，顾名思义，就是用于放置若干内容的面板，是各种布局的基本元素。ContentPane 的功能类似于 iFrame。除此之外 ContentPane 还可以与其他 Layout 控件互相嵌套。

ContentPane声明法示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        body{ width: 100%;height: 100%; }
    </style>
    <script type="text/javascript" src="dojo/dojo.js" djConfig="parseOnLoad:true">
    </script>
    <script type="text/javascript">
        dojo.require("dijit.layout.ContentPane");
    </script>
    <title>ContentPane学习</title>
</head>
<body>
<div dojoType="dijit.layout.ContentPane" id="myFirstContentPane"
     href="TestContentPane.html">
</div>
</body>
</html>

ContentPane程序生成法示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        body{ width: 100%;height: 100%; }
    </style>
    <script type="text/javascript" src="dojo/dojo.js" djConfig="parseOnLoad:true">
    </script>
    <script type="text/javascript">
        /*1.7以前版本http://dojotoolkit.org/reference-guide/1.10/dojo/domReady.html#dojo-domready
        dojo.require("dijit.layout.ContentPane");
        dojo.addOnLoad(function(){
            var myFirstContentPane = new dijit.layout.ContentPane({
                id: "myFirstContentPane",
                href:"testcontentPane.html"
            },dojo.byId("myFirstContentPane"));
            myFirstContentPane.startup();
        });
        */
        require(["dijit/layout/ContentPane", "dojo/domReady!"], function(ContentPane){
            var myFirstContentPane = new ContentPane({
                id: "myFirstContentPane",
                href:"testcontentPane.html"
            },dojo.byId("myFirstContentPane"));
            myFirstContentPane.startup();
        });
    </script>
    <title>ContentPane学习</title>
</head>
<body>
<div id="myFirstContentPane">
</div>
</body>
</html>

输出结果：

    

wKioL1Q_hAqCVU8oAABfAizvf4Q400.jpg

    说明：

    （1）在这个例子中，ContentPane 完全实现了iFrame 的功能，但是有些区别，在代码中会把testcontentPane.html页面中的<title>测试</title>属性带过来。

    （2）在使用程序生成法时，不要忘记startup()


1.1 Content属性：String, DomNode, NodeList

    指ContentPane中显示的内容。如果没有定义 href 属性，ContentPane 组件内将显示 content 内容。否则将显示 href 页面的内容。content 可以是 String, DomNode 和 NodeList 三种类型。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        body{ width: 100%;height: 100%; }
    </style>
    <script type="text/javascript" src="dojo/dojo.js" djConfig="parseOnLoad:true">
    </script>
    <script type="text/javascript">
        require(["dijit/layout/ContentPane", "dojo/domReady!"], function(ContentPane){
            // 创建一个 DomNode, table 元素
            var myDomNode = document.createElement("table");
            //Table 的第一行是”Hello, Dojo World!”
            var myTD1 = document.createElement("td");
            myTD1.innerHTML = "Hello, Dojo World!";
            var myTR1 = document.createElement("tr");
            myTR1.appendChild(myTD1);
            myDomNode.appendChild(myTR1);
            //Table 的第二行是”Hello, ContentPane World!”
            var myTD2 = document.createElement("td");
            myTD2.innerHTML = "Hello, ContentPane World!";
            var myTR2 = document.createElement("tr");
            myTR2.appendChild(myTD2);
            myDomNode.appendChild(myTR2);
            myDomNode.border = 1;
            // 将创建的 DomNode 赋给 content 属性
            var myFirstContentPane = new ContentPane({
                id: "myFirstContentPane",
                //href:"TestContentPane.html"
                content: myDomNode
            },dojo.byId("myFirstContentPane"));
            myFirstContentPane.startup();
        });
    </script>
    <title>ContentPane学习</title>
</head>
<body>
<div id="myFirstContentPane">
</div>
</body>
</html>

输出结果：

Hello, Dojo World!
Hello, ContentPane World!


1.2 title属性：String

    title属性定义了ContentPane的标题。这个标题只有当 ContentPane 作为 TabContainer/ StackContainer 等 Layout 控件的子控件时，才可以看到。此时该属性值显示于该 Tab 页的标题处。

<div class="centerPanel" data-dojo-type="dijit.layout.TabContainer" data-dojo-props="region: 'center', tabPosition: 'bottom'">
        <div data-dojo-type="dijit.layout.ContentPane" title="Group 1">
            <h4>Group 1 Content</h4>
            <p>Group 1 测试</p>
        </div>
        <div data-dojo-type="dijit.layout.ContentPane" title="Group Two">
            <h4>Group 2 Content</h4>
            <p>Group 2 测试</p>
        </div>
        <div data-dojo-type="dijit.layout.ContentPane" title="Group Three">
            <h4>Group 3 Content</h4>
            <p>Group 3 测试</p>
        </div>
</div>

输出结果：

wKioL1Q_iAyyqtOvAABbUTfDryc071.jpg

1.3 loadingMessage/errorMessage属性：String

    当ContentPane内容/页面加载中，或出现错误时，ContentPane 将会显示的内容。该信息可以在loading.js文件中更改。

myContentPane.attr("loadingMessage", "Still Loading …");


1.4 placeAt(reference, position)函数

    这是一个常用的方法，dojo控件都实现了这个方法。运用这个方法可以自由地放置控件的位置。该方法有两个参数：reference, 和 position。可以接受的 reference 参数类型有：String, DomNode 和 _Widget。其中 String 为引用 Dom 节点 (DomNode)，或者 dojo 控件 (_Widget) 的 id。而被position参数传入的dojo控件，必须是实现了addChild方法的类型，可接受的 position 参数类型有 Int和String。传入的 String 参数必须是”first”,”last”,”before”,”after”中的一个。

Parameter Type Description
reference String | DomNode | _Widget

Widget, DOMNode, or id of widget or DOMNode
position String | Int

Optional.

If reference is a widget (or id of widget), and that widget has an ".addChild" method, it will be called passing this widget instance into that method, supplying the optional position index passed. In this case position (if specified) should be an integer.

If reference is a DOMNode (or id matching a DOMNode but not a widget), the position argument can be a numeric index or a string "first", "last", "before", or "after", same as dojo/dom-construct::place().

 
myContentPane.placeAt("OuterContentPane", "first");

    该例子中，myContentPane 将被嵌套放入 OuterContentPane 的第一个位置。


1.5 attr(name, value)函数

    attr是常用的dojo控件通用方法，用于为 dojo 控件的属性赋值。如：_Widget.attr(“value”, 3) 相当于 _Widget.setValue(3)。在新的版本中，许多用于修改属性的方法被不推荐了，如 setValue, setHref 等，均由 attr(“value”, value), attr(“href”, href) 方法取代。

Parameter Type Description
name String | Object

The property to get or set. If an object is passed here and not a string, its keys are used as names of attributes to be set and the value of the object as values to set in the widget.
value Object

Optional.

Optional. If provided, attr() operates as a setter. If omitted, the current value of the named property is returned.

备注：dojox.layout.ContentPane扩展了dijit.layout.ContentPane。


2 dijit/TitlePane

    TitlePane本质上仍然是一个ContentPane, 不同点是，TitlePane自带了Title 的显示。标题栏中包括一按钮与一标题，通过按钮可控制显示或隐藏内容。在 TitlePane 中，title 属性定义了显示的标题。

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="dijit/themes/soria/soria.css">
<script type="text/javascript" src="dojo/dojo.js" djConfig="parseOnLoad:true"></script>
<script type="text/javascript">
    require(["dijit/TitlePane","dojo/parser"]);
</script>
<title>TitlePane学习</title>
</head>
<body class="soria">
<div id="myTitlePane" style="border: solid black 1px;">
    <p id="last">Hello TitlePane!</p>
    <div data-dojo-type="dijit/TitlePane" data-dojo-props="title: 'Pane #1'">
        I'm pane #1
    </div>
    <div data-dojo-type="dijit/TitlePane" data-dojo-props="title: 'Pane #2'">
        I'm pane #2
    </div>
    <div data-dojo-type="dijit/TitlePane" data-dojo-props="title: 'Pane #3'">
        I'm pane #3
    </div>
</div>
</body>
</html>

输出结果：

wKiom1Q_m8DBIesoAAEzK-wF2gM191.jpg

2.1 duration属性：number

    收起和打开 TitlePane，是一个动画过程，duration 定义了该动画持续的时间，单位是毫秒。

myTP.attr("duration", 1000);


3 dojox/layout/FloatingPane

    FloatingPane是可以随意移动的TitlePane，可以模拟Windows窗口效果的浮动面板，可以在页面上随意拖拽该面板，该面板具有最基本的最小化、还原、最大化和关闭按钮等，可以改变大小，可以嵌套内部窗口，可以打开其他页面等。

    FloatingPane声明法示例：

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="dijit/themes/soria/soria.css">
    <link rel="stylesheet" type="text/css"   href="dojox/layout/resources/FloatingPane.css">
    <link rel="stylesheet" type="text/css"   href="dojox/layout/resources/ResizeHandle.css">
    <script type="text/javascript" src="dojo/dojo.js" djConfig="parseOnLoad:true"></script>
    <script type="text/javascript">
        require(["dojox/layout/FloatingPane","dojo/parser"]);
    </script>
    <title>FloatingPane学习</title>
</head>
<body class="soria">
<div dojoType="dojox.layout.FloatingPane" id="myFloatingPane"
     title="Floating World" closable="true"
     resizable="true" dockable="true"
     style="position:absolute;top:0;left:0;width:150px;height:150px;">
    The Content of the Floating World!
</div>
</body>
</html>

 FloatingPane程序生成法示例：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="dijit/themes/soria/soria.css">
    <link rel="stylesheet" type="text/css"   href="dojox/layout/resources/FloatingPane.css">
    <link rel="stylesheet" type="text/css"   href="dojox/layout/resources/ResizeHandle.css">
    <script type="text/javascript" src="dojo/dojo.js" djConfig="parseOnLoad:true"></script>
    <script type="text/javascript">
        require(["dojox/layout/FloatingPane","dojo/parser", "dojo/domReady!"],function(FloatingPane){
            var myFP = new FloatingPane({
                        id: "myFloatingPane",
                        content: " The Content of the Floating World!",
                        resizable:true,
                        dockable:true,
                        title: "Floating World",
                        closable:true,
                        style:{ position:"absolute", top:0, left:0, width:"150px", height:"150px"}
                    },dojo.byId("myFloatingPane")
            );
            myFP.startup();
        });
    </script>
    <title>FloatingPane学习</title>
</head>
<body class="soria">
<div id="myFloatingPane">
    The Content of the Floating World!
</div>
</body>
</html>

运行结果：

wKioL1Q_nUWAXOwxAACCGsxzeb4390.jpg

    上面创建方法得到的FloatingPane显示如下图所示，用户可以自由地在它的外层容器中移动位置。

说明：

    （1）必须引用 FloatingPane.css；

    （2）如果需要具备改变容器大小 (resize) 功能，需引用 ResizeHandle.css；

    （3）Dojo建议在动态创建小部件结束后，调用startup()。


3.1 closable属性：boolean

    closable 属性定义了该面板是否可以被关闭。


3.2 resizable属性：boolean

    该属性定义了FloatingPane是否可以在运行时改变大小。当 resizable 为 true 并引用了 ResizeHandle.css时，用户可以通过拖动控制点来改变面板的大小。


3.3 dockable属性：boolean

    该属性定义了FloatingPane是否可以被最小化到页面的最下方。与 TitlePane 可以收起面板不同的是，FloatingPane 可以将面板最小化到页面的最下方，如同 Windows 的工具栏。当dockable为true 时，用户可以通过点击面板标题位置向下的三角来最小化面板。


3.4 sytle属性：object

    该属性定义了面板的位置。其中position定义是绝对位置还是相对位置，top和left定义了面板左上角的位置，width和height定义了面板的大小。但当面板被拖动或改变大小时，该值不会跟着变化。


4 dojox/layout/ExpandoPane 

    与ContentPane基本类似，不过可以展开或折叠，不可以包含其他布局小部件。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="dijit/themes/soria/soria.css">
    <link rel="stylesheet" type="text/css"   href="dojox/layout/resources/ExpandoPane.css">
    <style type="text/css">
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
        }
        #borderContainer {
            width: 100%;
            height: 100%;
        }
    </style>
    <script type="text/javascript" src="dojo/dojo.js" djConfig="parseOnLoad:true"></script>
    <script type="text/javascript">
        require(["dijit/layout/ContentPane","dijit/layout/BorderContainer","dojox/layout/ExpandoPane","dojo/parser", "dojo/domReady!"]);
    </script>
    <title>ExpandoPane学习</title>
</head>
<body class="soria">
<div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'sidebar', gutters:true, liveSplitters:true" id="borderContainer">
    <div data-dojo-type="dojox.layout.ExpandoPane" title="Left Expando" data-dojo-props="title: 'Left Expando', maxWidth:225, splitter:true, region:'leading'" style="width: 225px;">
        Hi. I'm the Expando Pane
    </div>
    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="splitter:true, region:'center'">Hi, I'm center</div>
</div>
</body>
</html>

输出结果：

wKioL1Q_o3PRamRyAAEM2BnNHgM505.jpg


5 dojox/layout/ScrollPane

    ScrollPane是可以滚动的面板。当面板内容超出了面板显示范围时，使用 ScrollPane 可以让内容滚动起来。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="dijit/themes/soria/soria.css">
    <link rel="stylesheet" type="text/css" href="dojox/layout/resources/ScrollPane.css">
    <script type="text/javascript" src="dojo/dojo.js" djConfig="parseOnLoad:true"></script>
    <script type="text/javascript">
        require(["dijit/TitlePane", "dojox/layout/ScrollPane", "dojo/parser", "dojo/domReady!"]);
    </script>
    <title>ScrollPane学习</title>
</head>
<body class="soria">
<div style="float:left; padding-right:12px;">
    <div dojoType="dojox.layout.ScrollPane" style="width:150px; height:300px;"  orientation="vertical" id="vert">
        <table id="tableinvert">
            <tr>
                <td>
                    <div dojoType="dijit.TitlePane" title="1" sytle="width:100%;height:100%;">title Pane content
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div dojoType="dijit.TitlePane" title="2" sytle="width:100%; height:100%;">
                        title Pane content
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div dojoType="dijit.TitlePane" title="3" sytle="width:100%; height:100%;">title Pane content
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div dojoType="dijit.TitlePane" title="4" sytle="width:100%; height:100%;">
                        title Pane content
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div dojoType="dijit.TitlePane" title="5" sytle="width:100%; height:100%;">
                        title Pane content
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div dojoType="dijit.TitlePane" title="6" sytle="width:100%; height:100%;">
                        title Pane content
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div dojoType="dijit.TitlePane" title="7" sytle="width:100%; height:100%;">
                        title Pane content
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div dojoType="dijit.TitlePane" title="8" sytle="width:100%; height:100%;">
                        title Pane content
                    </div>
                </td>
            </tr>
        </table>
    </div>
</div>
</body>
</html>

结果：

wKioL1Q_pqzwSTMoAAC4PZAvUUs173.jpg

    说明：必须引用dojox/layout/resources/ScrollPane.css，否则在面板内容滚动时，不会显示滚动滑块。


5.1 orientation属性：String

    定义了ScrollPane的滚动方向，有vertical和horizontal两种选择。需要注意的是，滚动的方向必须出现内容显示不下的情况，否则SrollPane的显示效果和ContentPane没有区别。







    Dojo提供了多种基本的布局方式，使用这些布局，可以有层次，有意义的组织控件，使得 web 界面获得更好的用户体验。

    Dojo提供布局小部件分为三类：面板、对齐方式容器和堆叠容器。

1、dijit/layout/ConentPane

    ContentPane，顾名思义，就是用于放置若干内容的面板，是各种布局的基本元素。ContentPane 的功能类似于 iFrame。除此之外 ContentPane 还可以与其他 Layout 控件互相嵌套。

ContentPane声明法示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        body{ width: 100%;height: 100%; }
    </style>
    <script type="text/javascript" src="dojo/dojo.js" djConfig="parseOnLoad:true">
    </script>
    <script type="text/javascript">
        dojo.require("dijit.layout.ContentPane");
    </script>
    <title>ContentPane学习</title>
</head>
<body>
<div dojoType="dijit.layout.ContentPane" id="myFirstContentPane"
     href="TestContentPane.html">
</div>
</body>
</html>

ContentPane程序生成法示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        body{ width: 100%;height: 100%; }
    </style>
    <script type="text/javascript" src="dojo/dojo.js" djConfig="parseOnLoad:true">
    </script>
    <script type="text/javascript">
        /*1.7以前版本http://dojotoolkit.org/reference-guide/1.10/dojo/domReady.html#dojo-domready
        dojo.require("dijit.layout.ContentPane");
        dojo.addOnLoad(function(){
            var myFirstContentPane = new dijit.layout.ContentPane({
                id: "myFirstContentPane",
                href:"testcontentPane.html"
            },dojo.byId("myFirstContentPane"));
            myFirstContentPane.startup();
        });
        */
        require(["dijit/layout/ContentPane", "dojo/domReady!"], function(ContentPane){
            var myFirstContentPane = new ContentPane({
                id: "myFirstContentPane",
                href:"testcontentPane.html"
            },dojo.byId("myFirstContentPane"));
            myFirstContentPane.startup();
        });
    </script>
    <title>ContentPane学习</title>
</head>
<body>
<div id="myFirstContentPane">
</div>
</body>
</html>

输出结果：

    

wKioL1Q_hAqCVU8oAABfAizvf4Q400.jpg

    说明：

    （1）在这个例子中，ContentPane 完全实现了iFrame 的功能，但是有些区别，在代码中会把testcontentPane.html页面中的<title>测试</title>属性带过来。

    （2）在使用程序生成法时，不要忘记startup()


1.1 Content属性：String, DomNode, NodeList

    指ContentPane中显示的内容。如果没有定义 href 属性，ContentPane 组件内将显示 content 内容。否则将显示 href 页面的内容。content 可以是 String, DomNode 和 NodeList 三种类型。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        body{ width: 100%;height: 100%; }
    </style>
    <script type="text/javascript" src="dojo/dojo.js" djConfig="parseOnLoad:true">
    </script>
    <script type="text/javascript">
        require(["dijit/layout/ContentPane", "dojo/domReady!"], function(ContentPane){
            // 创建一个 DomNode, table 元素
            var myDomNode = document.createElement("table");
            //Table 的第一行是”Hello, Dojo World!”
            var myTD1 = document.createElement("td");
            myTD1.innerHTML = "Hello, Dojo World!";
            var myTR1 = document.createElement("tr");
            myTR1.appendChild(myTD1);
            myDomNode.appendChild(myTR1);
            //Table 的第二行是”Hello, ContentPane World!”
            var myTD2 = document.createElement("td");
            myTD2.innerHTML = "Hello, ContentPane World!";
            var myTR2 = document.createElement("tr");
            myTR2.appendChild(myTD2);
            myDomNode.appendChild(myTR2);
            myDomNode.border = 1;
            // 将创建的 DomNode 赋给 content 属性
            var myFirstContentPane = new ContentPane({
                id: "myFirstContentPane",
                //href:"TestContentPane.html"
                content: myDomNode
            },dojo.byId("myFirstContentPane"));
            myFirstContentPane.startup();
        });
    </script>
    <title>ContentPane学习</title>
</head>
<body>
<div id="myFirstContentPane">
</div>
</body>
</html>

输出结果：

Hello, Dojo World!
Hello, ContentPane World!


1.2 title属性：String

    title属性定义了ContentPane的标题。这个标题只有当 ContentPane 作为 TabContainer/ StackContainer 等 Layout 控件的子控件时，才可以看到。此时该属性值显示于该 Tab 页的标题处。

<div class="centerPanel" data-dojo-type="dijit.layout.TabContainer" data-dojo-props="region: 'center', tabPosition: 'bottom'">
        <div data-dojo-type="dijit.layout.ContentPane" title="Group 1">
            <h4>Group 1 Content</h4>
            <p>Group 1 测试</p>
        </div>
        <div data-dojo-type="dijit.layout.ContentPane" title="Group Two">
            <h4>Group 2 Content</h4>
            <p>Group 2 测试</p>
        </div>
        <div data-dojo-type="dijit.layout.ContentPane" title="Group Three">
            <h4>Group 3 Content</h4>
            <p>Group 3 测试</p>
        </div>
</div>

输出结果：

wKioL1Q_iAyyqtOvAABbUTfDryc071.jpg

1.3 loadingMessage/errorMessage属性：String

    当ContentPane内容/页面加载中，或出现错误时，ContentPane 将会显示的内容。该信息可以在loading.js文件中更改。

myContentPane.attr("loadingMessage", "Still Loading …");


1.4 placeAt(reference, position)函数

    这是一个常用的方法，dojo控件都实现了这个方法。运用这个方法可以自由地放置控件的位置。该方法有两个参数：reference, 和 position。可以接受的 reference 参数类型有：String, DomNode 和 _Widget。其中 String 为引用 Dom 节点 (DomNode)，或者 dojo 控件 (_Widget) 的 id。而被position参数传入的dojo控件，必须是实现了addChild方法的类型，可接受的 position 参数类型有 Int和String。传入的 String 参数必须是”first”,”last”,”before”,”after”中的一个。

Parameter Type Description
reference String | DomNode | _Widget

Widget, DOMNode, or id of widget or DOMNode
position String | Int

Optional.

If reference is a widget (or id of widget), and that widget has an ".addChild" method, it will be called passing this widget instance into that method, supplying the optional position index passed. In this case position (if specified) should be an integer.

If reference is a DOMNode (or id matching a DOMNode but not a widget), the position argument can be a numeric index or a string "first", "last", "before", or "after", same as dojo/dom-construct::place().

 
myContentPane.placeAt("OuterContentPane", "first");

    该例子中，myContentPane 将被嵌套放入 OuterContentPane 的第一个位置。


1.5 attr(name, value)函数

    attr是常用的dojo控件通用方法，用于为 dojo 控件的属性赋值。如：_Widget.attr(“value”, 3) 相当于 _Widget.setValue(3)。在新的版本中，许多用于修改属性的方法被不推荐了，如 setValue, setHref 等，均由 attr(“value”, value), attr(“href”, href) 方法取代。

Parameter Type Description
name String | Object

The property to get or set. If an object is passed here and not a string, its keys are used as names of attributes to be set and the value of the object as values to set in the widget.
value Object

Optional.

Optional. If provided, attr() operates as a setter. If omitted, the current value of the named property is returned.

备注：dojox.layout.ContentPane扩展了dijit.layout.ContentPane。


2 dijit/TitlePane

    TitlePane本质上仍然是一个ContentPane, 不同点是，TitlePane自带了Title 的显示。标题栏中包括一按钮与一标题，通过按钮可控制显示或隐藏内容。在 TitlePane 中，title 属性定义了显示的标题。

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="dijit/themes/soria/soria.css">
<script type="text/javascript" src="dojo/dojo.js" djConfig="parseOnLoad:true"></script>
<script type="text/javascript">
    require(["dijit/TitlePane","dojo/parser"]);
</script>
<title>TitlePane学习</title>
</head>
<body class="soria">
<div id="myTitlePane" style="border: solid black 1px;">
    <p id="last">Hello TitlePane!</p>
    <div data-dojo-type="dijit/TitlePane" data-dojo-props="title: 'Pane #1'">
        I'm pane #1
    </div>
    <div data-dojo-type="dijit/TitlePane" data-dojo-props="title: 'Pane #2'">
        I'm pane #2
    </div>
    <div data-dojo-type="dijit/TitlePane" data-dojo-props="title: 'Pane #3'">
        I'm pane #3
    </div>
</div>
</body>
</html>

输出结果：

wKiom1Q_m8DBIesoAAEzK-wF2gM191.jpg

2.1 duration属性：number

    收起和打开 TitlePane，是一个动画过程，duration 定义了该动画持续的时间，单位是毫秒。

myTP.attr("duration", 1000);


3 dojox/layout/FloatingPane

    FloatingPane是可以随意移动的TitlePane，可以模拟Windows窗口效果的浮动面板，可以在页面上随意拖拽该面板，该面板具有最基本的最小化、还原、最大化和关闭按钮等，可以改变大小，可以嵌套内部窗口，可以打开其他页面等。

    FloatingPane声明法示例：

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="dijit/themes/soria/soria.css">
    <link rel="stylesheet" type="text/css"   href="dojox/layout/resources/FloatingPane.css">
    <link rel="stylesheet" type="text/css"   href="dojox/layout/resources/ResizeHandle.css">
    <script type="text/javascript" src="dojo/dojo.js" djConfig="parseOnLoad:true"></script>
    <script type="text/javascript">
        require(["dojox/layout/FloatingPane","dojo/parser"]);
    </script>
    <title>FloatingPane学习</title>
</head>
<body class="soria">
<div dojoType="dojox.layout.FloatingPane" id="myFloatingPane"
     title="Floating World" closable="true"
     resizable="true" dockable="true"
     style="position:absolute;top:0;left:0;width:150px;height:150px;">
    The Content of the Floating World!
</div>
</body>
</html>

 FloatingPane程序生成法示例：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="dijit/themes/soria/soria.css">
    <link rel="stylesheet" type="text/css"   href="dojox/layout/resources/FloatingPane.css">
    <link rel="stylesheet" type="text/css"   href="dojox/layout/resources/ResizeHandle.css">
    <script type="text/javascript" src="dojo/dojo.js" djConfig="parseOnLoad:true"></script>
    <script type="text/javascript">
        require(["dojox/layout/FloatingPane","dojo/parser", "dojo/domReady!"],function(FloatingPane){
            var myFP = new FloatingPane({
                        id: "myFloatingPane",
                        content: " The Content of the Floating World!",
                        resizable:true,
                        dockable:true,
                        title: "Floating World",
                        closable:true,
                        style:{ position:"absolute", top:0, left:0, width:"150px", height:"150px"}
                    },dojo.byId("myFloatingPane")
            );
            myFP.startup();
        });
    </script>
    <title>FloatingPane学习</title>
</head>
<body class="soria">
<div id="myFloatingPane">
    The Content of the Floating World!
</div>
</body>
</html>

运行结果：

wKioL1Q_nUWAXOwxAACCGsxzeb4390.jpg

    上面创建方法得到的FloatingPane显示如下图所示，用户可以自由地在它的外层容器中移动位置。

说明：

    （1）必须引用 FloatingPane.css；

    （2）如果需要具备改变容器大小 (resize) 功能，需引用 ResizeHandle.css；

    （3）Dojo建议在动态创建小部件结束后，调用startup()。


3.1 closable属性：boolean

    closable 属性定义了该面板是否可以被关闭。


3.2 resizable属性：boolean

    该属性定义了FloatingPane是否可以在运行时改变大小。当 resizable 为 true 并引用了 ResizeHandle.css时，用户可以通过拖动控制点来改变面板的大小。


3.3 dockable属性：boolean

    该属性定义了FloatingPane是否可以被最小化到页面的最下方。与 TitlePane 可以收起面板不同的是，FloatingPane 可以将面板最小化到页面的最下方，如同 Windows 的工具栏。当dockable为true 时，用户可以通过点击面板标题位置向下的三角来最小化面板。


3.4 sytle属性：object

    该属性定义了面板的位置。其中position定义是绝对位置还是相对位置，top和left定义了面板左上角的位置，width和height定义了面板的大小。但当面板被拖动或改变大小时，该值不会跟着变化。


4 dojox/layout/ExpandoPane 

    与ContentPane基本类似，不过可以展开或折叠，不可以包含其他布局小部件。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="dijit/themes/soria/soria.css">
    <link rel="stylesheet" type="text/css"   href="dojox/layout/resources/ExpandoPane.css">
    <style type="text/css">
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
        }
        #borderContainer {
            width: 100%;
            height: 100%;
        }
    </style>
    <script type="text/javascript" src="dojo/dojo.js" djConfig="parseOnLoad:true"></script>
    <script type="text/javascript">
        require(["dijit/layout/ContentPane","dijit/layout/BorderContainer","dojox/layout/ExpandoPane","dojo/parser", "dojo/domReady!"]);
    </script>
    <title>ExpandoPane学习</title>
</head>
<body class="soria">
<div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'sidebar', gutters:true, liveSplitters:true" id="borderContainer">
    <div data-dojo-type="dojox.layout.ExpandoPane" title="Left Expando" data-dojo-props="title: 'Left Expando', maxWidth:225, splitter:true, region:'leading'" style="width: 225px;">
        Hi. I'm the Expando Pane
    </div>
    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="splitter:true, region:'center'">Hi, I'm center</div>
</div>
</body>
</html>

输出结果：

wKioL1Q_o3PRamRyAAEM2BnNHgM505.jpg


5 dojox/layout/ScrollPane

    ScrollPane是可以滚动的面板。当面板内容超出了面板显示范围时，使用 ScrollPane 可以让内容滚动起来。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="dijit/themes/soria/soria.css">
    <link rel="stylesheet" type="text/css" href="dojox/layout/resources/ScrollPane.css">
    <script type="text/javascript" src="dojo/dojo.js" djConfig="parseOnLoad:true"></script>
    <script type="text/javascript">
        require(["dijit/TitlePane", "dojox/layout/ScrollPane", "dojo/parser", "dojo/domReady!"]);
    </script>
    <title>ScrollPane学习</title>
</head>
<body class="soria">
<div style="float:left; padding-right:12px;">
    <div dojoType="dojox.layout.ScrollPane" style="width:150px; height:300px;"  orientation="vertical" id="vert">
        <table id="tableinvert">
            <tr>
                <td>
                    <div dojoType="dijit.TitlePane" title="1" sytle="width:100%;height:100%;">title Pane content
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div dojoType="dijit.TitlePane" title="2" sytle="width:100%; height:100%;">
                        title Pane content
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div dojoType="dijit.TitlePane" title="3" sytle="width:100%; height:100%;">title Pane content
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div dojoType="dijit.TitlePane" title="4" sytle="width:100%; height:100%;">
                        title Pane content
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div dojoType="dijit.TitlePane" title="5" sytle="width:100%; height:100%;">
                        title Pane content
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div dojoType="dijit.TitlePane" title="6" sytle="width:100%; height:100%;">
                        title Pane content
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div dojoType="dijit.TitlePane" title="7" sytle="width:100%; height:100%;">
                        title Pane content
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div dojoType="dijit.TitlePane" title="8" sytle="width:100%; height:100%;">
                        title Pane content
                    </div>
                </td>
            </tr>
        </table>
    </div>
</div>
</body>
</html>

结果：

wKioL1Q_pqzwSTMoAAC4PZAvUUs173.jpg

    说明：必须引用dojox/layout/resources/ScrollPane.css，否则在面板内容滚动时，不会显示滚动滑块。


5.1 orientation属性：String

    定义了ScrollPane的滚动方向，有vertical和horizontal两种选择。需要注意的是，滚动的方向必须出现内容显示不下的情况，否则SrollPane的显示效果和ContentPane没有区别。





     本文转自stock0991 51CTO博客，原文链接：http://blog.51cto.com/qing0991/1564104，如需转载请自行联系原作者









文章标签：
前端开发
JavaScript
容器
Windows
UED
技术小胖子
目录
相关文章
你挚爱的强哥
|
4月前
|
JavaScript
Vue在Element UI下使用富文本框插件quill-editor（我个人不推荐用这个复杂的富文本插件）
Vue在Element UI下使用富文本框插件quill-editor（我个人不推荐用这个复杂的富文本插件）
你挚爱的强哥
84 0
东小小川
|
8月前
Vue2-Element-ui滚动条美化
Vue2-Element-ui滚动条美化
东小小川
246 0
lqj_本人
|
前端开发 JavaScript 程序员
基于H5+css+JavaScript实现全屏覆盖导航栏
基于H5+css+JavaScript实现全屏覆盖导航栏
lqj_本人
220 0
基于H5+css+JavaScript实现全屏覆盖导航栏
游客y3drc72yycbqm
|
Web App开发 移动开发 HTML5
实现一个美化原生拖拽的draggable-polyfill
实现一个美化原生拖拽的draggable-polyfill
游客y3drc72yycbqm
360 0
实现一个美化原生拖拽的draggable-polyfill
天隆金
|
JavaScript 前端开发
基于jQuery和Bootstrap的手风琴垂直菜单
在线演示 本地下载
天隆金
866 0
哈你真皮
|
JavaScript
CSS3动画过渡的jquery动态弹出框插件
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.
哈你真皮
1148 0
技术小胖子
|
Web App开发 JavaScript
Dojo学习笔记（十六）：应用程序部件dijit/Tooltip、dijit/Dialog
技术小胖子
1989 0
技术小阿哥
|
前端开发 JavaScript CDN
Wijmo 更优美的jQuery UI部件集：自定义 C1WijMenu
技术小阿哥
1139 0
嗯哼9925
|
Web App开发 前端开发 JavaScript
jquery blockUI 扩展插件 Dialog
嗯哼9925
1339 0
技术小胖子
|
Web App开发 容器
Dojo学习笔记（十五）：Dojo滑动条Slider
技术小胖子
1576 0

热门文章

最新文章

  • 1
    理解事务的4种隔离级别
  • 2
    疑犯追踪第一季/全集Person Of Interest迅雷下载
  • 3
    简单实用的数据建模工具PDManer
  • 4
    详细讲解！Canal+Kafka实现MySQL与Redis数据同步！
  • 5
    71.7. Script for automatic startup on boot
  • 6
    关于Oracle客户端显示乱码问题
  • 7
    PHPWAMP站点管理的“域名模式”和“端口模式”详解、均支持自定义
  • 8
    jsHelper
  • 9
    学校里学不到的东西(一)
  • 10
    Python 3 教程一:入门
  • 1
    Python的装饰器
    39
  • 2
    R语言用潜类别混合效应模型(Latent Class Mixed Model ,LCMM)分析老年痴呆年龄数据
    33
  • 3
    数据分享|R语言用logistic逻辑回归和AFRIMA、ARIMA时间序列模型预测世界人口
    27
  • 4
    【视频】马尔可夫链蒙特卡罗方法MCMC原理与R语言实现|数据分享（下）
    29
  • 5
    【视频】马尔可夫链蒙特卡罗方法MCMC原理与R语言实现|数据分享（上）
    46
  • 6
    数据分享|数据探索电商平台用户行为流失可视化分析
    39
  • 7
    电商平台数据可视化分析网红零食销量
    24
  • 8
    R语言线性回归模型拟合诊断异常值分析家庭燃气消耗量和卡路里实例带自测题
    30
  • 9
    数据分享|R语言GLM广义线性模型：逻辑回归、泊松回归拟合小鼠临床试验数据（剂量和反应）示例和自测题
    24
  • 10
    数据分享|R语言逻辑回归、线性判别分析LDA、GAM、MARS、KNN、QDA、决策树、随机森林、SVM分类葡萄酒交叉验证ROC（下）
    29

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）