Onsen UI Pagination: Navigator und Tabbar

Question

Apr 23, 2015, 06:19 PM

Onsen UI Pagination: Navigator und Tabbar

ch bin im Zweifel über das Mischen von Navigator und Tabba

Erklärung: Die Hauptseite (Hauptseite1) besteht aus zwei untergeordneten Seiten (tab1 und tab2), auf die über die Registerkartenleiste zugegriffen wird, während auf die anderen Seiten (Seite2 und 3) über den Navigator zugegriffen wird. Die Registerkarte 1 ist die erste aktivierte.

Layout: Die Seiten tab1 und tab2 haben dieselbe Symbolleiste (oben). Die Seiten 2 und 3 verfügen über eine andere Symbolleiste mit einem Zurück-Button und einem weiteren Button, um zur Hauptseite tab1 umzuleiten.

Mein Code ist das, aber ich weiß nicht, ob es richtig ist oder der beste Ansatz:

<!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>

ch hoffe, das ist nützlich für jemand andere