tabバーを使った構成でデザインを考えているのですが、最初のホームページではtabバーを表示したくありません(リンクはあります)。
その他のページでは全てタブーバーを使いたいのですが、上手く設定する方法はありますでしょうか
1 件の回答
一応それっぽい動きはできている気はしますが、ちょっと不恰好です。
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>
-
@ita_3yさん 返信いただきまして有難うございます!!今考えているのはhome画面からの導線が4つあるので、子ページを開くときに所定のボタンを押した時に"パラメータ"を渡して開ければと思っているのですが、そういった設定は可能でしょうか?(戴いたソースですとhome画面から目的のページ(Comments)を開くのに2回ボタンを押していますが、1回にしたいです。)– アンアンCommented 2015年3月18日 8:34
-
@いっちゃん コードを修正しました。まだうまく動かないところがありますが、一応振り分けは確認できると思います(Home, Comment, Settingの順に押してみてください。反対だとうまく動きません)。– ita_3yCommented 2015年3月18日 17:12
-