回調的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麻煩

回答

相關問題