'autoposition' 属性未在 JsPanel 之间应用

Question

我开始在工作中的项目中使用 JsPanel，我对为什么 'autoposition' 没有在某些面板之间应用有一些疑问。

我有 4 个面板：A、B、C 和 D。

一个面板：

jsPanel.create({
    id:          'A',
    theme:       'primary',
    headerTitle: 'A panel',
    position:    { my: 'left-top',
                   at: 'left-top',
                   offsetX: '0px',
                   offsetY: '0px',
                   autoposition: 'down'
                 },
    contentSize: '450 250',
    content:     '<p> Test test test</p>',
    callback: function () {
        this.content.style.padding = '20px';
    },
    onbeforeclose: function () {
        return confirm('Are you sure?');
    }
});

B 面板：

jsPanel.create({
    id:          'B',
    theme:       'primary',
    headerTitle: 'B panel',
    position:    { my: 'center-top',
                   at: 'center-top',
                   offsetX: '0px',
                   offsetY: '0px',
                   autoposition: 'down'
                 },
    contentSize: '450 250',
    content:     '<p> Test test test</p>',
    callback: function () {
        this.content.style.padding = '20px';
    },
    onbeforeclose: function () {
        return confirm('Are you sure?');
    }
});

C面板：

jsPanel.create({
    id:          'C',
    theme:       'primary',
    headerTitle: 'C panel',
    position:    { my: 'right-top',
                   at: 'right-top',
                   offsetX: '0px',
                   offsetY: '0px',
                   autoposition: 'down'
                 },
    contentSize: '450 250',
    content:     '<p> Test test test</p>',
    callback: function () {
        this.content.style.padding = '20px';
    },
    onbeforeclose: function () {
        return confirm('Are you sure?');
    }
});

D面板：

jsPanel.create({
    id:          'D',
    theme:       'primary',
    headerTitle: 'D panel',
    position:    { my: 'left-top',
                   at: 'left-bottom',
                   of: '#A',
                   autoposition: 'up'
                 },
    contentSize: '450 250',
    content:     '<p>Test test test</p>',
    callback: function () {
        this.content.style.padding = '20px';
    },
    onbeforeclose: function () {
        return confirm('Are you sure?');
    }
});

阅读documentation of the 'position' option, specifically the 'autoposition' attribute，说你可以设置一个值来增加面板之间的间隙，以防止它们相互堆积：

'down' for panels positioned using either 'left-top', 'center-top' or 'right-top' for both my: and at: setting autoposition to 'down' will automatically add a vertical offset downwards to each elmt in order to prevent them from piling up on each other. Removing a jsPanel will automatically reposition the remaining panel in the same stack.

'up' for panels positioned using either 'left-bottom', 'center-bottom' or 'right-bottom' for both my: and at: setting autoposition to 'up' will automatically add a vertical offset upwards to each elmt in order to prevent them from piling up on each other. Removing a jsPanel will automatically reposition the remaining panel in the same stack.

但对我来说它没有被应用。我试图删除 A 或 D 中的 autoposition 但没有结果。

那么我做错了什么或者我误解了什么？

此致。

-- 编辑 1:

我实现了分离添加：

offsetY: '8px',

到panel D但我认为这不是正确的解决方案...

Answer 1

我找到问题了。这是对职位的误解。看到 example number 5 将面板一个接一个地添加，位置是：

my: 'right-top',
at: 'right-top',

然后你设置：

autoposition: 'down',

所以在面板 D 中我必须更改：

position:    { my: 'left-top',
               at: 'left-bottom',
               of: '#A',
               autoposition: 'up'
             },

到

position:    { my: 'left-top',
               at: 'left-top',
               of: '#A',
               autoposition: 'down',
               offsetY: 4px
             },

offsetY 是可选的。默认情况下 JsPanel 添加了 4px 分隔，但如果您查看图像，水平分隔为 4px + 4px 所以我添加了 4 个额外的像素以在视觉上匹配水平分隔和垂直分隔。

此致！

'autoposition' 属性未在 JsPanel 之间应用

'autoposition' attribute not being applied between JsPanels

javascript

panel