javascript - template - onsen ui tutorial
Onsen UI Pagination: navegador y tabbar (1)
Como no hay una pregunta específica, trataré de aclarar los patrones de navegación que está utilizando allí.
<!-- Navigator as root element -->
<ons-navigator>
<ons-page>
<ons-tabbar>
<ons-tab>...</ons-tab>
<ons-tab>...</ons-tab>
</ons-tabbar>
</ons-page>
</ons-navigator>
Tienes un ons-navigator como raíz de tu aplicación y luego tienes un ons-tabbar como un niño. Esto significa que cuando intente navegar utilizando el navegador principal, presionará otro elemento secundario (una página) sobre el elemento secundario actual (barra de pestañas), de modo que ya no verá la barra de pestañas (ni siquiera la barra de herramientas, a menos que coloque un nuevo uno en cada página) hasta que lo presione nuevamente o borre todos sus hermanos sobre él. Además, todas sus páginas se almacenarán en la misma pila de páginas, ya que solo tiene un navegador. Esto significa que no puede separar los flujos de trabajo de Tab1 y Tab2 en dos ramas diferentes: si restablece a página en Tab1, Tab2 también se restablecerá.
Esto está completamente bien si eres consciente de ello y es lo que realmente quieres hacer. Depende de lo que necesites
<!-- Tab Bar as root element -->
<ons-tabbar>
<ons-tab>
<ons-navigator>...</ons-navigator>
</ons-tab>
<ons-tab>
<ons-navigator>...</ons-navigator>
</ons-tab>
</ons-tabbar>
Otro enfoque diferente, y tal vez más común, es tener ons-tabbar como la raíz del proyecto y definir un ons-navigator como elemento secundario de cada ons-tab donde necesite más navegación. De esta manera, su tabbar siempre estará visible, ya que lo que está cambiando con los navegadores no es todo el contenido, sino solo el contenido de una ons-tab específica. Cada pestaña tendrá su propio flujo de trabajo almacenado en una pila de páginas diferente, totalmente independiente de las demás.
Como dije antes, realmente depende de lo que necesita para su aplicación. Podría tener, por ejemplo, muchas pestañas para cosas como "configuración", "sobre", etc. que son solo vistas de una página y luego un navegador en una sola pestaña con la aplicación real.
¡Avíseme si sus dudas se aclaran ahora!
Estoy en duda sobre la mezcla de navegador y tabbar.
Explicando: la página principal (página principal1) consta de dos páginas secundarias (tab1 y tab2) a las que se accede mediante tabbar, mientras que a las otras páginas (página2 y 3) se accede a través del navegador. La página de tab1 es la primera activada.
Diseño: las páginas tab1 y tab2 tienen la misma barra de herramientas (en la parte superior). La página2 y la página3 tienen una barra de herramientas diferente con botón de retroceso y otro botón para redirigir a la pestaña de la página principal1.
Mi código es este, pero no sé si es correcto o el mejor enfoque:
<!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>
Espero que sea útil para otra persona.