As stated in the title, we are looking for ways to change the menu of ons-tabbar.
Specifically, when transitioning from screen A to screen B, the ons-tab tag in ons-tabbar is
I would like to change it.
If you know how to implement this, please let me know.
monaca onsen-ui angularjs cordova
Wouldn't it be possible to turn on/off the ons-tab display using ng-show?
Each controller notifies indexController of ON/OFF.
<!DOCTYPE HTML>
<html>
<head>
<metacharset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scale=no">
<script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">
<script>
var app=ons.bootstrap("myApp", ["onsen"));
app.controller("indexController", function($scope){
// flag definition
$scope.isHome=false;
$scope.isFav=false;
$scope.$on("isHome", function(e,flag){
$scope.isHome=flag;
});
$scope.$on("isFav", function(e,flag){
$scope.isFav=flag;
});
});
app.controller("homeController",["$scope","$rootScope", function($scope,$rootScope){
$rootScope.$broadcast("isHome", false);
$rootScope.$broadcast("isFav", true);
}]);
app.controller("favController",["$scope","$rootScope", function($scope,$rootScope){
$rootScope.$broadcast("isHome", true);
$rootScope.$broadcast("isFav", false);
}]);
app.controller("settingsController", ["$scope", "$rootScope", function($scope,$rootScope){
$rootScope.$broadcast("isHome", true);
$rootScope.$broadcast("isFav", true);
}]);
</script>
</head>
<bodying-controller="indexController">
<ons-navigator>
<ons-tabbar>
<ons-tab page="home.html"ng-show="isHome" active="true">
<ons-iconion="ion-home"></ons-icon>
<span style="font-size:12px">Home</span>
</ons-tab>
<ons-tab page="fav.html"ng-show="isFav">
<ons-iconion="ion-star">/ons-icon>
<span style="font-size:12px">Favorites</span>
</ons-tab>
<ons-tab page="settings.html">
<ons-iconion="ion-gear-a">/ons-icon>
<span style="font-size:12px">Settings</span>
</ons-tab>
</ons-tabbar>
<ons-template id="home.html">
<ons-pageing-controller="homeController">
<ons-toolbar>
<div class="center">Home</div>
</ons-toolbar>
</ons-page>
</ons-template>
<ons-template id="fav.html">
<ons-pageing-controller="favController">
<ons-toolbar>
<div class="center">Fav</div>
</ons-toolbar>
</ons-page>
</ons-template>
<ons-template id="settings.html">
<ons-pageing-controller="settingsController">
<ons-toolbar>
<div class="center">Settings</div>
</ons-toolbar>
</ons-page>
</ons-template>
</ons-navigator>
</body>
</html>
Transition from screen A to screen B
This statement assumes that you want to display a different menu when you pushPage in one tab.
The transition deepens the hierarchy, so instead of changing the tab menu,
I think it would be more natural to have tabs on each one.
If you want to change the menu when you switch from tab A to tab B,
I think it would be better to review the screen design and avoid using tabs.
ons.bootstrap();<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/js/angular/angular.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/js/onsenui.min.js"></script>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/css/onsenui.css"rel="stylesheet"/>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/css/onsen-css-components.css"rel="stylesheet"/>
<ons-navigator title="Navigator" var="myNavigator" page="page1.html">
</ons-navigator>
<ons-template id="page1.html">
<ons-page>
<ons-tabbar>
<ons-tab page="home.html" label="Home" icon="ion-home" active="true">/ons-tab>
<ons-tab page="comments.html" label="Comments" icon="ion-chatbox-working">/ons-tab>
<ons-tab page="tags.html" label="Tags" icon="ion-ios-pricetag">/ons-tab>
<ons-tab page="settings.html" label="Settings" icon="ion-ios-cog">/ons-tab>
</ons-tabbar>
</ons-page>
</ons-template>
<ons-template id="home.html">
<ons-toolbar>
<div class="center">Home</div>
</ons-toolbar>
<div style="text-align:center">
<br>
<ons-button modulator="light" onclick="myNavigator.pushPage('page2.html', {animation:'slide'})">
Push Page
</ons-button>
</div>
</ons-template>
<ons-template id="comments.html">
<ons-toolbar>
<div class="center">Comments</div>
</ons-toolbar>
<p style="padding-top:100px;color:#999;text-align:center">Comments Page Contents</p>
</ons-template>
<ons-template id="page2.html">
<ons-page>
<ons-tabbar>
<ons-tab page="apple.html" label="apple" icon="apple" active="true">/ons-tab>
<ons-tab page="css3.html" label="css3" icon="css3">/ons-tab>
<ons-tab page="tags.html" label="github" icon="github"></ons-tab>
<ons-tab page="settings.html" label="twitter" icon="ion-social-twitter">/ons-tab>
</ons-tabbar>
</ons-page>
</ons-template>
<ons-template id="apple.html">
<ons-toolbar>
<div class="left">
<ons-back-button>Back</ons-back-button>
</div>
<div class="center">Apple</div>
</ons-toolbar>
<p style="padding-top:100px;color:#999;text-align:center">Apple Page Contents</p>
</ons-template>
<ons-template id="css3.html">
<ons-toolbar>
<div class="center">CSS3</div>
</ons-toolbar>
<p style="padding-top:100px;color:#999;text-align:center">CSS3 Page Contents</p>
</ons-template>
Thank you very much for your reply.
I found out that "ng-show" and "ng-hide" existed during the investigation.
I don't really understand how to use it.
Try trial and error using the above sources.
© 2024 OneMinuteCode. All rights reserved.