Onsen UI Pagination: навигатор и панель вкладок
Я сомневаюсь в смешивании навигатора и вкладки.
Объяснение: главная страница (Главная страница1) состоит из двух дочерних страниц (tab1 и tab2), доступ к которым осуществляется через панель вкладок, в то время как другие страницы (страницы 2 и 3) доступны через навигатор. Страница tab1 является первой активной.
Макет: страницы tab1 и tab2 имеют одинаковую панель инструментов (вверху). Страница 2 и страница 3 имеют разные панели инструментов с кнопкой «Назад» и еще одной кнопкой для перенаправления на вкладку главной страницы1.
Мой код такой, но я не знаю, правильно ли это или лучший подход:
<!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>
Я надеюсь, что это полезно для кого-то еще.