Onsen UIのons-navigatorを使ってみる

2016.06.04

Onsen UIのナビゲーション型の機能をいくつか試してみます。

pushPage()・popPage()

pushPage()は新しいページを表示、popPage()は1つ前のページに戻るメソッドです。

index.html

<ons-navigator var="myNavigator" page="top.html"></ons-navigator>

top.html

<ons-page>
	<ons-toolbar>
		<div class="center">トップ</div>
	</ons-toolbar>
	<div class="contents">
		<ons-list>
			<ons-list-header>pushPage()</ons-list-header>
			<ons-list-item modifier="chevron" ng-click="myNavigator.pushPage('under.html', {animation: 'slide'})">slide</ons-list-item>
			<ons-list-item modifier="chevron" ng-click="myNavigator.pushPage('under.html', {animation: 'lift'})">lift</ons-list-item>
			<ons-list-item modifier="chevron" ng-click="myNavigator.pushPage('under.html', {animation: 'fade'})">fade</ons-list-item>
			<ons-list-item modifier="chevron" ng-click="myNavigator.pushPage('under.html', {animation: 'none'})">none</ons-list-item>
			<ons-list-item modifier="chevron" ng-click="myNavigator.pushPage('under.html', {onTransitionEnd: console.log('pushPageコールバック')})">callback</ons-list-item>
		</ons-list>
	</div>
</ons-page>

under.html

<ons-page>
	<ons-toolbar>
		<div class="left">
			<ons-back-button>戻る</ons-back-button>
		</div>
		<div class="center">下層ページ</div>
	</ons-toolbar>
	<div class="contents">
		<ons-list>
			<ons-list-header>popPage()</ons-list-header>
			<ons-list-item modifier="chevron" ng-click="myNavigator.popPage({animation: 'slide'})">slide</ons-list-item>
			<ons-list-item modifier="chevron" ng-click="myNavigator.popPage({animation: 'lift'})">lift</ons-list-item>
			<ons-list-item modifier="chevron" ng-click="myNavigator.popPage({animation: 'fade'})">fade</ons-list-item>
			<ons-list-item modifier="chevron" ng-click="myNavigator.popPage({animation: 'none'})">none</ons-list-item>
			<ons-list-item modifier="chevron" ng-click="myNavigator.popPage({onTransitionEnd: console.log('popPageコールバック')})">callback</ons-list-item>
		</ons-list>
	</div>
</ons-page>

pushPage()・popPage()のデモページ

pushPage(pageUrl[, options]) 新しいページを表示する。
optionsにはanimationでアニメーションの設定、onTransitionEndでコールバックの設定が可能。
popPage([options]) 1つ前のページに戻る。
optionsにはanimationでアニメーションの設定、onTransitionEndでコールバックの設定が可能。

　

ons-toolbar

index2.html

<ons-navigator var="myNavigator" page="top2.html"></ons-navigator>

top2.html

<ons-page>
	<ons-toolbar>
		<div class="center">トップ</div>
	</ons-toolbar>
	<div class="contents">
		<ons-list>
			<ons-list-header>ons-toolbar</ons-list-header>
			<ons-list-item modifier="chevron" ng-click="myNavigator.pushPage('toolbar1.html')">戻るボタンとアイコン</ons-list-item>
			<ons-list-item modifier="chevron" ng-click="myNavigator.pushPage('toolbar2.html')">検索</ons-list-item>
			<ons-list-item modifier="chevron" ng-click="myNavigator.pushPage('toolbar3.html')">ons-bottom-toolbar</ons-list-item>
			<ons-list-item modifier="chevron" ng-click="myNavigator.pushPage('toolbar4.html')">インライン</ons-list-item>
			<ons-list-item modifier="chevron" ng-click="myNavigator.pushPage('toolbar5.html')">背景透過</ons-list-item>
		</ons-list>
	</div>
</ons-page>

toolbar1.html

<ons-page>
	<ons-toolbar>
		<div class="left">
			<ons-back-button>戻る</ons-back-button>
		</div>
		<div class="center">戻るボタンとアイコン</div>
		<div class="right">
			<ons-toolbar-button>
				<ons-icon icon="fa-bars"></ons-icon>
			</ons-toolbar-button>
		</div>
	</ons-toolbar>
	<div class="contents">
		<ons-button ng-click="myNavigator.popPage()">戻る</ons-button>
	</div>
</ons-page>

toolbar2.html

<ons-page>
	<ons-toolbar>
		<div class="center">
			<input type="search" class="search-input" placeholder="キーワード">
		</div>
	</ons-toolbar>
	<div class="contents">
		<ons-button ng-click="myNavigator.popPage()">戻る</ons-button>
	</div>
</ons-page>

toolbar3.html

<ons-page>
	<div class="contents">
		<ons-button ng-click="myNavigator.popPage()">戻る</ons-button>
	</div>
	<ons-bottom-toolbar>
		<div class="center">bottom</div>
	</ons-bottom-toolbar>
</ons-page>

toolbar4.html

<ons-page>
	<ons-toolbar inline>
		<div class="center">インライン</div>
	</ons-toolbar>
	<div class="contents">
		<ons-button ng-click="myNavigator.popPage()">戻る</ons-button>
		<p>スクロールしても追従しません。</p>
	</div>
</ons-page>

toolbar5.html

<ons-page>
	<ons-toolbar modifier="transparent">
		<div class="center">背景透過</div>
	</ons-toolbar>
	<div class="contents">
		<ons-button ng-click="myNavigator.popPage()">戻る</ons-button>
	</div>
</ons-page>

ons-toolbarのデモページ

ons-toolbar ツールバーを追加。
ツールバー内はclass名(left,center,right)でそれぞれ左・中央・右に配置。

　

ons-navigatorのイベント

pushPage()とpopPage()の実行前後に発火するイベントを使ってみます。

index.html

<ons-navigator var="myNavigator" page="top3.html"></ons-navigator>

top3.html

<ons-page>
	<ons-toolbar>
		<div class="center">トップ</div>
	</ons-toolbar>
	<div class="contents">
		<ons-button ng-click="myNavigator.pushPage('under2.html')">pushPage()</ons-button>
	</div>
</ons-page>

under2.html

<ons-page>
	<ons-toolbar>
		<div class="left">
			<ons-back-button>戻る</ons-back-button>
		</div>
		<div class="center">下層ページ</div>
	</ons-toolbar>
	<div class="contents">
		<ons-button ng-click="myNavigator.popPage()">popPage()</ons-button>
		<ons-button ng-click="myNavigator.pushPage('top3.html')">pushPage()のcancel</ons-button>
	</div>
</ons-page>

JavaScript

ons.ready(function() {
	myNavigator.on('prepush', function(e) {
		console.group('prepush');
		console.log(e.currentPage);
		console.log(e.navigator);
		console.groupEnd();

		// under2.htmlではページ遷移をキャンセル
		if(e.currentPage.page == 'under2.html') {
			e.cancel();
		}
	});

	myNavigator.on('postpush', function(e) {
		console.group('postpush');
		console.log(e.leavePage);
		console.log(e.enterPage);
		console.log(e.navigator);
		console.groupEnd();
	});

	myNavigator.on('prepop', function(e) {
		console.group('prepop');
		console.log(e.currentPage);
		console.log(e.navigator);
		console.groupEnd();
	});

	myNavigator.on('postpop', function(e) {
		console.group('postpop');
		console.log(e.leavePage);
		console.log(e.enterPage);
		console.log(e.navigator);
		console.groupEnd();
	});
});

ons-navigatorのイベントのデモページ

prepush pushPage()・replacePage()・resetToPage()の前に発火。
postpush pushPage()・replacePage()・resetToPage()の後に発火。
prepop popPage()の前に発火。
postpop popPage()の後に発火。

　

ons-navigatorのメソッド

pushPage()、popPage()以外のメソッドを使ってみます。

index4.html

<ons-navigator var="myNavigator" page="top4.html"></ons-navigator>

top4.html

<ons-page>
	<ons-toolbar>
		<div class="center">トップ</div>
	</ons-toolbar>
	<div class="contents">
		<ons-button ng-click="myNavigator.pushPage('under3.html')">pushPage()</ons-button>
	</div>
</ons-page>

under3.html

<ons-page>
	<ons-toolbar>
		<div class="left">
			<ons-back-button>戻る</ons-back-button>
		</div>
		<div class="center">下層ページ</div>
	</ons-toolbar>
	<div class="contents">
		<ons-list>
			<ons-list-item modifier="chevron" ng-click="myNavigator.insertPage(1, 'insert.html')">insertPage()</ons-list-item>
			<ons-list-item modifier="chevron" ng-click="myNavigator.replacePage('replace.html')">replacePage()</ons-list-item>
			<ons-list-item modifier="chevron" ng-click="myNavigator.resetToPage('reset.html')">resetToPage()</ons-list-item>
			<ons-list-item modifier="tappable" ng-click="console.log(myNavigator.getCurrentPage())">getCurrentPage()</ons-list-item>
			<ons-list-item modifier="tappable" ng-click="console.log(myNavigator.getPages())">getPages()</ons-list-item>
			<ons-list-item modifier="tappable" ng-click="console.log(myNavigator.getDeviceBackButtonHandler())">getDeviceBackButtonHandler()</ons-list-item>
		</ons-list>
	</div>
</ons-page>

insert.html

<ons-page>
	<ons-toolbar>
		<div class="left">
			<ons-back-button>戻る</ons-back-button>
		</div>
		<div class="center">挿入ページ</div>
	</ons-toolbar>
	<div class="contents">
		<p>ページスタックの1番目に挿入されるページです。</p>
		<ons-button ng-click="myNavigator.popPage()">popPage()</ons-button>
	</div>
</ons-page>

replace.html

<ons-page>
	<ons-toolbar>
		<div class="left">
			<ons-back-button>戻る</ons-back-button>
		</div>
		<div class="center">置き換えページ</div>
	</ons-toolbar>
	<div class="contents">
		<p>下層ページからこのページにページ遷移(置き変わり)します。<br />
		popPage()を押すと下層ページには戻りません。</p>
		<ons-button ng-click="myNavigator.popPage()">popPage()</ons-button>
	</div>
</ons-page>

reset.html

<ons-page>
	<ons-toolbar>
		<div class="left">
			<ons-back-button>戻る</ons-back-button>
		</div>
		<div class="center">リセットページ</div>
	</ons-toolbar>
	<div class="contents">
		<p>ページスタックをリセットしたので、popPage()では戻れません。</p>
		<ons-button ng-click="myNavigator.popPage()">popPage()</ons-button>
		<ons-button ng-click="myNavigator.pushPage('top4.html')">pushPage()</ons-button>
	</div>
</ons-page>

ons-navigatorのメソッドのデモページ
　

insertPage(index, pageUrl[, options]) 指定したpageUrlをページスタックのindexの位置に追加。
replacePage(pageUrl[, options]) 現在のページを指定したpageUrlに置き換える。
resetToPage(pageUrl[, options]) ページスタックをリセットして、指定したpageUrlを表示。
getCurrentPage() 現在のページを取得。
getPages() ページスタックの一覧を取得。
getDeviceBackButtonHandler() バックボタンハンドラを取得。

　

【参考サイト】

　

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

Category

Tag

Recent

2024年10月
日 月 火 水 木 金 土
 12345
6789101112
13141516171819
20212223242526
2728293031