3

ナビゲーターとタブバーを混在させることに疑問があります。

説明: メイン ページ (メイン ページ 1) は、タブバーによってアクセスされる 2 つの子ページ (タブ 1 とタブ 2) で構成され、他のページ (ページ 2 と 3) はナビゲーターを介してアクセスされます。tab1 ページは最初にアクティブになったページです。

レイアウト: tab1 ページと tab2 ページには同じツールバー (上部) があります。page2 と page3 には、戻るボタンとメインページ tab1 にリダイレクトする別のボタンを備えた異なるツールバーがあります。

私のコードはこれですが、それが正しいのか、それとも最善のアプローチなのかわかりません:

<!doctype html>
<html lang="en" ng-app="app">
<head>
	<meta charset="utf-8">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="mobile-web-app-capable" content="yes">

	<link rel="stylesheet" href="lib/onsen/css/onsenui.css">  
	<link rel="stylesheet" href="lib/onsen/css/onsen-css-components.css"> 
	<link rel="stylesheet" href="styles/app.css"/>

	<style>

	    .item {
	      padding: 10px;
	      line-height: 1;
	    }
	</style>


	<script src="lib/onsen/js/angular/angular.js"></script>    
	<script src="lib/onsen/js/onsenui.js"></script>    

	<script>
	    angular.module('app', ['onsen']);
	
	    angular.module('app').controller('AppController', function($scope) {
	      // functions for AppController
	    });

	    angular.module('app').controller('Tab1Controller', function($scope) {
	      // functions for Tab1Controller
	    });


	    angular.module('app').controller('Tab2Controller', function($scope) {
	      // functions for Tab2Controller
	    });

	    angular.module('app').controller('Page2Controller', function($scope) {
	      // functions for Page2Controller
	    });

	    angular.module('app').controller('Page3Controller', function($scope) {
	      // functions for Page3Controller
	    });
	</script>

</head>

<body ng-app="app" ng-controller="AppController">

	<ons-navigator animation="slide" var="app.navi" >

		<ons-toolbar>
			<div class="left"><ons-toolbar-button ng-click="app.navi.pushPage('page3.html')">Go</ons-toolbar-button></div>
			<div class="center">App</div>
			<div class="right">
       			<ons-toolbar-button><ons-icon icon="fa ion-navicon" style="font-size: 32px; width: 1em"></ons-icon></ons-toolbar-button>
			</div>
		</ons-toolbar>

		<ons-tabbar position="top">
			<ons-tab page="tab1.html" label="Tab1" active="true"></ons-tab>
			<ons-tab page="tab2.html" label="Tab2"></ons-tab>
		</ons-tabbar>

	</ons-navigator>

	<ons-template id="tab1.html" >
		<ons-page ng-controller="Tab1Controller">
			<p>Content tab1</p>
		</ons-page>
	</ons-template>

	<ons-template id="tab2.html">
		<ons-scroller>
			<p>Content Tab2</p>
			<ons-list ng-controller="Tab2Controller">
				<ons-list-item modifier="chevron" class="item" ng-repeat="item in [1,2,3]" ng-click="app.navi.pushPage('page2.html')">
					<p>Item {{item}}</p>
				</ons-list-item>
			</ons-list>
		<ons-scroller>
	</ons-template>

	<ons-template id="page2.html">
		<ons-page ng-controller="Page2Controller">
			<ons-toolbar>
				<div class="left">
					<ons-back-button></ons-back-button>
					<ons-toolbar-button ng-click="app.navi.resetToPage('index.html')">HOME</ons-toolbar-button>
				</div>
				<div class="center">PAGE2</div>
				<div class="right">
	       			<ons-toolbar-button><ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em"></ons-toolbar-button>
				</div>
			</ons-toolbar>
			<ons-scroller>
				<p>Content PAGE2</p>
				<ons-list ng-controller="Tab2Controller">
					<ons-list-item modifier="chevron" class="item" ng-repeat="item in [1,2,3]" ng-click="app.navi.pushPage('page3.html')">
						<p>Item {{item}}</p>
					</ons-list-item>
				</ons-list>
			</ons-scroller>
		</ons-page>
	</ons-template>


	<ons-template id="page3.html">
		<ons-page ng-controller="Page3Controller">
			<ons-toolbar>
				<div class="left">
					<ons-back-button></ons-back-button>
					<ons-toolbar-button ng-click="app.navi.resetToPage('index.html')">HOME</ons-toolbar-button>
				</div>
				<div class="center">PAGE3</div>
				<div class="right">
	       			<ons-toolbar-button><ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em"></ons-toolbar-button>
				</div>
			</ons-toolbar>
			<p style="text-align: center">
				<ons-button modifier="light" ng-click="app.navi.popPage('page1.html');">Pop</ons-button>
			</p>
			<p style="text-align: center">
				<ons-button modifier="light" ng-click="app.navi.pushPage('page2.html');">Page 2</ons-button>
			</p>
		</ons-page>
	</ons-template>

	<ons-template id="popover.html">
		  <ons-popover direction="up down" cancelable>
		    <div style="text-align: center; opacity: 0.5;">
		      <p>This is a popover!</p>
		      <p><small>Click the background to remove the popover.</small></p>
		    </div>
		  </ons-popover>
	</ons-template>

</body>

</html>

それが他の誰かにとって有用であることを願っています。

4

1 に答える 1