DOJO調整div div

我有一個ID爲「panelContent」的div，我想調整div的大小，我目前的dojo程序可以移動一個div，我也想調整大小，任何人都可以幫我解決。DOJO調整div div

在此先感謝。

Javascript代碼：

require(["dojo/dnd/Moveable", "dojo/dom", "dojo/on", "dojo/domReady!"], 
    function(Moveable, dom, on){ 

    var dnd = new Moveable(dom.byId("panelContent")); 

});

來源

2017-06-15 Harsha

這可以通過使用dojo ResizeHandler來實現，所以setps使用它是：

導入dojox/layout/ResizeHandle
導入調整大小hander Css Style（適用於rende環和調整圖標）
設置您可調整大小的div poristion相對
實例化rsizeHandler和設定的目標，以你的DIV ID

這樣的實例化會是這樣：

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>

來源

2017-06-15 23:56:17

非常感謝你！ – Harsha

不客氣:) –

在下面的例子中你可以看到你是如何啓動dijit/layout/ContentPane和編程調整其大小（上按一下按鈕）。

基本上你需要：

找回ContentPane使用registry.byId()。
使用dojo setter .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>

來源

2017-06-15 12:55:00 GibboK

有趣，也dojox.layout.ResizeHandle將是instante調整大小，（儘管其在實驗版本並非正式的包）感謝分享 –

@bRIMOs。我已經嘗試了'dojox/layout/ResizeHandle'的代碼片段，但不幸的是，它不適用於Chrome版本58.0.3029.110（64位），並且適用於FireFox 54.0（64位）。我想這是'ResizeHandle'上的一個錯誤。你能重現這個問題嗎？再次感謝。 – GibboK

哦，是的thnx沒有注意到！這是奇怪的，問題是，我剛剛更改和早期版本（1.9），並且工作。你可以重試，可能在新版本的bug .. –

DOJO調整div div

回答

相關問題