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

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

<%@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>

来源

2017-08-09 Juan Carlos

请解释你做了什么，也张贴代码 –

当定义了“新FloatingPane（{...}？ ???）“我不知道把它放在哪里，所以它漂浮在屏幕上。 –

对不起，如果我弄错了。你为什么想把它放在某个位置？你不想让它漂浮吗？ –

看看这个例子

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

FloatingPane有一个属性“内容”来设置任何你所需要的内容。在这个例子中，内容被设置为声明的一部分，即在创建FloatingPane时。如果你想动态设置的内容，你可以使用

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

希望这有助于

来源

2017-08-11 16:51:55

它保持和工作。谢谢。 VAR浮动=新FloatingPane（{ 标题： “A浮动窗格”，可调整大小：真，可停靠：真，样式：“位置是：绝对;顶部：50像素;左边：50像素;宽度：100像素;高度： 100px;“ }，DomConstruct.create（”div“，null，dojo.body（）））; floating.addChild（新内容区块（{内容：“FLOATING” }））; floating.startup（）; –

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

回答

相关问题