回调的Javascript麻烦

我试图用库w2ui创建一个简单的GUI。但我在添加工具栏到我的主布局时遇到问题。在布局构建之前添加工具栏。回调的Javascript麻烦

我还不是很熟悉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/

任何帮助将是赞赏，

在此先感谢。

来源

2016-12-16 guillaume guerin

在你需要加载你的库小提琴。没有包括在内。 – zfrisch

你说得对，对不起外部资源没有保存 –

我已经四处搜索，但找不到任何使用回调的例子，就像在你的代码中一样。

我想也许你应该使用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

来源

2016-12-16 22:45:59 Aldana

回调的Javascript麻烦

回答

相关问题