More than 5 years have passed since last update.

[monaca]ui-routerでsplitterメニュー。

Posted at 2017-09-26

monacaの新規作成プロジェクト「Onsen UI V2 Angular 1 Splitter」を、ui-routerに対応させてみました。

ベース

[monaca][onsenui][AngularJS][ui-router]onsenui/ui-router最小限プロジェクト

HTML

index.html

<!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: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
  <script src="components/loader.js"></script>
  <script src="script.js"></script>

  <link rel="stylesheet" href="components/loader.css">
  <link rel="stylesheet" href="css/style.css">
</head>
<body ng-app="MyApp">
	
	<!-- 全体のページ設定 -->
	<ons-page>
		<!-- splitter に変数宣言をしておく(開閉用) -->
		<ons-splitter var="splitter">
			<!-- splitterメニュー設定 -->
			<ons-splitter-side page="menu.html" side="left" width="200px" collapse>
			</ons-splitter-side>
			<!-- splitterコンテンツ設定 -->
			<ons-splitter-content page="main.html">
			</ons-splitter-content>
		</ons-splitter>
	</ons-page>
	
	<!-- splitterメニューHTML-->
	<ons-template id="menu.html">
		<ons-page>
			<ons-list>
				<!-- リスト項目に遷移先を指定する -->
				<ons-list-item ui-sref="page-A" tappable>
					pageA
				</ons-list-item>
				<ons-list-item ui-sref="page-B" tappable>
					pageB
				</ons-list-item>
			</ons-list>
		</ons-page>
	</ons-template>
	
	<!-- splitterコンテンツHTML-->
	<ons-template id="main.html">
		<ons-page>
			<!-- ツールバー -->
			<ons-toolbar>
				<!-- ツールバー左 -->
				<div class="left">
					<!-- メニューアイコン -->
					<ons-toolbar-button>
						<!-- 押下時に、splitterを開閉する -->
						<ons-icon icon="fa-bars" ng-click="splitter.left.toggle();"></ons-icon>
					</ons-toolbar-button>
				</div>
				<!-- ツールバー真ん中 -->
				<div class="center">
					Splitter
				</div>
				<!-- ツールバー右 -->
				<div class="right">
					<!-- 何も記載しない場合は、空文字を入れる。（入れないとセンタリングレイアウトがずれる） -->
					&nbsp;
				</div>				
			</ons-toolbar>
			<!-- コンテンツ部分 -->
			<div style="padding: 20px 10px;" ui-view>メニューを選んでください。	</div>
		</ons-page>
	</ons-template>
	
	<!-- pageAの中身 -->
	<ons-template id="pageA.html">
		pageAだよ
	</ons-template>
	
	<!-- pageBの中身 -->
	<ons-template id="pageB.html">
		pageBだよ
	</ons-template>
</body>	
</html>

javascript

script.js

var myApp = angular.module('MyApp', ['onsen', 'ui.router']);

myApp.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {

		$stateProvider
			.state('page-A', {
				url: '/pageA',
				templateUrl: 'pageA.html',
				onEnter: ['$rootScope', function($rootScope) {
					// 押下時に、splitterを閉じる
					$rootScope.splitter.left.close();
				}]
			})
			.state('page-B', {
				url: '/pageB',
				templateUrl: 'pageB.html',
				onEnter: ['$rootScope', function($rootScope) {
					// 押下時に、splitterを閉じる
					$rootScope.splitter.left.close();
				}]
			})
		
	}]);

処理の流れ

メニューアイコン押下
2. ng-click="splitter.left.toggle();"で、splitterを開く
menu.htmlを表示
ons-list-itemを押下
5. ui-srefに設定された遷移先に移動
6. state内のonEnterで、$rootScope.splitter.left.close(); が実行され、splitterが閉じる
7. 遷移先htmlをui-viewに表示

ソースコード

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up