前回、「【Monaca】Onsen UIのツールバーのメニューアイコンにバッジを表示する」にてバッジを表示させたが、今回はバッジのカウント機能を追加してみた。
コード内のコメントに書いたとおり、一つ一つの処理を理解すれば難しいことはない。
メニューのPage1をタップすると、カウントが5から1ずつ減る。
バッジの表示・非表示はng-showで行っており、page1Controller内のmenuCountが0になれば表示されない。
|
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 |
<!DOCTYPE HTML> <html> <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:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> <script src="components/loader.js"></script> <link rel="stylesheet" href="components/loader.css"> <link rel="stylesheet" href="css/style.css"> <script> var app = ons.bootstrap("myApp", ["onsen"]); app.controller("indexController", ["$scope", function($scope) { // バッジのカウント数 $scope.badgeCount = 5; // menuControllerからPage1タップの通知を受け取る $scope.$on("subCount", function(e) { if ($scope.badgeCount > 0) { // バッジのカウント数を1つ減らす $scope.badgeCount -= 1; } }); }]); app.controller("menuController", ["$scope", "$rootScope", function($scope, $rootScope) { // Page1タップイベント $scope.showPage1 = function() { // indexControllerにPage1タップを通知する $rootScope.$broadcast("subCount"); // Page1を表示 app.slidingMenu.setMainPage("page1.html", { closeMenu: true }); } }]); app.controller("page1Controller", ["$scope", function($scope) { // メニューアイコンに表示するバッジのカウント数 $scope.menuCount = 0; // indexControllerのbadgeCountを監視する $scope.$watchCollection("badgeCount", function(newVal, oldVal) { // バッジのカウント数を更新する $scope.menuCount = newVal; if (!$scope.$$phase) $scope.$apply(); }); }]); </script> <style> .badgeToolbar { position: absolute; top: 5px; left: 20px; } </style> </head> <body ng-controller="indexController"> <ons-sliding-menu var="app.slidingMenu" menu-page="menu.html" main-page="page1.html" side="left" type="overlay" max-slide-distance="200px"> </ons-sliding-menu> <ons-template id="menu.html"> <ons-page style="background-color: white" ng-controller="menuController"> <ons-list> <ons-list-item modifier="tappable" class="list__item__line-height" ng-click="showPage1()" <i class="fa fa-home fa-lg" style="color: #666"></i> Page 1 </ons-list-item> </ons-list> </ons-page> </ons-template> <ons-template id="page1.html"> <ons-page ng-controller="page1Controller"> <ons-toolbar fixed-style> <div class="left"> <ons-toolbar-button ng-click="app.slidingMenu.toggleMenu()"><ons-icon icon="bars"></ons-icon></ons-toolbar-button> <span class="notification badgeToolbar" ng-show="menuCount > 0">{{menuCount}}</span> </div> <div class="center">Page 1</div> </ons-toolbar> <div style="text-align: center"> <h1>Page 1</h1> <ons-button ng-click="app.slidingMenu.toggleMenu()"> Toggle Menu </ons-button> <p> Click "Toggle Menu" to close/open menu, </p> <p> You can also swipe the page left/right. </p> <img src="images/ico_swipe_right_s.png" alt=""> </div> </ons-page> </ons-template> </body> </html> |
