Onsen UIの機能をいくつか試してみます。
使用前の準備
今回は必要なファイルをダウンロードして使ってみます、
公式サイトにアクセスして、Onsen UIをダウンロードします。
ダウンロードしたファイルを解凍後、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のデモページ
【参考サイト】
コメントが承認されるまで時間がかかります。