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

Onsen UIのタブ型の機能を使ってみます。

ons-tabbar

ons-tabbarにlabelとiconを設定してみます。

index.html

<ons-tabbar var="myNavigator">
	<ons-tab page="top.html" label="トップ" icon="fa-home" active="true"></ons-tab>
	<ons-tab page="tab1.html" label="タブ1" icon="fa-search"></ons-tab>
	<ons-tab page="tab2.html" label="タブ2" icon="fa-star"></ons-tab>
	<ons-tab page="tab3.html" label="タブ3" icon="fa-gear"></ons-tab>
</ons-tabbar>

ons-tabbarのデモページ1
　

タブバーを上部に固定する場合、ons-tabbarにposition=”top”を指定します。

index2.html

<ons-tabbar var="myNavigator" position="top">
	<ons-tab page="top.html" label="トップ" icon="fa-home" active="true"></ons-tab>
	<ons-tab page="tab1.html" label="タブ1" icon="fa-search"></ons-tab>
	<ons-tab page="tab2.html" label="タブ2" icon="fa-star"></ons-tab>
	<ons-tab page="tab3.html" label="タブ3" icon="fa-gear"></ons-tab>
</ons-tabbar>

ons-tabbarのデモページ2
　

ons-tab内にHTMLも記述できます。
ons-tab-activeでアクティブ時、ons-tab-inactiveで非アクティブ時の切り替えを行えます。

index3.html

<ons-tabbar var="myNavigator">
	<ons-tab page="top.html" active="true">
		<div ons-tab-active class="tab-style01">トップ(active)</div>
		<div ons-tab-inactive class="tab-style01_2">トップ(inactive)</div>
	</ons-tab>
	<ons-tab page="tab1.html">
		<div class="tab-style02">タブ1</div>
	</ons-tab>
	<ons-tab page="tab2.html">
		<div class="tab-style03">タブ2</div>
	</ons-tab>
	<ons-tab page="tab3.html">
		<div class="tab-style04">タブ3</div>
	</ons-tab>
</ons-tabbar>

ons-tabbarのデモページ3
　

ons-tabbarのメソッド

index4.html

<ons-tabbar var="myNavigator">
	<ons-tab page="top2.html" label="トップ" icon="fa-home" active="true"></ons-tab>
	<ons-tab page="tab1.html" label="タブ1" icon="fa-search"></ons-tab>
	<ons-tab page="tab2.html" label="タブ2" icon="fa-star"></ons-tab>
	<ons-tab page="tab3.html" label="タブ3" icon="fa-gear"></ons-tab>
</ons-tabbar>

top2.html

<ons-page>
	<ons-toolbar>
		<div class="center">トップ</div>
	</ons-toolbar>
	<div class="contents">
		<ons-list>
			<ons-list-item modifier="chevron" ng-click="myNavigator.setActiveTab(1)">タブ1へ</ons-list-item>
			<ons-list-item modifier="chevron" ng-click="myNavigator.setActiveTab(2, {keepPage: true})">タブ部分のみタブ2へ</ons-list-item>
			<ons-list-item modifier="chevron" ng-click="console.log(myNavigator.getActiveTabIndex())">アクティブなタブを取得</ons-list-item>
			<ons-list-item modifier="chevron" ng-click="myNavigator.loadPage('tab3.html')">タブ部分を変更しないでタブ3へ</ons-list-item>
		</ons-list>
	</div>
</ons-page>

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

ons-tabbarのイベント

index5.html

<ons-tabbar var="myNavigator">
	<ons-tab page="top.html" label="トップ" icon="fa-home" active="true"></ons-tab>
	<ons-tab page="tab1.html" label="タブ1" icon="fa-search"></ons-tab>
	<ons-tab page="tab2.html" label="タブ2" icon="fa-star"></ons-tab>
	<ons-tab page="tab3.html" label="タブ3" icon="fa-gear"></ons-tab>
</ons-tabbar>

JavaScript

ons.ready(function() {
	myNavigator.on('prechange', function(e) {
		console.group('prechange');
		console.log(e.index);
		console.log(e.tabItem);
		console.groupEnd();

		// タブ1へのページ遷移をキャンセル
		if(e.index == 3) {
			e.cancel();
		}
	});

	myNavigator.on('postchange', function(e) {
		console.group('postchange');
		console.log(e.index);
		console.log(e.tabItem);
		console.groupEnd();
	});
});

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

【参考サイト】

• Onsen: Onsen UI Guide