Question

我试图用库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));

我也为我的问题做了一个小问题： https://jsfiddle.net/e1x1cg8j/5/

任何帮助将不胜感激，

提前致谢。

Answer 1

我一直在搜索，但在代码中找不到任何使用回调的示例。

我想也许您应该使用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();

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

查看可用于布局的this list of events。

--------编辑---------

同时检查into this

Javascript回调问题

1 个答案: