2017-08-09 9 views
0

私は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> 
+1

を助け、あなたがやっていることを説明し、「新しいFloatingPane({...}を定義する場合もコード –

+0

を投稿してください? ???) "どこに置くかわからないので、画面上に浮かぶ。 –

+0

申し訳ありませんが私はあなたが間違ってしまった。なぜあなたはそれをある場所に置くのですか?それを浮かせたいのですか? –

答えて

0

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

この例を見てみFloatingPaneは何が必要コンテンツを設定するプロパティ「コンテンツ」を有します。この例では、内容は宣言の一部、つまりFloatingPaneの作成中に設定されます。あなたがコンテンツを動的に設定したい場合は、あなたが

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

希望を使用することができ、これは

+0

それは残っており、動作します。ありがとうございました。 VARフローティング=新しいFloatingPane({ タイトル: "フローティングウィンドウ"、 サイズ変更可能:真、 ドッキング可能:真、 スタイル:「位置:絶対;トップ:は50px;左:は50px;幅:100ピクセル、高さ: 100px; " }、DomConstruct.create(" div "、null、dojo.body())); floating.addChild( 新しいコンテンツパネル({ コンテンツ: "FLOATING" }) ); floating.startup(); –

関連する問題