时间戳

首页 > 解决方案 > 'autoposition' 属性未在 JsPanel 之间应用

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

问题描述

我开始在工作项目中使用JsPanel，我对为什么在某些面板之间没有应用“自动定位”有些疑问。

我有 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?');
    }
});

阅读“位置”选项的文档，特别是“自动位置”属性，说您可以设置一个值以在面板之间添加间隙以防止它们相互堆积：

'down' 对于使用 'left-top'、'center-top' 或 'right-top' 定位的面板，my: 和 at: 将 autoposition 设置为 'down' 将自动按顺序向每个 elmt 添加一个垂直向下偏移以防止它们相互堆积。删除 jsPanel 将自动将剩余面板重新定位在同一堆栈中。

'up' 对于使用 'left-bottom'、'center-bottom' 或 'right-bottom' 定位的面板，my: 和 at: 将 autoposition 设置为 'up' 将自动按顺序向每个 elmt 添加垂直偏移量以防止它们相互堆积。删除 jsPanel 将自动将剩余面板重新定位在同一堆栈中。

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

面板

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

问候。

-- 编辑 1：

我已经实现了分离添加：

offsetY: '8px',

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

标签： javascriptpanel

解决方案

我发现了问题。这是对职位的误解。看到将面板添加到另一个下方的示例编号 5 ，这些位置是：

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

然后你设置：

autoposition: 'down',

所以在面板 DI 中必须改变：

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 个额外像素以在视觉上匹配水平分隔和垂直分隔。

问候！

推荐阅读