1

tabバーを使った構成でデザインを考えているのですが、最初のホームページではtabバーを表示したくありません(リンクはあります)。
その他のページでは全てタブーバーを使いたいのですが、上手く設定する方法はありますでしょうか

1 件の回答 1

2

一応それっぽい動きはできている気はしますが、ちょっと不恰好です。
ngAnimateとかうまく使えばもっと良い感じにできるかもしれません(すみません、そこまではできませんでした)。

(function() {
    ons.bootstrap()
    .controller('mainCtrl', function($scope) {
      $scope.toTabbar = function(index) {
        if (index === 0) {
          $scope.home = true;
        } else if (index === 1) {
          $scope.comment = true;
        } else if (index === 2) {
          $scope.setting = true;
        }
        navi.pushPage('tabbar.html', { animation: 'slide' });
      };
    });
})();
<head>
    <link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/css/onsenui.css" rel="stylesheet"/>
    <link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/css/onsen-css-components.css" rel="stylesheet"/>
    <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/js/angular/angular.min.js"></script>
    <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/js/onsenui.min.js"></script>
</head>
<body>
  <ons-page ng-controller="mainCtrl">
    <ons-navigator var="navi">
      <ons-toolbar>
        <ons-toolbar-item class="center">HOME</ons-toolbar-item>
      </ons-toolbar>
      <br />
      <div style="text-align: center">
        <ons-button ng-click="toTabbar(0)">Home</ons-button>
        <ons-button ng-click="toTabbar(1)">Comment</ons-button>
        <ons-button ng-click="toTabbar(2)">Setting</ons-button>
      </div>
    </ons-navigator>
  </ons-page>

  <ons-template id="tabbar.html">
    <ons-page>
      <ons-tabbar var="tabbar">
        <ons-tabbar-item
            icon="home"
            label="Home"
            page="homeNavi.html"
            active="{{home}}"></ons-tabbar-item>
        <ons-tabbar-item
            icon="comment"
            label="Comments"
            page="commentNavi.html"
            active="{{comment}}"></ons-tabbar-item>
        <ons-tabbar-item
            icon="gear"
            label="Settings"
            page="settingNavi.html"
            active="{{setting}}"></ons-tabbar-item>
      </ons-tabbar>
    </ons-page>
  </ons-template>

  <ons-template id="homeNavi.html">
    <ons-navigator var="homeNavi" page="page1.html">
    </ons-navigator> 
  </ons-template>

  <ons-template id="commentNavi.html">
    <ons-navigator var="commentNavi" page="page2.html">
    </ons-navigator> 
  </ons-template>

  <ons-template id="settingNavi.html">
    <ons-navigator var="settingNavi" page="page3.html">
    </ons-navigator> 
  </ons-template>

  <ons-template id="page1.html">
    <ons-toolbar>
      <div class="left"><ons-toolbar-button ng-click="navi.popPage()">HOME</ons-toolbar-button></div>
      <div class="center">Page 1</div>
    </ons-toolbar>
    <div style="text-align: center">
      <br />
      <ons-button ng-click="homeNavi.pushPage('page1-2.html')">
        Push New Page
      </ons-button>
    </div>
  </ons-template>

  <ons-template id="page2.html">
    <ons-toolbar>
      <div class="left"><ons-toolbar-button ng-click="navi.popPage()">HOME</ons-toolbar-button></div>
      <div class="center">Page 2</div>
    </ons-toolbar>
    <div style="text-align: center">
      <h1>Page 2</h1>
    </div>
  </ons-template>

  <ons-template id="page3.html">
    <ons-toolbar>
      <div class="left"><ons-toolbar-button ng-click="navi.popPage()">HOME</ons-toolbar-button></div>
      <div class="center">Page 3</div>
    </ons-toolbar>
    <div style="text-align: center">
      <h1>Page 3</h1>
    </div>
  </ons-template>

  <ons-template id="page1-2.html">
    <ons-toolbar>
      <div class="left"><ons-back-button>Back</ons-back-button></div>
      <div class="center">New Page</div>
    </ons-toolbar>
    <div style="text-align: center">
      <br />
      <ons-button ng-click="homeNavi.popPage();">
        Pop Page
  	  </ons-button>
    </div>
  </ons-template>  
</body>

3
  • @ita_3yさん 返信いただきまして有難うございます!!今考えているのはhome画面からの導線が4つあるので、子ページを開くときに所定のボタンを押した時に"パラメータ"を渡して開ければと思っているのですが、そういった設定は可能でしょうか?(戴いたソースですとhome画面から目的のページ(Comments)を開くのに2回ボタンを押していますが、1回にしたいです。) Commented 2015年3月18日 8:34
  • @いっちゃん コードを修正しました。まだうまく動かないところがありますが、一応振り分けは確認できると思います(Home, Comment, Settingの順に押してみてください。反対だとうまく動きません)。
    – ita_3y
    Commented 2015年3月18日 17:12
  • @ita_3yさん ご記入有り難うございます。何とか自分のしたいデザインに出来そうです。 Commented 2015年3月19日 1:05

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。