0

我正在尝试使用库 w2ui 创建一个简单的 GUI。但是在我的主布局中添加工具栏时遇到了问题。在构建布局之前添加工具栏。

我对javascript回调不是很熟悉，因为我还在学习。

这是我的 javascript 代码：

function buildMainLayout(toolbar) {
    $(function () {
        var pstyle = 'background-color: #F5F6F7; border: 1px solid #dfdfdf; padding: 5px;';
        $('#layout').w2layout({
            name: 'layout',
            panels: [
                { type: 'top',  size: 50, resizable: true, style: pstyle, content: 'top', id: 'toolbar' },
                { type: 'left', size: 200, resizable: true, style: pstyle, content: 'left' },
                { type: 'main', style: pstyle, content: 'main' },
                { type: 'preview', size: '50%', resizable: true, style: pstyle, content: 'preview' },
                { type: 'right', size: 200, resizable: true, style: pstyle, content: 'right' },
                { type: 'bottom', size: 50, resizable: true, style: pstyle, content: 'bottom' }
            ]
        });
    }, toolbar);
    $('#layout').height($( window ).height());
}

function buildMainToolbar(callback) {
    $().w2toolbar({
        name: 'toolbar',
        items: [
            { type: 'check',  id: 'item1', caption: 'Check', img: 'icon-page', checked: true },
            { type: 'break',  id: 'break0' },
            { type: 'menu',   id: 'item2', caption: 'Drop Down', img: 'icon-folder', items: [
                { text: 'Item 1', icon: 'icon-page' }, 
                { text: 'Item 2', icon: 'icon-page' }, 
                { text: 'Item 3', value: 'Item Three', icon: 'icon-page' }
            ]},
            { type: 'break', id: 'break1' },
            { type: 'radio',  id: 'item3',  group: '1', caption: 'Radio 1', icon: 'fa-star', checked: true },
            { type: 'radio',  id: 'item4',  group: '1', caption: 'Radio 2', icon: 'fa-star-empty' },
            { type: 'spacer' },
            { type: 'button',  id: 'item5',  caption: 'Item 5', icon: 'fa-home' }
        ]
    }, callback);
}

function addToolbar() {
    w2ui['layout'].content('top', w2ui['toolbar']);
}

我是这样称呼它的：

    buildMainLayout(buildMainToolbar(addToolbar));

我还为我的问题制作了一个 jsfiddle： https ://jsfiddle.net/e1x1cg8j/5/

任何帮助，将不胜感激，

提前致谢。

4

1 回答 1

0

我四处搜索，但找不到任何使用回调的示例，如您的代码中那样。

我认为也许你应该使用onRender选项。

像这样的东西：

function buildMainLayout() {
    $(function () {
        var pstyle = 'background-color: #F5F6F7; border: 1px solid #dfdfdf; padding: 5px;';
        $('#layout').w2layout({
            name: 'layout',
            panels: [
                { type: 'top',  size: 50, resizable: true, style: pstyle, content: 'top', id: 'toolbar' },
                { type: 'left', size: 200, resizable: true, style: pstyle, content: 'left' },
                { type: 'main', style: pstyle, content: 'main' },
                { type: 'preview', size: '50%', resizable: true, style: pstyle, content: 'preview' },
                { type: 'right', size: 200, resizable: true, style: pstyle, content: 'right' },
                { type: 'bottom', size: 50, resizable: true, style: pstyle, content: 'bottom' }
            ],
      onRender: buildMainToolbar
        });
    });
    $('#layout').height($( window ).height());
}

function buildMainToolbar() {
    $().w2toolbar({
        name: 'toolbar',
        items: [
            { type: 'check',  id: 'item1', caption: 'Check', img: 'icon-page', checked: true },
            { type: 'break',  id: 'break0' },
            { type: 'menu',   id: 'item2', caption: 'Drop Down', img: 'icon-folder', items: [
                { text: 'Item 1', icon: 'icon-page' }, 
                { text: 'Item 2', icon: 'icon-page' }, 
                { text: 'Item 3', value: 'Item Three', icon: 'icon-page' }
            ]},
            { type: 'break', id: 'break1' },
            { type: 'radio',  id: 'item3',  group: '1', caption: 'Radio 1', icon: 'fa-star', checked: true },
            { type: 'radio',  id: 'item4',  group: '1', caption: 'Radio 2', icon: 'fa-star-empty' },
            { type: 'spacer' },
            { type: 'button',  id: 'item5',  caption: 'Item 5', icon: 'fa-home' }
        ],
    onRender: addToolbar
    });
}

function addToolbar() {
    w2ui['layout'].content('top', w2ui['toolbar']);
}

buildMainLayout();

我不确定这是否是正确的事件。

查看此布局可用的事件列表。

- - - - 编辑 - - - - -

还要检查这个

于 2016-12-16T22:45:59.763 回答