私は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>
を助け、あなたがやっていることを説明し、「新しいFloatingPane({...}を定義する場合もコード –
を投稿してください? ???) "どこに置くかわからないので、画面上に浮かぶ。 –
申し訳ありませんが私はあなたが間違ってしまった。なぜあなたはそれをある場所に置くのですか?それを浮かせたいのですか? –