如何从声明性方法中捕获调整大小事件 floatingpane JavaScript？

Question

我在这里看到了编程示例：

var fp;
require(["dojo/ready", "dojo/parser", "dojo/on","dojox/layout/FloatingPane", "dijit/form/Button"], function(ready, parser, on, FloatingPane, Button) {
ready(function() {
    parser.parse();
    fp = new FloatingPane({
        title: "Test",
        resizable: true,
        dockable: false,
        style:"position:absolute;top:0;left:0;width:100px;height:100px;visibility:hidden;",
        id: "fp"
        }, dojo.byId("fp"));
        fp.startup();
        on(fp._resizeHandle, "resize", function(e) {
           // Event handler
            console.log("test");
        });
    });
});

问题是，当我使用声明性方法创建浮动窗格时，我该怎么做？

Answer 1

您可以使用 dojo 声明式脚本示例。
参见 https://dojotoolkit.org/documentation/tutorials/1.10/declarative/
特别是第 "Modifying Behavior"

您将需要像这样的东西：

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js" data-dojo-config="parseOnLoad:true"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/resources/dojo.css"> 
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/dijit.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojox/layout/resources/FloatingPane.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojox/layout/resources/ResizeHandle.css">


<div id="floatingPane" data-dojo-type="dojox/layout/FloatingPane"
            data-dojo-props="title: 'Hello World!',resizable:true,dockable: false">
  <p>I am a floating pane. That makes me happy See browser console for the resize event.</p>

  <script type="dojo/aspect" data-dojo-advice="after" data-dojo-event="resize">
           console.log("resize is executed");
  </script>

</div>

如何从声明性方法中捕获调整大小事件 floatingpane JavaScript？

How to capture resize event floatingpane JavaScript from declarative method?

javascript

dojo