Onsen UIを使ってみる

2016.05.22

Onsen UIの機能をいくつか試してみます。

使用前の準備

今回は必要なファイルをダウンロードして使ってみます、
公式サイトにアクセスして、Onsen UIをダウンロードします。

try-using-the-onsen-ui01

ダウンロードしたファイルを解凍後、cssとjsを読み込ませて、以下のように記述します。

<!DOCTYPE html>
<html lang="ja" ng-app="app">
<head>
<meta charset="UTF-8" />

<link rel="stylesheet" href="./css/onsenui.css" />
<link rel="stylesheet" href="./css/onsen-css-components.css" />
<script src="./js/angular/angular.min.js"></script>
<script src="./js/onsenui.min.js"></script>
<script>
var app = angular.module('app', ['onsen']);
</script>
</head>
<body>

</body>
</html>

これで準備完了です。
cssディレクトリ内にテーマの異なるファイルがいくつか入っているので、読み込むcssを変更することでデザインを変更することができます。

今回はAngular.jsを使うようにしていますが、Angular.jsを使わないでOnsen UIを使用することもできます。
詳しくは公式ドキュメントをご確認ください。
　

ons-navigator

Onsen UIのUIパターンの中からナビゲーション型を使ってみます。

index.html

<body ng-controller="app_Ctrl">
<ons-navigator var="myNav" page="nav_top.html"></ons-navigator>
</body>

nav_top.html

<ons-page ng-controller="top_Ctrl">
	<ons-toolbar>
		<div class="center">トップ</div>
	</ons-toolbar>
	<div class="contents">
		<ons-button ng-click="myNav.pushPage('nav_under.html')">下層ページへ</ons-button>
	</div>
</ons-page>

nav_under.html

<ons-page ng-controller="under_Ctrl">
	<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="myNav.popPage()">戻るボタン</ons-button>
	</div>
</ons-page>

JavaScript

var app = angular.module('app', ['onsen']);
app.controller('app_Ctrl', function($scope) {
	// アプリ全体
});
app.controller('top_Ctrl', function($scope) {
	// トップ
});
app.controller('under_Ctrl', function($scope) {
	// 下層ページ
});

index.htmlのons-navigatorで最初に読み込むページ( page=”nav_top.html”)を指定しています。
トップから下層へのページ遷移はng-click=”myNav.pushPage(‘nav_under.html’)”、下層からひとつ前のページに戻る場合はng-click=”myNav.popPage()”で、実際にページ遷移しているのではなく、ons-navigatorの中身を動的に書き換えてページ変更を行っています。
ons-navigatorのデモページ

ons-tabbar

タブ型のUIパターンを使ってみます。

index.html

<body ng-controller="app_Ctrl">
<ons-tabbar var="myTab">
	<ons-tab page="tab_top.html" label="トップ" active="true"></ons-tab>
	<ons-tab page="tab_page.html" label="タブ2"></ons-tab>
</ons-tabbar>
</body>

tab_top.html

<ons-page ng-controller="top_Ctrl">
	<ons-toolbar>
		<div class="center">トップ</div>
	</ons-toolbar>
	<div class="contents">
		<ons-button ng-click="myTab.setActiveTab(1)">タブ2へ</ons-button>
		<ons-button ng-click="myTab.loadPage('tab_under.html')">下層ページへ</ons-button>
	</div>
</ons-page>

tab_page.html

<ons-page ng-controller="page_Ctrl">
	<ons-toolbar>
		<div class="center">タブ2</div>
	</ons-toolbar>
	<div class="contents">
		<ons-button ng-click="myTab.setActiveTab(0)">トップへ</ons-button>
		<ons-button ng-click="myTab.loadPage('tab_under.html')">下層ページへ</ons-button>
	</div>
</ons-page>

tab_under.html

<ons-page ng-controller="under_Ctrl">
	<ons-toolbar>
		<div class="center">下層ページ2</div>
	</ons-toolbar>
	<div class="contents">
		<ons-button ng-click="myTab.setActiveTab(0)">トップへ</ons-button>
		<ons-button ng-click="myTab.setActiveTab(1)">タブ2へ</ons-button>
	</div>
</ons-page>

JavaScript

var app = angular.module('app', ['onsen']);
app.controller('app_Ctrl', function($scope) {
	// アプリ全体
});
app.controller('top_Ctrl', function($scope) {
	// トップ
});
app.controller('page_Ctrl', function($scope) {
	// タブ2ページ
});
app.controller('under_Ctrl', function($scope) {
	// 下層ページ
});

inex.htmlのons-tabbarとons-tabでタブを作成していて、active=”true”で最初に表示するページを指定しています。
myTab.setActiveTab(index)でアクティブなタブの変更、myTab.loadPage(ページURL)でタブはそのままでページ遷移を行えます。
ons-tabbarのデモページ

ons-list

リストの表示を試してみます。

index.html

<body ng-controller="app_Ctrl">
<ons-navigator var="myNav" page="list_top.html"></ons-navigator>
</body>

list_top.html

<ons-page ng-controller="top_Ctrl">
	<ons-toolbar>
		<div class="center">トップ</div>
	</ons-toolbar>
	<div class="contents">
		<ons-list>
			<ons-list-header>リストヘッダー</ons-list-header>
			<ons-list-item>リスト1</ons-list-item>
			<ons-list-item modifier="tappable">リスト2</ons-list-item>
			<ons-list-item modifier="chevron" ng-click="myNav.pushPage('list_under.html')">リスト3</ons-list-item>
		</ons-list>
	</div>
</ons-page>

list_under.html

<ons-page ng-controller="under_Ctrl">
	<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="myNav.popPage()">戻るボタン</ons-button>
	</div>
</ons-page>

JavaScript

var app = angular.module('app', ['onsen']);
app.controller('app_Ctrl', function($scope) {
	// アプリ全体
});
app.controller('top_Ctrl', function($scope) {
	// トップ
});
app.controller('under_Ctrl', function($scope) {
	// 下層ページ
});

リスト表示をする場合はons-listとons-list-itemを(ヘッダーも使用する場合はons-list-headerを)使用します。
タップで反応させたい場合はmodifier=”tappable”を、右側に矢印アイコンを配置したい場合はmodifier=”chevron”をons-list-itemに付与します。
今回使用しているUIパターンはナビゲーション型なので、ページ遷移はng-click=”myNav.pushPage(‘list_under.html’)”になります。
ons-listのデモページ
　

【参考サイト】

　

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

関連記事

コメントを残す

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

CAPTCHA


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

Category

Tag

Recent

2024年11月
日 月 火 水 木 金 土
 12
3456789
10111213141516
17181920212223
24252627282930