如何在 "dijit / layout / BorderContainer" 上显示 "dojox / layout / FloatingPane"

Question

我正在使用 Dojo Toolkit 1.12。如何显示在 dijit/layout/BorderContainer 上移动的 dojox/layout/FloatingPane。问题是我不知道 srcNodeRef 在哪里找到它，以便它可以在屏幕上移动。谢谢。

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>`
<html>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>Prueba</title>
    <!-- Estilos -->
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.12.2/dojo/resources/dojo.css" media="screen">
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.12.2/dijit/themes/claro/claro.css" media="screen">
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.12.2/dojox/layout/resources/FloatingPane.css"  media="screen">
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.12.2/dojox/layout/resources/ResizeHandle.css"  media="screen">
    <!-- CSS -->
    <style>
        body, html {width:100%; height:100%; margin:0; padding:0; overflow:hidden;}
    </style>
    <!-- Libraries -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.12.2/dojo/dojo.js">
    </script>
    <!-- Dojo -->        
    <script>
        require([
                "dijit/registry",
                "dijit/layout/BorderContainer",
                "dijit/layout/TabContainer",
                "dijit/layout/ContentPane",
                "dojox/layout/FloatingPane",
               "dojo/domReady!"
        ], function(
                registry,
                BorderContainer,
                TabContainer,
                ContentPane,
                FloatingPane) {
           //........................................................
           var border = new BorderContainer({
               design: "headline",
               style: "width: 100%; height: 100%; background-color: yellow;",
               design: "headline",
               liveSplitters: true,
               gutters: true
           }, "divBody");
           //........................................................
           border.addChild(
               new TabContainer({
                   region: "center",
                   id: "tabs",
                   tabPosition: "top"
               })
           );
           var tabs = registry.byId("tabs");
           tabs.addChild(
               new ContentPane({
                   content: "content Tab 1",
                   title: "Tab 1"
               })
           );
           tabs.addChild(
               new ContentPane({
                   content: "content Tab 2",
                   title: "Tab 2"
               })
           );
           //........................................................
           border.addChild(
               new ContentPane({
                   region: "top",
                   id: "top",
                   content: "HEADER"
               })
           );
           //........................................................
           border.addChild(
               new ContentPane({
                   region: "left",
                   id: "left", 
                   content: "LEFT",
                   splitter: true,
               })
           );
           //........................................................
           border.addChild(
               new ContentPane({
                   region: "bottom",
                   id: "footer",
                   content: "FOOTER",
                   splitter: false
               })
           );
           //........................................................
           border.startup();
           //........................................................
           var floating = new FloatingPane({
               id: "floating",
               title: "A floating pane",
               resizable: true,
               dockable: true,
               style: "position:absolute; top:0; left:0;width:100px; height:100px;"
           });
           floating.addChild(
               new ContentPane({
                   content: "FLOATING"
               })
           );
           floating.startup();
           //........................................................
       });
    </script>        
</head>
<body class="claro">
    <div id="divBody"></div>
</body>
</html>

Answer 1

看看这个例子

http://jsfiddle.net/icsteveoh/ADPZS/

FloatingPane 有一个属性 'content' 可以设置任何你需要的内容。在此示例中，内容被设置为声明的一部分，即在创建 FloatingPane 时。如果要动态设置内容，可以使用

dijit.byId('yourfloatingpaneid').set('content',"Hello again");

希望对您有所帮助

如何在 "dijit / layout / BorderContainer" 上显示 "dojox / layout / FloatingPane"

How do I show a "dojox / layout / FloatingPane" on a "dijit / layout / BorderContainer"

javascript

dojo