如何检测拆分条何时移动？或者何时调整窗格大小时？

Question

这里是一个 link 到响应式分离器的 plunk：https://embed.plnkr.co/0yo35xOiSmF5eG6R?show=V.view.xml,preview。

如何检测窗格之间的分隔栏何时移动并因此调整大小？ window.resize() 仅适用于 window 和缩小 in/zooming。

Answer 1

您可以使用 sap.ui.layout.Splitter 和 Resize Event。

Answer 2

ResponsiveSplitter 没有任何 resize 事件。您可以使用 jQuery 和 DOM 事件实现您自己的处理程序。 Here is an example on Plunker.

控制器：

sap.ui.define([
    "sap/ui/core/mvc/Controller"
], function (Controller) {
    "use strict";

    return Controller.extend("demo.V", {

        _paneWidths: [],

        onInit: function() {
            this._resizeHandler = this.onSplitterResize.bind(this);

            document.addEventListener("touchend", this._resizeHandler);
            document.addEventListener("mouseup", this._resizeHandler);
        },

        onExit: function() {
            document.removeEventListener("touchend", this._resizeHandler);
            document.removeEventListener("mouseup", this._resizeHandler);
        },

        onSplitterResize: function() {
            var resized = false;
            var panes = this.getView().byId("paneContainer").getPanes();
            for (var index = 0; index < panes.length; index++) {
                var paneWidth = $(panes[index].getContent().getDomRef()).parent().css("width");
                if (paneWidth !== this._paneWidths[index]) {
                    this._paneWidths[index] = paneWidth;
                    resized = true;
                }
            }

            if (resized) {
                // here goes your resize logic
            }
        }

    });
});

Answer 3

sap/ui/layout/Splitter 附带 event resize:

<layout:Splitter resize=".onPaneResize" />

从 v1.92 开始： sap/ui/layout/PaneContainer，经常在 sap/ui/layout/ResponsiveSplitter 中使用，也有 resize event :
```
<layout:ResponsiveSplitter>
  <layout:PaneContainer resize=".onPaneResize" /> 
```

演示套件 sample of ResponsiveSplitter 已相应更新。如果您移动栏，应用会相应地报告尺寸。

如何检测拆分条何时移动？或者何时调整窗格大小时？

How do I detect when the splitter bar is moved? Or when the panes are being resized?

javascript

sapui5