私は "panelContent"というIDを持つdivを持っています。divのサイズを変更したいのですが、私の現在のdojoプログラムもdivを移動できます。DOJO divのサイズを変更する
ありがとうございました。
Javascriptコード：以下の例では
require(["dojo/dnd/Moveable", "dojo/dom", "dojo/on", "dojo/domReady!"],
function(Moveable, dom, on){
var dnd = new Moveable(dom.byId("panelContent"));
});
`
setpsがそれを使用するので、これは、dojo ResizeHandlerを使用することによって達成することが可能である。
はdojox/layout/ResizeHandle
インポートリサイズをインポートハンドダーCss Style（rendeリングやアイコンのサイズを変更）
はそうインスタンス化するようなものだあなたのdivのid
にrsizeHandlerと設定した目標をインスタンス化し、相対
var handle = new ResizeHandle({
targetId:"panelContent"
}).placeAt("panelContent");
あなたは働くスニペットを見つけ出すことができます
require([
"dojox/layout/ResizeHandle",
"dojo/dnd/move",
'dojo/dom',
'dojo/domReady!'
], function(ResizeHandle, dojoDnd, Dom) {
new dojoDnd.parentConstrainedMoveable(Dom.byId("panelContent"), {
handle: this.focusNode,
area: "content",
within: true
})
var handle = new ResizeHandle({
targetId:"panelContent"
}).placeAt("panelContent");
});#panelContent {
background-color:green;
position:relative;
width:200px;
height:100px;
cursor:pointer;
}
body,html,#container {
width:100%;
height:100%;
}<link href="//ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojox/layout/resources/ResizeHandle.css" rel="stylesheet"/>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.12.1/dijit/themes/claro/claro.css" />
<script>
window.dojoConfig = {
parseOnLoad: false,
async: true
};
</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js"></script>
<div id="container" class="claro">
<div id="panelContent">
<div id="handler"></div>
</div>
</div>あなたがdijit/layout/ContentPaneを開始し、（ボタンのクリックに）プログラムでサイズを変更することができますどのように見ることができます。
registry.byId()を使用してContentPane検索： は、基本的には、する必要があります。
.set('propertyName', yourValue)を使用してContentPaneのスタイルプロパティを変更します。require(["dijit/layout/ContentPane", "dijit/registry", "dijit/form/Button", "dojo/domReady!"], function(ContentPane, registry, Button) {
new ContentPane({
content: "<p>Optionally set new content now</p>",
style: "width: 150px; height:150px; background-color:yellow;"
}, "panelContent").startup();
var myButton = new Button({
label: "Click me to enlarge the panel!",
onClick: function() {
registry.byId("panelContent").set('style','width: 350px; background-color:red;')
}
}, "button").startup();
});<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.12.1/dijit/themes/claro/claro.css" />
<script>
window.dojoConfig = {
parseOnLoad: false,
async: true
};
</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.1/dojo/dojo.js">
</script>
<body class="claro">
<div id="panelContent" data-dojo-type="dijit/layout/ContentPane">
Hi, pretty boring huh?
</div>
<button id="button" type="button"></button>
</body>興味深い、またdojox.layout.ResizeHandleは（その実験的なバージョンではない公式のパッケージにもかかわらず）、instanteのサイズ変更のための共有のための –
@bRIMOsのおかげだろう。あなたのスニペットを 'dojox/layout/ResizeHandle'にしようとしましたが、残念ながらChromeバージョン58.0.3029.110（64ビット）では動作せず、FireFox 54.0（64ビット）でも動作します。私はそれが 'ResizeHandle'のバグだと思います。この問題を再現できますか？もう一度感謝します。 – GibboK
ああはいthnxはそれに気付かなかった！それは厄介です、問題は、私は以前のバージョン（1.9）に変更されました。あなたは再試行できますか？新しいバージョンではおそらくバグです。 –
ありがとうございました！ – Harsha
あなたは大歓迎です:) –