動作環境:AngularJS V1 + Onsen UI V2
「【Monaca】Onsen UI V2 + Angular JS V1 最新バージョンのプロジェクト作成方法」に基づき、新規プロジェクトを作成。
1.ログインページとタブ表示ページを切り替えるため、ons-splitterを使用する。
2.ons-page内にons-tabbarを組み込むと、タイミングによりmyTabbarを参照できないため、ディレクティブを使用する。
3.ons-navigatorはons-page内に組み込む必要がある。
4.タブ切り替えのタイミングでons-navigatorで表示するページを初期ページに戻す必要がある。
※2017/08/30 コード修正済み。タブ切り替え時にons-navigatorが追加される不具合を修正。
※2018/01/10 コード修正済み。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 |
<!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> <script src="components/loader.js"></script> <script src="js/angular.min.js"></script> <script src="onsenui/js/onsenui.min.js"></script> <script src="onsenui/js/angular-onsenui.min.js"></script> <link rel="stylesheet" href="components/loader.css"> <link rel="stylesheet" href="onsenui/css/onsenui.css"> <link rel="stylesheet" href="onsenui/css/onsen-css-components.css"> <link rel="stylesheet" href="css/style.css"> <script> var app = angular.module("myApp", ["onsen"]); app.controller("indexController", function ($scope) { ons.ready(function () { mySplitter.content.load("login.html"); }); }); app.directive("myTabbar", function () { return { restrict: "EA", link: function (scope, elem, attrs) { myTabbar.on("prechange", function (e) { if (myTabbar.getActiveTabIndex() == 0) { if (myNavigator1.pages.length > 1) { myNavigator1.popPage(); } } else { if (myNavigator2.pages.length > 1) { myNavigator2.popPage(); } } }); } }; }); </script> </head> <body ng-controller="indexController"> <ons-splitter var="mySplitter"> <ons-splitter-side collapse></ons-splitter-side> <ons-splitter-content></ons-splitter-content> </ons-splitter> <ons-template id="login.html"> <ons-page> <ons-toolbar> <div class="center">Login</div> </ons-toolbar> <p style="text-align: center;"> <br /> <ons-input type="text" placeholder="Password"></ons-input> <br /> <br /> <ons-button ng-click="mySplitter.content.load('main.html')">Login</ons-button> </p> </ons-page> </ons-template> <ons-template id="main.html"> <ons-page> <ons-tabbar var="myTabbar" my-tabbar> <ons-tab icon="home" label="page1" page="tab1.html" active="true"></ons-tab> <ons-tab icon="star" label="page2" page="tab2.html"></ons-tab> </ons-tabbar> </ons-page> </ons-template> <ons-template id="tab1.html"> <ons-page> <ons-navigator var="myNavigator1" page="page1.html"></ons-navigator> </ons-page> </ons-template> <ons-template id="page1.html"> <ons-page> <ons-toolbar> <div class="center">Page1</div> </ons-toolbar> <p> <ons-button ng-click="myNavigator1.pushPage('page11.html')">Next</ons-button> </p> </ons-page> </ons-template> <ons-template id="page11.html"> <ons-page> <ons-toolbar> <div class="left"> <ons-back-button ng-click="myNavigator1.popPage()">Prev</ons-back-button> </div> <div class="center">Page11</div> </ons-toolbar> </ons-page> </ons-template> <ons-template id="tab2.html"> <ons-page> <ons-navigator var="myNavigator2" page="page2.html"></ons-navigator> </ons-page> </ons-template> <ons-template id="page2.html"> <ons-page> <ons-toolbar> <div class="center">Page2</div> </ons-toolbar> <p> <ons-button ng-click="myNavigator2.pushPage('page21.html')">Next</ons-button> </p> </ons-page> </ons-template> <ons-template id="page21.html"> <ons-page> <ons-toolbar> <div class="left"> <ons-back-button ng-click="myNavigator2.popPage()">Prev</ons-back-button> </div> <div class="center">Page21</div> </ons-toolbar> </ons-page> </ons-template> </body> </html> |
【Monaca】ons-splitter、ons-tabbar、ons-navigatorを組み合わせる