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のメソッドのデモページ

setActiveTab(index[, options]) 指定したindexのタブを表示。
optionsにはkeepPage: trueでタブのみの変更、animationでアニメーションの設定が可能。
getActiveTabIndex() 現在アクティブになっているタブのインデックスを返す。
loadPage(pageUrl) タブを変更せずにページを遷移。

 

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のイベントのデモページ

prechange アクティブなタブが変更される前に発火。
postchange アクティブなタブが変更された後に発火。

 

【参考サイト】

 

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

関連記事

コメントを残す

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

CAPTCHA


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

2024年12月
1234567
891011121314
15161718192021
22232425262728
293031