离子替换新视图的选项卡和页脚
ionic replace tabs and footer for new view
我的代码笔链接：http://codepen.io/gauravcoder/pen/JGZjrb我制作了带有选项卡的离子页面，该选项卡具有选项卡，顶部和页脚的按钮。
现在我希望当单击页脚按钮时，顶部选项卡必须消失，并且带有页面标题的顶部标题栏应显示带有后退箭头以导航到后页。
我试图做，但无法弄清楚。
以下是附图。
检查图像 ： http://goo.gl/gPgz8e
法典：
angular.module('ionicApp.controllers', [])
.controller('Tab1Ctrl', function($scope){
})
.controller('Tab2Ctrl', function($scope){
})
.controller('Tab3Ctrl', function($scope){
});.btn-footer .button { margin: 0; }
.btn-footer .row { padding: 0; }
.btn-footer .col { padding: 0 5px; }
.img-box img { max-width: 100%; }
.p0 { padding: 0; }
.tabs-top-my .tab-nav.tabs { top: 0; }
.my-content-tabs > .row { height: 100%; }
.my-content-tabs .col-25,.my-content-tabs .col-20 { position:relative;}
.img-box {
height: 100%;
max-height: 100%;
position: absolute;
left: 0;
}
#maincontainer > div.scroll{padding-left:10px;}
.my-imgs-scroll { height: 100%; overflow:hidden !important; overflow-y:scroll !important; }
ion-scroll > div.scroll > img{ border-bottom:1px solid #eee;}<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic page</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<script src="//code.jquery.com/jquery-1.11.3.js"></script>
<script src="//fabricjs.com/lib/fabric_with_gestures.js"></script>
</head>
<body ng-controller="HomeTabCtrl">
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-view> </ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="right">
<div class="list">
<a class="item item-icon-left" href="#"><i class="icon ion-email"></i> Check mail</a>
<a class="item item-icon-left" href="#"> <i class="icon ion-chatbubble-working"></i>Call Ma</a>
<a class="item item-icon-left" href="#"> <i class="icon ion-mic-a"></i> Record album</a>
<a class="item item-icon-left" href="#"> <i class="icon ion-person-stalker"></i> Friends</a>
</div>
</ion-side-menu>
</ion-side-menus>
<ion-footer-bar class="bar-footer btn-footer bar-light">
<div class="row">
<div class="col">
<button class="button button-block button-positive"> View cart Page </button>
</div>
<div class="col">
<button class="button button-block button-calm"> View checkout page </button>
</div>
</div>
</ion-footer-bar>
<script id="templates/tabs.html" type="text/ng-template">
<ion-tabs class="tabs-striped tabs-positive tabs-top tabs-top-my tabs-icon-only" animation="fade-in-out">
<ion-tab title="tab1" icon="ion-home" href="#/tab/tab1">
<ion-nav-view name="tab1-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="tab2" icon="ion-home" href="#/tab/tab2">
<ion-nav-view name="tab2-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="tab3" icon="ion-home" ui-sref="tabs.tab3">
<ion-nav-view name="tab3-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="tab4" icon="ion-home" ui-sref="tabs.tab4">
<ion-nav-view name="tab4-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="tab5" icon="ion-home" ui-sref="tabs.tab5">
<ion-nav-view name="tab5-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="tab6" icon="ion-android-apps" ng-click="toggleRightSideMenu()" ui-sref="tabs.tab6">
<ion-nav-view name="tab6-tab"></ion-nav-view>
</ion-tab>
</ion-tabs>
</script>
<script id="templates/tab1.html" type="text/ng-template">
<ion-view view-title="tab1">
<div class="my-content-tabs scroll-content ionic-scroll has-header has-footer has-tabs-mytop">
<div class="row p0">
<div class="col col-25 p0">
<div class="img-box">
<ion-scroll zooming="false" direction="y" class="my-imgs-scroll" id="maincontainer">
</ion-scroll>
</div>
</div>
<div class="col col-50" id="canvascontainer">
tab 1
</div>
<div class="col col-25 p0">
<div class="img-box">
<ion-scroll zooming="false" direction="y" class="my-imgs-scroll" id="maincontainer1">
</ion-scroll>
</div>
</div>
</div>
</div>
</ion-view>
</script>
<script id="templates/tab2.html" type="text/ng-template">
<ion-view view-title="tab2">
<div class="my-content-tabs scroll-content ionic-scroll has-header has-footer has-tabs-mytop">
<div class="row p0">
<div class="col col-25 p0">
<div class="img-box">
<ion-scroll zooming="false" direction="y" class="my-imgs-scroll" id="maincontainer">
</ion-scroll>
</div>
</div>
<div class="col col-50" id="canvascontainer">
tab 2
</div>
<div class="col col-25 p0">
<div class="img-box">
<ion-scroll zooming="false" direction="y" class="my-imgs-scroll" id="maincontainer1">
</ion-scroll>
</div>
</div>
</div>
</div>
</ion-view>
</script>
<script id="templates/tab3.html" type="text/ng-template">
<ion-view view-title="tab3">
<div class="my-content-tabs scroll-content ionic-scroll has-header has-footer has-tabs-mytop">
<div class="row p0">
<div class="col col-25 p0">
<div class="img-box">
</div>
</div>
<div class="col col-50"> <canvas id="canvas3"></canvas> </div>
<div class="col col-25 p0">
<div class="img-box">
</div>
</div>
</div>
</div>
</ion-view>
</script>
<script id="templates/tab4.html" type="text/ng-template">
<ion-view view-title="tab4">
<div class="my-content-tabs scroll-content ionic-scroll has-header has-footer has-tabs-mytop">
<div class="row p0">
<div class="col col-25 p0">
<div class="img-box">
</div>
</div>
<div class="col col-50"> Coming Soon </div>
<div class="col col-25 p0">
<div class="img-box">
</div>
</div>
</div>
</div>
</ion-view>
</script>
<script id="templates/tab5.html" type="text/ng-template">
<ion-view view-title="tab5">
<div class="my-content-tabs scroll-content ionic-scroll has-header has-footer has-tabs-mytop">
<div class="row p0">
<div class="col col-25 p0">
<div class="img-box">
</div>
</div>
<div class="col col-50"> Coming Soon </div>
<div class="col col-25 p0">
<div class="img-box">
</div>
</div>
</div>
</div>
</ion-view>
</script>
<script id="templates/tab6.html" type="text/ng-template">
<ion-view view-title="tab6">
<div class="my-content-tabs scroll-content ionic-scroll has-header has-footer has-tabs-mytop">
<div class="row p0">
<div class="col col-25 p0">
<div class="img-box">
</div>
</div>
<div class="col col-50"> Coming Soon </div>
<div class="col col-25 p0">
<div class="img-box">
</div>
</div>
</div>
</div>
</ion-view>
</script>
<script id="templates/nav-stack.html" type="text/ng-template">
<ion-view view-title="Tab Nav Stack">
<ion-content class="padding">
<p><img src="http://ionicframework.com/img/diagrams/tabs-nav-stack.png" style="width:100%"></p>
</ion-content>
</ion-view>
</script>
<script>
angular.module('ionicApp', ['ionic', 'ionicApp.controllers']).config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tabs', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html"
})
.state('tabs.tab1', {
url: "/tab1",
views: {
'tab1-tab': {
templateUrl: "templates/tab1.html",
controller: 'Tab1Ctrl'
}
}
})
.state('tabs.tab2', {
url: "/tab2",
views: {
'tab2-tab': {
templateUrl: "templates/tab2.html",
controller: 'Tab2Ctrl'
}
}
})
.state('tabs.tab3', {
url: "/tab3",
views: {
'tab3-tab': {
templateUrl: "templates/tab3.html",
controller:'Tab3Ctrl'
}
}
})
.state('tabs.tab4', {
url: "/tab4",
views: {
'tab4-tab': {
templateUrl: "templates/tab4.html"
}
}
})
.state('tabs.tab5', {
url: "/tab5",
views: {
'tab5-tab': {
templateUrl: "templates/tab5.html"
}
}
})
$urlRouterProvider.otherwise("/tab/tab1");
})
.controller('HomeTabCtrl', function($scope, $ionicSideMenuDelegate) {
$scope.toggleLeft = function() {
$ionicSideMenuDelegate.toggleLeft();
};
$scope.toggleRightSideMenu = function() {
console.log('rigth open')
$ionicSideMenuDelegate.toggleRight();
};
console.log('HomeTabCtrl');
});
</script>
</body>
</html>您可以使用模态窗口来解决它：
$ionicModal.fromTemplateUrl('my-modal.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.modal = modal;
});
$scope.openModal = function() {
$scope.modal.show();
};
$scope.closeModal = function() {
$scope.modal.hide();
};
//Cleanup the modal when we're done with it!
$scope.$on('$destroy', function() {
$scope.modal.remove();
});
http://codepen.io/anon/pen/BjVeOR
或者只是使用另一种状态：
<div class="col">
<button class="button button-block button-positive"
ui-sref='next'>View cart Page </button>
</div>
。
.state('next', {
url: "/next",
templateUrl: "templates/next.html",
controller: "NextController"
})
http://codepen.io/anon/pen/yeEWGq
更新：我在标题中制作了颜色，但我无法制作动画作品......
相关文章：
- ng选项-用vm替换$scope
- 获取当前URL，替换部分路径名，然后在空白选项卡中打开
- 哪个选项适合替换Java Applet
- 动态替换下拉菜单选项jQuery
- 如何使用jquery删除和替换select选项
- Ajax 在选项卡中替换 HTML
- 角度组件:无模板替换选项
- 离子替换新视图的选项卡和页脚
- 将选择选项替换为js中的图像和文本
- 窗口中打开将替换当前选项卡以及打开新选项卡
- 如何将选择的所有选项标签替换为其值
- jQuery-替换所有选项名称中的空格
- 克隆HTML并根据选择的选项卡替换内容id
- 当远程加载下拉选项时，语义UI不会替换GET路由中的{value}
- 单击时替换选项卡中的代码
- 将选择框选项替换为JSON结果
- 根据选项"label"替换HTML中的值属性
- 如何在选择选项值后使用morris-conf.js替换条形图
- 如何用JSCS规则替换废弃的JSHint选项
- Javascript -使用选项替换文本
