コールバックでJavascriptの問題

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)); 

私も私の問題のためにjsfiddleをした： 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のレイアウトを参照してください。

-------- EDIT ---------

はまた、あなたはあなたのライブラリをロードする必要がフィドルでinto this