 |
| 圖1. 單頁面版面 |
<h1>元素。而在<ion-content>內輸入的內容，則出現在app的主要頁面區域。
<ion-header-bar>
<h1 class="title">空白專案</h1>
</ion-header-bar>
<ion-content>
首頁內容
</ion-content>
接下來，本文將以匯率換算的範例說明單頁面App的製作，其介面綜合了本系列3.1～3.3的技巧，詳如下圖所示。 |
| 圖2.匯率換算介面 |
- 介面：介面包含2個下拉選單(select)、一個按鈕(button)、以及兩個文字欄位(text input)，此部份除了Ionic CSS設定之外，還必須搭配Ionic JavaScript API，以及AngularJS API。相關範例可參考：Hybrid Apps開發系列之3.1：下拉選單、Hybrid Apps開發系列之3.2：輸入欄位 (Text Input)、以及Hybrid Apps開發系列之3.3：按鈕 (Buttons)。
- 版面 (layout)：版面包含三個橫行(row)，每一行分別為2或3列(column)，此部份透過Ionic CSS設定即可。
版面編排 (layout)
在版面編排方面，透過row, col兩個基本CSS class，加上其他特定用途的class，Ionic提供了非常方便的grid system。以圖2介面為例，基本框架如下： <ion-header-bar></ion-header-bar>
<ion-content>
<div class="row">
<div class="col">1.1</div>
<div class="col">1.2</div>
</div>
<div class="row">
<div class="col col-33 col-offset-33">
<button class="button">換算</button>
</div>
</div>
<div class="row">
<div class="col">3.1</div>
<div class="col">3.2</div>
</div>
</ion-content>
- 第3-6：第一行，內含兩列
- 第7-10：第二行，只含一列。col-33代表寬度為33.3%，col-offset-33代表位置偏移33.3%
JS Bin顯示結果如下：
Grid範例
Ionic grid system其他更詳盡的介紹，可參考官網文件。
匯率換算範例說明
index.html檔程式碼如下：<body ng-app="starter" ng-controller="exchangerCtrl" ng-init="money = 0; result = 0">
<ion-header-bar class="bar-positive">
<h1 class="title">匯率換算</h1>
</ion-header-bar>
<ion-content>
<div class="row">
<div class="col">
<label class="item item-input item-select">
<span class="input-label">
持有幣
</span>
<select ng-change="changeHold(holdOption)"
ng-model="holdOption"
ng-options="item.name+item.base for item in rates">
</select>
</label>
</div>
<div class="col">
<label class="item item-input item-select">
<span class="input-label">
換算錢幣
</span>
<select ng-change="changeTarget(exchangeOption)"
ng-model="exchangeOption"
ng-options="item.name+item.base for item in rates">
</select>
</label>
</div>
</div>
<div class="row">
<div class="col col-33 col-offset-33">
<button class="button button-block ion-ios-home-outline"
ng-click="compute(money)"> 換算
</button>
</div>
</div>
<div class="row">
<div class="col">
<label class="item item-input">
<input ng-model="money" type="number" />
</label>
</div>
<div class="col">
<label class="item item-input">
<input ng-model="result" ng-readonly="true" type="number" />
</label>
</div>
</div>
</ion-content>
</body>
- 第2-4行：以<ion-header-bar>設定標題列。
- 第5-49行：以<ion-content>設定內容。內容運用前述Ionic grid system提供的CSS設定版面。
- 第8-16：下拉選單「持有幣」（可參考Hybrid Apps開發系列之3.1：下拉選單）。第12行ng-change設定下拉選單狀態改變的事件處理函式為changeHold()。第13行綁定下拉選單的項目變數為holdOption，一旦選取狀態改變，holdOption便會記錄更新後的項目值。第14行ng-options指定下拉選單的項目文字為item.name+item.base，而因未設定項目值，故會項目值從0開始遞增。rates是app.js內定義於此區塊controller之資料模型變數。
- 第19-27行：下拉選單「換算錢幣」（可參考Hybrid Apps開發系列之3.1：下拉選單）。第23行ng-change設定下拉選單狀態改變的事件處理函式為changeTarget()。第24行綁定下拉選單的項目變數為exchangeOption，一旦選取狀態改變，exchangeOption便會記錄更新後的項目值。第25行ng-options指定下拉選單的項目文字為item.name+item.base，而因未設定項目值，故會項目值從0開始遞增。rates是app.js內定義於此區塊controller之資料模型變數。
- 第32-33行：換算按鈕（可參考Hybrid Apps開發系列之3.3：按鈕 (Buttons)）。ng-click定義事件處理函式為compute(money)。money為第40行的輸入資料，已綁定為資料模型變數。
- 第39-41行：持有幣輸入欄位（可參考Hybrid Apps開發系列之3.2：輸入欄位 (Text Input)）。ng-model綁定資料變數money。
- 第44-46行：結果顯示欄位（可參考Hybrid Apps開發系列之3.2：輸入欄位 (Text Input)）。ng-model綁定資料變數result，ng-readonly則可用來設定欄位為「唯讀」，不得修改。
搭配頁面的程式檔app.js如下：
angular.module('starter', ['ionic'])
.run(function ($ionicPlatform) {
$ionicPlatform.ready(function () {
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.controller('exchangerCtrl', function ($scope) {
$scope.rates = rates;
$scope.holdOption = rates[0];
$scope.exchangeOption = rates[0];
$scope.compute = function (money) {
$scope.money = money;
$scope.result = $scope.money*$scope.holdOption.rates[$scope.exchangeOption.base];
}
$scope.changeTarget = function (item) {
$scope.exchangeOption = item
}
$scope.changeHold = function (item) {
$scope.holdOption = item;
}
})
var rates = [
{base: "EUR", name: "歐元", rates: {"EUR": "1.00000000", "HKD": "8.35709734",
"JPY": "128.32296234", "TWD": "33.55496198", "USD": "1.07814038", }},
{base: "HKD", name: "港幣", rates: {"EUR": "0.11966741", "HKD": "1.00000000",
"JPY": "15.35022944", "TWD": "4.01517142", "USD": "0.12900979", }},
{base: "JPY", name: "日圓", rates: {"EUR": "0.00779284", "HKD": "0.06512550",
"JPY": "1.00000000", "TWD": "0.26148837", "USD": "0.00840177", }},
{base: "TWD", name: "新台幣", rates: {"EUR": "0.02980185", "HKD": "0.24905698",
"JPY": "3.82426189", "TWD": "1.00000000", "USD": "0.03213058", }},
{base: "USD", name: "美元", rates: {"EUR": "0.92752300", "HKD": "7.75140000",
"JPY": "119.02249900", "TWD": "31.12299900", "USD": "1.00000000", }}
]
- 第12-26行：定義controller:"exchangerCtrl"，處理index.html檔ng-controller指定的區塊內容。
- 第13-15行：設定幾個資料模型變數。$scope.rates供下拉選單使用，陣列內容則定義於第28-39行。
- 第16-19行：匯率換算計算函式，index.html已設定為按鈕點選的事件處理函式。
- 第20-22行：下拉選單「換算錢幣」選項改變的事件處理函式。參數item是由頁面傳送過來的最新選定項目值。
- 第23-25行：下拉選單「持有幣」選項改變的事件處理函式。參數item是由頁面傳送過來的最新選定項目值。
沒有留言:
張貼留言