javascript - DOJO 调整 div 大小

标签 javascript drag-and-drop dojo resize movable

我有一个 ID 为“panelContent”的 div,我想调整该 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"));

});

`

最佳答案

在下面的示例中,您可以看到如何启动 dijit/layout/ContentPane 并以编程方式调整其大小(单击按钮时)。

基本上你需要:

  • 使用 registry.byId() 检索您的 ContentPane
  • 使用 dojo setter 更改 ContentPane 的样式属性 .set('propertyName', yourValue);

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>

关于javascript - DOJO 调整 div 大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44564532/

相关文章:

javascript - 如何防止ajax中给出的 header 值的可见性以进行身份​​验证

javascript - Dojo - 尝试删除和添加项目到存储时出错(ItemFileWriteStore 断言失败)

javascript - 如何让 dojo.query 返回 dijit.Dialog 的值

javascript - 单击时调整 BorderContainer 的大小

javascript - JS - 如何获取重定向的URL

javascript - 用于静态 Web 项目的 Maven

javascript - 设置 C3.JS X 轴和文本

wpf - 在 ListView 中的项目之间绘制插入符号

javascript - 如何检测浏览器是否能够通过拖放接收文件

cocoa - 如何拖动 NSStatusItems