开发者社区> 技术小胖子> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

Dojo学习笔记(八):Dojo布局——面板

简介:
+关注继续查看

    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的滚动方向,有verticalhorizontal两种选择。需要注意的是,滚动的方向必须出现内容显示不下的情况,否则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的滚动方向,有verticalhorizontal两种选择。需要注意的是,滚动的方向必须出现内容显示不下的情况,否则SrollPane的显示效果和ContentPane没有区别。





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









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

相关文章
MQTT_mosquitto 老版本移植受阻 | 学习笔记
快速学习 MQTT_mosquitto 老版本移植受阻
18 0
子图布局|学习笔记
快速学习子图布局
8 0
PDO 学习路径|学习笔记
快速学习 PDO 学习路径
7 0
spring学习笔记(五)自定义spring-boot-starter(1)
spring学习笔记(五)自定义spring-boot-starter(1)
15 0
2D效果|学习笔记
快速学习2D 效果
39 0
2D效果|学习笔记
快速学习2D 效果
41 0
LDD3学习笔记(22):感想
 经过几天奋战终于将LDD3看完,应该是属于略看,看过之后的感想是:1、需要学习的东西还很多! 2、中文版的翻译真的不行。 3、内核真的不简单。
930 0
文章
问答
文章排行榜
最热
最新
相关课程
更多
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载