如何在“ dijit /布局/ BorderContainer”上顯示“ dojox /布局/ FloatingPane”

Question

我正在使用Dojo Toolkit 1.12。 如何顯示在dijit/layout/BorderContainer上移動的dojox/layout/FloatingPane 。 問題是我不知道srcNodeRef在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 /布局/ BorderContainer”上顯示“ dojox /布局/ FloatingPane”

問題描述

1 個解決方案

解決方案1
0 已采納 2017-08-11 16:51:55

如何在“ dijit /布局/ BorderContainer”上顯示“ dojox /布局/ FloatingPane”

問題描述

1 個解決方案

解決方案1 0 已采納 2017-08-11 16:51:55

解決方案1
0 已采納 2017-08-11 16:51:55