ionic 頭部和底部
ion-header-bar
這個是固定在屏幕頂部的一個頭部標題欄。如果給它加上'bar-subheader' 這個樣式，它就是副標題。
用法
<ion-header-bar align-title="left" class="bar-positive">
<div class="buttons">
<button class="button" ng-click="doSomething()">
Left Button
</button>
</div>
<h1 class="title">Title!</h1>
<div class="buttons">
<button class="button">
Right Button
</button>
</div>
</ion-header-bar>
<ion-content> Some content!</ion-content>
API
| 屬性 | 類型 | 描述 |
|---|---|---|
| align-title(optional) | string | 這個是對齊 title 的。如果沒有設置，它將會按照手機的默認排版(Ios的默認是居中，Android默認是居左)。它的值可以是 'left','center','right'。 |
| no-tap-scroll(optional) | boolean | 默認情況下，頭部標題欄在點擊屏幕時內容會滾動到頭部，可以將 no-tap-scroll 設置為 true 來禁止該動作。。它的值是布爾值（true/false）。 |
ion-footer-bar
知道了 ion-header-bar ，理解ion-footer-bar就輕松多啦！只是 ion-footer-bar 是在屏幕的底部。
用法
<ion-content> Some content!</ion-content>
<ion-footer-bar align-title="left" class="bar-assertive">
<div class="buttons">
<button class="button">Left Button</button>
</div>
<h1 class="title">Title!</h1>
<div class="buttons" ng-click="doSomething()">
<button class="button">Right Button</button>
</div>
</ion-footer-bar>
API
與 ion-header-bar 不同的是，ion-footer-bar 只有 align-title 這個 API。
| 屬性 | 類型 | 描述 |
|---|---|---|
| align-title(optional) | string | 這個是對齊 title 的。如果沒有設置，它將會按照手機的默認排版(Ios的默認是居中，Android默認是居左)。它的值可以是 'left','center','right'。 |
ionic 列表操作
列表是一個應用廣泛在幾乎所有移動app中的界面元素。ionList 和 ionItem 這兩個指令還支持多種多樣的交互模式，比如移除其中的某一項，拖動重新排序，滑動編輯等等。
用法
<ion-list>
<ion-item ng-repeat="item in items">
Hello, {{item}}!
</ion-item>
</ion-list>
高級用法: 縮略圖，刪除按鈕，重新排序，滑動
<ion-list ng-controller="MyCtrl" show-delete="shouldShowDelete" show-reorder="shouldShowReorder" can-swipe="listCanSwipe">
<ion-item ng-repeat="item in items" class="item-thumbnail-left">
<img ng-src="{{item.img}}">
<h2>{{item.title}}</h2>
<p>{{item.description}}</p>
<ion-option-button class="button-positive" ng-click="share(item)">
分享
</ion-option-button>
<ion-option-button class="button-info" ng-click="edit(item)">
編輯
</ion-option-button>
<ion-delete-button class="ion-minus-circled" ng-click="items.splice($index, 1)">
</ion-delete-button>
<ion-reorder-button class="ion-navicon" on-reorder="reorderItem(item, $fromIndex, $toIndex)">
</ion-reorder-button>
</ion-item>
</ion-list>
API
| 屬性 | 類型 | 詳情 |
|---|---|---|
| delegate-handle(可選) | 字符串 | 該句柄定義帶有$ionicListDelegate的列表。 |
| show-delete(可選) | 布爾值 | 列表項的刪除按鈕當前是顯示還是隱藏。 |
| show-reorder(可選) | 布爾值 | 列表項的排序按鈕當前是顯示還是隱藏。 |
| can-swipe(可選) | 布爾值 | 列表項是否被允許滑動顯示選項按鈕。默認：true。 |
實例
【HTML 代碼：】
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Ionic List Directive</title>
<link rel="stylesheet">
<script src="http://www.runoob.com/static/ionic/js/ionic.bundle.min.js"></script>
</head>
<body ng-controller="MyCtrl">
<ion-header-bar class="bar-positive">
<div class="buttons">
<button class="button button-icon icon ion-ios-minus-outline"
ng-click="data.showDelete = !data.showDelete;
data.showReorder = false"></button>
</div>
<h1 class="title">Ionic Delete/Option Buttons</h1>
<div class="buttons">
<button class="button" ng-click="data.showDelete = false; data.showReorder = !data.showReorder"> Reorder </button>
</div>
</ion-header-bar>
<ion-content>
<!-- The list directive is great, but be sure to also checkout the collection repeat directive when scrolling through large lists -->
<ion-list show-delete="data.showDelete" show-reorder="data.showReorder">
<ion-item ng-repeat="item in items" item="item" href="#/item/{{item.id}}" class="item-remove-animate">
Item {{ item.id }}
<ion-delete-button class="ion-minus-circled" ng-click="onItemDelete(item)"> </ion-delete-button>
<ion-option-button class="button-assertive" ng-click="edit(item)"> Edit </ion-option-button>
<ion-option-button class="button-calm" ng-click="share(item)"> Share </ion-option-button>
<ion-reorder-button class="ion-navicon" on-reorder="moveItem(item, $fromIndex, $toIndex)"></ion-reorder-button>
</ion-item>
</ion-list>
</ion-content>
</body>
</html>
【CSS 代碼】
body {
cursor: url('http://www.runoob.com/try/demo_source/finger.png'), auto;
}
【JavaScript 代碼】
angular.module('ionicApp', ['ionic']).controller('MyCtrl', function($scope) {
$scope.data = { showDelete: false };
$scope.edit = function(item) {
alert('Edit Item: ' + item.id);
};
$scope.share = function(item) {
alert('Share Item: ' + item.id);
};
$scope.moveItem = function(item, fromIndex, toIndex) {
$scope.items.splice(fromIndex, 1);
$scope.items.splice(toIndex, 0, item);
};
$scope.onItemDelete = function(item) {
$scope.items.splice($scope.items.indexOf(item), 1);
};
$scope.items = [
{ id: 0 },
{ id: 1 },
{ id: 2 },
{ id: 3 },
{ id: 4 },
{ id: 5 },
{ id: 6 },
{ id: 7 },
{ id: 8 },
{ id: 9 },
{ id: 10 },
{ id: 11 },
{ id: 12 },
{ id: 13 },
{ id: 14 },
{ id: 15 },
{ id: 16 },
{ id: 17 },
{ id: 18 },
{ id: 19 },
{ id: 20 },
{ id: 21 },
{ id: 22 },
{ id: 23 },
{ id: 24 },
{ id: 25 },
{ id: 26 },
{ id: 27 },
{ id: 28 },
{ id: 29 },
{ id: 30 },
{ id: 31 },
{ id: 32 },
{ id: 33 },
{ id: 34 },
{ id: 35 },
{ id: 36 },
{ id: 37 },
{ id: 38 },
{ id: 39 },
{ id: 40 },
{ id: 41 },
{ id: 42 },
{ id: 43 },
{ id: 44 },
{ id: 45 },
{ id: 46 },
{ id: 47 },
{ id: 48 },
{ id: 49 },
{ id: 50 }
];
});
ionic 加載動作
$ionicLoading 是 ionic 默認的一個加載交互效果。里面的內容也是可以在模板里面修改。
用法
angular.module('LoadingApp', ['ionic'])
.controller('LoadingCtrl', function($scope, $ionicLoading) {
$scope.show = function() {
$ionicLoading.show({ template: 'Loading...' });
};
$scope.hide = function(){
$ionicLoading.hide();
};
});
方法
顯示一個加載效果。
show(opts)
| 參數 | 類型 | 詳情 |
|---|---|---|
| opts | object | <small>loading指示器的選項?？捎脤傩裕?br>??{string=} template 指示器的html內容。 ??{string=} templateUrl 一個加載html模板的url作為指示器的內容。 ??{boolean=} noBackdrop 是否隱藏背景。默認情況下它會顯示。 ??{number=} delay 指示器延遲多少毫秒顯示。默認為不延遲。 ??{number=} duration 等待多少毫秒后自動隱藏指示器。默認情況下，指示器會一直顯示，直到觸發.hide()。</small> |
隱藏一個加載效果。
hide()
API
| 屬性 | 類型 | 詳情 |
|---|---|---|
| delegate-handle(可選) | 字符串 | 該句柄定義帶有$ionicListDelegate的列表。 |
| show-delete(可選) | 布爾值 | 列表項的刪除按鈕當前是顯示還是隱藏。 |
| show-reorder(可選) | 布爾值 | 列表項的排序按鈕當前是顯示還是隱藏。 |
| can-swipe(可選) | 布爾值 | 列表項是否被允許滑動顯示選項按鈕。默認：true。 |
實例
【HTML 代碼：】
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Modal</title>
<link rel="stylesheet">
<script src="http://www.runoob.com/static/ionic/js/ionic.bundle.min.js"></script>
</head>
<body ng-controller="AppCtrl">
<ion-view title="Home">
<ion-header-bar>
<h1 class="title">The Stooges</h1>
</ion-header-bar>
<ion-content has-header="true">
<ion-list>
<ion-item ng-repeat="stooge in stooges" href="#">
{{stooge.name}}
</ion-item>
</ion-list>
</ion-content>
</ion-view>
</body>
</html>
【JavaScript 代碼】
angular.module('ionicApp', ['ionic'])
.controller('AppCtrl', function($scope, $timeout, $ionicLoading) {
// Setup the loader
$ionicLoading.show({
content: 'Loading',
animation: 'fade-in',
showBackdrop: true,
maxWidth: 200,
showDelay: 0
});
// Set a timeout to clear loader, however you would actually call the $ionicLoading.hide(); method whenever everything is ready or loaded.
$timeout(function () {
$ionicLoading.hide();
$scope.stooges = [
{name: 'Moe'},
{name: 'Larry'},
{name: 'Curly'}
];
}, 2000);
});
$ionicLoadingConfig
設置加載的默認選項:
用法:
var app = angular.module('myApp', ['ionic'])
app.constant('$ionicLoadingConfig', {
template: '默認加載模板……'
});
app.controller('AppCtrl', function($scope, $ionicLoading) {
$scope.showLoading = function() {
$ionicLoading.show(); //配置選項在 $ionicLoadingConfig 設置
};
});