

表題の通り、スライドメニューとタブバーを併用したいのですが、できるのでしょうか。

現在Monacaのスライドメニューサンプルアプリを元に、ナビ付きタブバーのコードを組み合わせてみたのですが、スライドメニューが表示されません。

いろいろ検索してみたのですが、該当するものが見当たりませんでしたので、宜しくお願い致します。

[code]

    <ons-tabbar var="tabbar">
      <ons-tabbar-item icon="home" label="Home" page="page1.html" active="true"></ons-tabbar-item>
      <ons-tabbar-item icon="comment" label="Comments" page="comments.html"></ons-tabbar-item>
      <ons-tabbar-item icon="gear" label="Settings" page="settings.html"></ons-tabbar-item>
    </ons-tabbar>
    <ons-sliding-menu var="app.slidingMenu" menu-page="menu.html" main-page="page1.html" side="left" type="overlay" max-slide-distance="200px">
    </ons-sliding-menu>
[/code]


CC BY-SA 3.0
2015-03-04T08:05:18.133
7428
2015-03-05T04:08:59.437
8678
question
monaca onsen-ui
Monaca Onsen UI でスライドメニューとタブバーを併用したい。


`ons-sliding-menu`の中に`ons-tabbar`を入れたら動きました。

**index.html**

[code]

    <body>
        <ons-sliding-menu var="app.slidingMenu" menu-page="menu.html" side="left" type="overlay" max-slide-distance="200px">
            <ons-tabbar var="app.tabbar">
                <ons-tabbar-item
                    icon="home"
                    label="Home"
                    page="page1.html"
                    active="true"></ons-tabbar-item>
                <ons-tabbar-item
                    icon="comment"
                    label="Comments"
                    page="page2.html"></ons-tabbar-item>
                <ons-tabbar-item
                    icon="gear"
                    label="Settings"
                    page="page3.html"></ons-tabbar-item>
            </ons-tabbar>
        </ons-sliding-menu>
    </body>
    
[/code]

ただ、これだけだとスライドメニューを選択してもページが切り替わらないようです。  
※おそらく各タブバーがページを持っているため。

`menu.html`を下記のように変更したらスライドメニューでページが変わるようになりました。

**menu.html**

変更前（スライドメニューのメインページを設定）

[code]

    <ons-list-item
        modifier="tappable" class="list__item__line-height"
        onclick="app.slidingMenu.setMainPage('page1.html', {closeMenu: true})">
        <i class="fa fa-home fa-lg" style="color: #666"></i>
        &nbsp; Page 1
    </ons-list-item>
    
[/code]

変更後（タブバーのアクティブタブを設定）

[code]

    <ons-list-item
        modifier="tappable" class="list__item__line-height"
        onclick="app.tabbar.setActiveTab(0), app.slidingMenu.closeMenu()">
        <i class="fa fa-home fa-lg" style="color: #666"></i>
        &nbsp; Page 1
    </ons-list-item>
    
[/code]

注意事項：  
とりあえず動作確認できたレベルの実装なので参考程度にしていただいた方が良いと思います。


CC BY-SA 3.0
2015-03-05T04:08:59.437
7464
2015-03-05T04:08:59.437
3516
7428
answer