简介
ionic除了提供css框架以外,参看ionic中文详解CSS组件,还是提供了javascript UI库。许多组件都是需要通过javascript来产生比较炫的效果。ionic遵循了mvc的设计模式,这一点可以通过通过创建tab栏的官方例子项目来体会view之间的控制与切换。下面就是关于ionic的中文javascript API介绍。其实官方已经写的比较详细了,只是国内访问网速不好的地方,那个js菜单栏一直展不开,加载慢,所以自己做一个中文的,方便以后查找。
内容很长,参看:
ionic中文javascript API(1)
ionic中文javascript API(2)
教程索引:(持续更新)
ionic中文教程
教程逐步迁移到github,欢迎点星星哦!
欢迎关注皓眸学问公众号(扫描左侧二维码)
转载请注明出处://fed123.oss-ap-southeast-2.aliyuncs.com/2014/08/11/2014_ionic_api/
Tabs
####1. ion-tabs
通过tab栏切换不同的page,注意:不要将ion-tabs放在ion-content里面,会导致一个css错误。
效果
android和ios在默认样式上有一些不同的地方,官方文档中都有说明,tab位置,$ionicConfigProvider, tabs.position(value)
Android 默认是顶部(top),Ios是底部 (bottom) :https://ionicframework.com/docs/api/provider/$ionicConfigProvider/
如果将tab配置成统一为下方,配制方法:
1
2
3
4
5
6
7
8
|
var myApp = angular.module('reallyCoolApp', ['ionic']);
myApp.config(function($ionicConfigProvider) {
$ionicConfigProvider.views.maxCache(5);
// note that you can also chain configs
$ionicConfigProvider.tabs.position("bottom");
});
|
用法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<ion-tabs class="tabs-positive tabs-icon-only">
<ion-tab title="Home" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline">
<!-- Tab 1 content -->
</ion-tab>
<ion-tab title="About" icon-on="ion-ios7-clock" icon-off="ion-ios7-clock-outline">
<!-- Tab 2 content -->
</ion-tab>
<ion-tab title="Settings" icon-on="ion-ios7-gear" icon-off="ion-ios7-gear-outline">
<!-- Tab 3 content -->
</ion-tab>
</ion-tabs>
|
API
Attr | Type | Details |
---|---|---|
delegate-handle(optional) | string | The handle used to identify these tabs with $ionicTabsDelegate |
实例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
|
<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>Inline Tabs</title>
<link href="https://code.ionicframework.com/1.0.0-beta.1/css/ionic.min.css" rel="stylesheet">
<script src="https://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.min.js"></script>
</head>
<body ng-controller="RootCtrl">
<ion-tabs class="tabs-icon-only tabs-positive">
<ion-tab title="Home"
icon-on="ion-ios7-filing"
icon-off="ion-ios7-filing-outline"
ng-controller="HomeCtrl">
<ion-header-bar class="bar-positive">
<button class="button button-clear" ng-click="newTask()">New</button>
<h1 class="title">Tasks</h1>
</ion-header-bar>
<ion-content has-tabs="true" on-refresh="onRefresh()">
<ion-refresher></ion-refresher>
<ion-list scroll="false" on-refresh="onRefresh()"
s-editing="isEditingItems"
animation="fade-out"
delete-icon="icon ion-minus-circled">
<ion-item ng-repeat="item in items"
item="item"
buttons="item.buttons"
can-delete="true"
can-swipe="true"
on-delete="deleteItem(item)"
ng-class="{completed: item.isCompleted}">
{{item.title}}
<i class="{{item.icon}}"></i>
</ion-item>
</ion-list>
</ion-content>
</ion-tab>
<ion-tab title="About" icon-on="icon ion-ios7-clock" icon-off="icon ion-ios7-clock-outline">
<header class="bar bar-header bar-positive">
<h1 class="title">Deadlines</h1>
</header>
<ion-content has-header="true">
<h1>Deadlines</h1>
</ion-content>
</ion-tab>
<ion-tab title="Settings" icon-on="icon ion-ios7-gear" icon-off="icon ion-ios7-gear-outline">
<header class="bar bar-header bar-positive">
<h1 class="title">Settings</h1>
</header>
<ion-content has-header="true">
<h1>Settings</h1>
</ion-content>
</ion-tab>
</ion-tabs>
<script id="newTask.html" type="text/ng-template">
<div id="task-view" class="modal slide-in-up" ng-controller="TaskCtrl">
<header class="bar bar-header bar-secondary">
<h1 class="title">New Task</h1>
<button class="button button-clear button-primary" ng-click="close()">Done</button>
</header>
<ion-content class="padding has-header">
<input type="text" placeholder="I need to do this...">
</ion-content>
</div>
</script>
</body>
</html>
|
app.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
|
angular.module('ionicApp', ['ionic'])
.controller('RootCtrl', function($scope) {
$scope.onControllerChanged = function(oldController, oldIndex, newController, newIndex) {
console.log('Controller changed', oldController, oldIndex, newController, newIndex);
console.log(arguments);
};
})
.controller('HomeCtrl', function($scope, $timeout, $ionicModal, $ionicActionSheet) {
$scope.items = [];
$ionicModal.fromTemplateUrl('newTask.html', function(modal) {
$scope.settingsModal = modal;
});
var removeItem = function(item, button) {
$ionicActionSheet.show({
buttons: [],
destructiveText: 'Delete Task',
cancelText: 'Cancel',
cancel: function() {
return true;
},
destructiveButtonClicked: function() {
$scope.items.splice($scope.items.indexOf(item), 1);
return true;
}
});
};
var completeItem = function(item, button) {
item.isCompleted = true;
};
$scope.onReorder = function(el, start, end) {
ionic.Utils.arrayMove($scope.items, start, end);
};
$scope.onRefresh = function() {
console.log('ON REFRESH');
$timeout(function() {
$scope.$broadcast('scroll.refreshComplete');
}, 1000);
}
$scope.removeItem = function(item) {
removeItem(item);
};
$scope.newTask = function() {
$scope.settingsModal.show();
};
// Create the items
for(var i = 0; i < 25; i++) {
$scope.items.push({
title: 'Task ' + (i + 1),
buttons: [{
text: 'Done',
type: 'button-success',
onButtonClicked: completeItem,
}, {
text: 'Delete',
type: 'button-danger',
onButtonClicked: removeItem,
}]
});
}
})
.controller('TaskCtrl', function($scope) {
$scope.close = function() {
$scope.modal.hide();
}
});
|
2.ion-tab
作为ion-tabs的tab项,用于切换选择tab的内容,只有当tab被选中时,其对应的内容content才会存在。每个ion tab都有自己的查看历史。
用法
1
2
3
4
5
6
7
|
<ion-tab
title="Tab!"
icon="my-icon"
href="#/tab/tab-link"
on-select="onTabSelected()"
on-deselect="onTabDeselected()">
</ion-tab>
|
API
Attr | Type | Details |
---|---|---|
title | string | The title of the tab. |
href(optional) | string | The link that this tab will navigate to when tapped. |
icon(optional) | string | The icon of the tab. If given, this will become the default for icon-on and icon-off. |
icon-on(optional) | string | The icon of the tab while it is selected. |
icon-off(optional) | string | The icon of the tab while it is not selected. |
badge(optional) | expression | The badge to put on this tab (usually a number). |
badge-style(optional) | expression | The style of badge to put on this tab (eg tabs-positive). |
on-select(optional) | expression | Called when this tab is selected. |
on-deselect(optional) | expression | Called when this tab is deselected. |
ng-click(optional) | expression | By default, the tab will be selected on click. If ngClick is set, it will not. You can explicitly switch tabs using $ionicTabsDelegate.select(). |
3. /$ionicTabsDelegate
是ion-tabs的一个api参数,通过这个可以选择切换不同的tab,可以通过$getByHandle 方法获取不同的tab的实例。
用法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<body ng-controller="MyCtrl">
<ion-tabs>
<ion-tab title="Tab 1">
Hello tab 1!
<button ng-click="selectTabWithIndex(1)">Select tab 2!</button>
</ion-tab>
<ion-tab title="Tab 2">Hello tab 2!</ion-tab>
</ion-tabs>
</body>
function MyCtrl($scope, $ionicTabsDelegate) {
$scope.selectTabWithIndex = function(index) {
$ionicTabsDelegate.select(index);
}
}
|
参数
1. select(index, [shouldChangeHistory]),Select the tab matching the given index.
Attr | Type | Details |
---|---|---|
index | number | Index of the tab to select. |
shouldChangeHistory(optional) | boolean | Whether this selection should load this tab’s view history (if it exists) and use it, or just load the default page. Default false. Hint: you probably want this to be true if you have an ionNavView inside your tab. |
- selectedIndex(),Returns: number The index of the selected tab, or -1.
- /$getByHandle(handle)
Attr | Type | Details |
---|---|---|
handle | string | Returns: delegateInstance A delegate instance that controls only the ionTabs directives with delegate-handle matching the given handle. |
1
|
Example $ionicTabsDelegate.$getByHandle('my-handle').select(0);
|
### ion-side-menus
####1.ion-side-menus
是一个带有边栏菜单的容器,可以通过点击按钮或者滑动屏幕来展开菜单。在js中可以通过$ionicSideMenuDelegate来获取该组件对应的实例。为了自动关闭已打开的menu,可以通过在ion-side-menu-content中的按钮或link添加menu-close样式。
用法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<ion-side-menus>
<!-- Center content -->
<ion-side-menu-content ng-controller="ContentController">
</ion-side-menu-content>
<!-- Left menu -->
<ion-side-menu side="left">
</ion-side-menu>
<!-- Right menu -->
<ion-side-menu side="right">
</ion-side-menu>
</ion-side-menus>
function ContentController($scope, $ionicSideMenuDelegate) {
$scope.toggleLeft = function() {
$ionicSideMenuDelegate.toggleLeft();
};
}
|
API
Attr | Type | Details |
---|---|---|
delegate-handle(optional) | string | The handle used to identify this side menu with $ionicSideMenuDelegate. |
效果
展示主要内容的容器。可以通过滑动屏幕来展开menu
用法
1
2
3
4
|
<ion-side-menu-content
edge-drag-threshold="true"
drag-content="true">
</ion-side-menu-content>
|
API
Attr | Type | Details |
---|---|---|
drag-content (optional) |
boolean | Whether the content can be dragged. Default true. |
edge-drag-threshold | boolean|number | Whether the content drag can only start if it is below a certain threshold distance from the edge of the screen. Default false. Accepts three types of values: - If a non-zero number is given, that many pixels is used as the maximum allowed distance from the edge that starts dragging the side menu. - If true is given, the default number of pixels (25) is used as the maximum allowed distance. - If false or 0 is given, the edge drag threshold is disabled, and dragging from anywhere on the content is allowed. |
####3. ion-side-menu
存放侧边栏的容器,
用法
1
2
3
4
5
|
<ion-side-menu
side="left"
width="myWidthValue + 20"
is-enabled="shouldLeftSideMenuBeEnabled()">
</ion-side-menu>
|
API
Attr | Type | Details |
---|---|---|
side | string | Which side the side menu is currently on. Allowed values: ‘left’ or ‘right’. |
is-enabled (optional) |
boolean | Whether this side menu is enabled. |
width (optional) |
number | How many pixels wide the side menu should be. Defaults to 275. |
####4. menu-toggle
用于切换显示侧边栏菜单
用法
1
2
3
4
5
6
|
<ion-view>
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
...
</ion-view>
|
####5. menu-close
关闭当前打开的menu,下面的例子是在一个menu栏里面的一项菜单,点击可以关闭menu
1
|
<a menu-close href="#/home" class="item">Home</a>
|
####6. $ionicSideMenuDelegate
用于指定控制 ionSideMenus 的实例,
用法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<body ng-controller="MainCtrl">
<ion-side-menus>
<ion-side-menu-content>
Content!
<button ng-click="toggleLeftSideMenu()">
Toggle Left Side Menu
</button>
</ion-side-menu-content>
<ion-side-menu side="left">
Left Menu!
<ion-side-menu>
</ion-side-menus>
</body>
function MainCtrl($scope, $ionicSideMenuDelegate) {
$scope.toggleLeftSideMenu = function() {
$ionicSideMenuDelegate.toggleLeft();
};
}
|
方法
- toggleLeft([isOpen]), Toggle the left side menu (if it exists).
Attr Type Details isOpen
(optional)boolean Whether to open or close the menu. Default: Toggles the menu. - toggleRight([isOpen]),Toggle the right side menu (if it exists).
Attr Type Details isOpen
(optional)boolean Whether to open or close the menu. Default: Toggles the menu. - getOpenRatio(),Gets the ratio of open amount over menu width. For example, a menu of width 100 that is opened by 50 pixels is 50% opened, and would return a ratio of 0.5.
Returns: float 0 if nothing is open, between 0 and 1 if left menu is opened/opening, and between 0 and -1 if right menu is opened/opening. - isOpen(),Returns: boolean Whether either the left or right menu is currently opened.
- isOpenLeft(),Returns: boolean Whether the left menu is currently opened.
- isOpenRight(),Returns: boolean Whether the right menu is currently opened.
- canDragContent([canDrag]),Returns: boolean Whether the content can be dragged to open side menus.
Attr Type Details canDrag
(optional)boolean Set whether the content can or cannot be dragged to open side menus. - edgeDragThreshold(value),Returns: boolean Whether the drag can start only from within the edge of screen threshold.
Attr Type Details value boolean|number Set whether the content drag can only start if it is below a certain threshold distance from the edge of the screen. Accepts three different values:
-If a non-zero number is given, that many pixels is used as the maximum allowed distance from the edge that starts dragging the side menu.
-If true is given, the default number of pixels (25) is used as the maximum allowed distance.
-If false or 0 is given, the edge drag threshold is disabled, and dragging from anywhere on the content is allowed./$getByHandle(handle),Returns: delegateInstance A delegate instance that controls only the ionSideMenus directives with delegate-handle matching the given handle.
1Example: $ionicSideMenuDelegate.$getByHandle('my-handle').toggleLeft();
ionic能够记录用户的导航历史,能够在导航页面间添加过渡效果。ionic使用的是AngularUI router模块以‘states’来组织app 的界面。在Angular核心中的/$route service,可以通过url来控制不同的view。而AngularUI router提供了一个更强大的state manager,可以和named, nested, and parallel views绑定,允许不止一个模板来渲染页面。另外,不同的state不需要和url绑定,数据会自动更新。
ionNavView 是用来渲染视图中的模板的,每个模板是其中的一个状态。不同的state通常在程序中定义映射到一个url。
用法
在这个例子中,我们创建一个导航,切换不同的状态。我们使用ionNavView显示content,使用ionNavBar显示顶栏,可以在animation样式中指定切换的动画效果,推荐的有: ‘slide-left-right’, ‘slide-left-right-ios7’, ‘slide-in-up’.
1
2
3
4
|
<ion-nav-bar></ion-nav-bar>
<ion-nav-view animation="slide-left-right">
<!-- Center content -->
</ion-nav-view>
|
var app = angular.module('myApp', ['ionic']); app.config(function($stateProvider) { $stateProvider .state('index', { url: '/', templateUrl: 'home.html' }) .state('music', { url: '/music', templateUrl: 'music.html' }); });
在app启动的时候,/$stateProvider 会查看url, 如果和 index 状态匹配,然后会在 中加载 home.html.在Angular中创建模板的一种简单的方法是把html内容放在
1
|
<script type="text/ng-template">
|
里面,如下:
####1.ion-view
作为ionNavView的子元素,用于展示当前的view。
用法
1
2
3
4
5
6
7
8
|
<ion-nav-bar></ion-nav-bar>
<ion-nav-view class="slide-left-right">
<ion-view title="My Page">
<ion-content>
Hello!
</ion-content>
</ion-view>
</ion-nav-view>
|
API
1
2
3
4
5
|
title(optional) string The title to display on the parent ionNavBar.
hide-back-button(optional) boolean Whether to hide the back button on the parent ionNavBar by default.
hide-nav-bar(optional) boolean Whether to hide the parent ionNavBar by default.
|
####2.ion-nav-bar
如果我们使用ionNavView指令,我们就可以创建一个顶部栏,这个顶部栏会随着应用的状态变化而变化。
我们可以在里面放置一个返回的按钮ionNavBackButton 用于返回操作。
也可以在ionNavButtons 中添加业务需要的按钮。
通过animation 属性可以添加标题切换的动态效果。推荐的效果是’nav-title-slide-ios7’。
ion-nav-bar 只有在你的元素内部中有ionView 标签包裹的情况下才会正常工作。
用法
1
2
3
4
5
6
7
8
9
10
11
12
|
<body ng-app="starter">
<!-- The nav bar that will be updated as we navigate -->
<ion-nav-bar class="bar-positive" animation="nav-title-slide-ios7">
</ion-nav-bar>
<!-- where the initial view template will be rendered -->
<ion-nav-view>
<ion-view>
<ion-content>Hello!</ion-content>
</ion-view>
</ion-nav-view>
</body>
|
API接口
1
2
3
4
5
6
7
8
|
属性:delegate-handle(optional) 类型:string
描述:The handle used to identify this navBar with $ionicNavBarDelegate.
属性:align-title(optional) 类型:string
描述:Where to align the title of the navbar. Available: 'left', 'right', 'center'. Defaults to 'center'.
属性:no-tap-scroll(optional) 类型:boolean
描述:By default, the navbar will scroll the content to the top when tapped. Set no-tap-scroll to true to disable this behavior.
|
其他用法
你可以把ion-nav-bar放到不同的ion-view 元素里面,这样你的每个不同的ion-view就有各自独立的navbar。
这个和在ion-view里面放置 header bar 差不多,只是这里拥有navbar的特性。需要注意,这样使用时,在navbar 里面放置buttons就可以,不要使用。
1
2
3
4
5
6
7
8
9
10
11
12
|
<ion-view title="myTitle">
<ion-nav-bar class="bar-positive">
<ion-nav-back-button>
Back
</ion-nav-back-button>
<div class="buttons right-buttons">
<button class="button">
Right Button
</button>
</div>
</ion-nav-bar>
</ion-view>
|
####3.ion-nav-buttons
使用ionNavButtons 设置ionView中的buttons,在这里面放置的所有button将会被放置在navbar中对应的位置。当你离开父控件视图时,就会销毁。
用法:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<ion-nav-bar>
</ion-nav-bar>
<ion-nav-view>
<ion-view>
<ion-nav-buttons side="left">
<button class="button" ng-click="doSomething()">
I'm a button on the left of the navbar!
</button>
</ion-nav-buttons>
<ion-content>
Some super content here!
</ion-content>
</ion-view>
</ion-nav-view>
|
API用法
1
2
|
属性:side 类型:string
描述:The side to place the buttons on in the parent ionNavBar. Available: 'left' or 'right'.
|
####4. ion-nav-back-button
在ionNavBar中设置返回按钮。
当用户在当前的导航历史栈中可以返回时,会显示返回按钮。默认点击该按钮会执行返回操作,更多的方法参看示例。
用法:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
默认执行返回:
<ion-nav-bar>
<ion-nav-back-button class="button-clear">
<i class="ion-arrow-left-c"></i> Back
</ion-nav-back-button>
</ion-nav-bar>
用户自己定制动作, 使用 $ionicNavBarDelegate:
<ion-nav-bar ng-controller="MyCtrl">
<ion-nav-back-button class="button-clear"
ng-click="goBack()">
<i class="ion-arrow-left-c"></i> Back
</ion-nav-back-button>
</ion-nav-bar>
function MyCtrl($scope, $ionicNavBarDelegate) {
$scope.goBack = function() {
$ionicNavBarDelegate.back();
};
}
显示返回的view的标题, 使用 $ionicNavBarDelegate.
<ion-nav-bar ng-controller="MyCtrl">
<ion-nav-back-button class="button-icon">
<i class="icon ion-arrow-left-c"></i>{{getPreviousTitle() || 'Back'}}
</ion-nav-back-button>
</ion-nav-bar>
function MyCtrl($scope, $ionicNavBarDelegate) {
$scope.getPreviousTitle = function() {
return $ionicNavBarDelegate.getPreviousTitle();
};
}
|
####5. navi-clear
nav-clear是一个属性指令,用于改变视图的元素中。比如
1
2
|
<a href>
<button ui-sref>
|
当点击带有nav-clear指令的元素时,该指令会阻止下一个view的过渡,这个用的比较多,比如在sidemenu中。
用法:
下面的例子是在sidemenu中的一个超链接,点击这个超链接时会阻止切换view之间的过渡。
1
|
<a nav-clear menu-close href="#/home" class="item" >home</a>
|
####6. /$ionicNavBarDelegate
委托处理控制ionNavBar 指令。
用法:
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<body ng-controller=“MyCtrl”>
<ion-nav-bar>
<button ng-cllick="setNavTitle('banana')">
set title to banana
</button>
</ion-nav-bar>
</body>
function MyCtrl($scope,$ionicNavBarDelegate){
$scope.setNavTitle = function(title){
$ionicNavBarDelegate.setTitle(title);
}
}
|
方法:
1
2
3
4
5
6
7
8
9
10
|
back([event]) 根据历史记录返回
align([direction]) 根据给定的方向对齐标题
showBackButton([show]) Set/Get ionNavButton 是否显示,返回值是boolean是否显示
showBar(show) set/get ionNavBar 是否显示,返回值是boolean是否显示
setTitle(title) 设置标题 ionNavBar
changeTitle(title,direction) 改变标题,通过过渡设置新的标题移除旧的标题
getTitle() 返回当前navbar的标题
getPreviousTitle() 返回navbar之前的标题
$getByHandle(handle) 匹配给定的handle 返回委托的实例来控制navBar
例子:$ionicNavBarDelegate.$getByHandle('myHandle').setTitle('newTitle')
|
action sheet
$ionicActionSheet 是一个上拉显示的菜单控件,危险的操作可以用不同的颜色标示,点击屏幕的背景处或者按escape键即可取消显示。如下图:
用法
在你的controller中使用$ionicActionSheet来触发 Action Sheet
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
angular.module('mySuperApp', ['ionic'])
.controller(function($scope, $ionicActionSheet, $timeout) {
// Triggered on a button click, or some other target
$scope.show = function() {
// Show the action sheet
var hideSheet = $ionicActionSheet.show({
buttons: [
{ text: '<b>Share</b> This' },
{ text: 'Move' }
],
destructiveText: 'Delete',
titleText: 'Modify your album',
cancelText: 'Cancel',
cancel: function() {
// add cancel code..
},
buttonClicked: function(index) {
return true;
}
});
// For example's sake, hide the sheet after two seconds
$timeout(function() {
hideSheet();
}, 2000);
};
});
|
方法:show(options),显示并返回新的action sheet。加载action sheet时会创建新的隔离的scope
参数:
1
2
3
4
5
6
7
8
9
10
|
action sheet 的options参数:
[Object] buttons Which buttons to show. Each button is an object with a text field.
{string} titleText The title to show on the action sheet.
{string=} cancelText the text for a 'cancel' button on the action sheet.
{string=} destructiveText The text for a 'danger' on the action sheet.
{function=} cancel Called if the cancel button is pressed, the backdrop is tapped or the hardware back button is pressed.
{function=} buttonClicked Called when one of the non-destructive buttons is clicked, with the index of the button that was clicked and the button object. Return true to close the action sheet, or false to keep it opened.
{function=} destructiveButtonClicked Called when the destructive button is clicked. Return true to close the action sheet, or false to keep it opened.
{boolean=} cancelOnStateChange Whether to cancel the actionSheet when navigating to a new state. Default true.
|
Backdrop
$ionicBackdrop 在UI上显示或隐藏背景层,在弹出框、加载框、其他弹出层中使用。许多UI界面需要背景层,在一个DOM页面只需要一个背景层就够了。在组件中可以使用$ionicBackdrop.retain()来显示背景层,使用$ionicBackdrop.release()隐藏背景层。每次调用retain后,背景会一直显示,直到调用release消除背景层。
用法:
1
2
3
4
5
6
7
8
9
|
function MyController($scope, $ionicBackdrop, $timeout) {
//Show a backdrop for one second
$scope.action = function() {
$ionicBackdrop.retain();
$timeout(function() {
$ionicBackdrop.release();
}, 1000);
};
}
|
方法:
1
2
|
retain() 保持显示背景层
release() 释放背景层
|
Content
ion-content ,委托实例为$ionicScrollDelegate
ionContent 指令是很方便使用的显示内容的组件,可以配置成使用ionic定制的scroll视图或者是浏览器那种溢出滚动的视图。
我们推荐在大多数情况下使用ionic定制的scroll视图,有时候处于性能的考虑,只有使用浏览器原生的溢出滚动视图才可以达到效果的情况,我们可以切换到溢出滚动视图。
你可以使用ionRefresher 指令实现下拉刷新,使用ionInfiniteScroll 实现无限制的滚动
注意,这个指令会产生自己的child scope,关于scope可以参考https://docs.angularjs.org/guide/scope
用法:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<ion-content
[delegate-handle=""]
[direction=""]
[locking=""]
[padding=""]
[scroll=""]
[overflow-scroll=""]
[scrollbar-x=""]
[scrollbar-y=""]
[start-y=""]
[on-scroll=""]
[on-scroll-complete=""]
[has-bouncing=""]>
...
</ion-content>
|
API文档
1
2
3
4
5
6
7
8
9
10
11
12
|
属性:delegate-handle(可选),类型string,使用$ionicScrollDelegate来处理这个scrollview
属性:direction(可选),类型String,指定滚动的方向,可选值是'x','y','xy',默认是'y'
属性:locking(可选),类型boolean,是否锁定一次只能滚动一个方向
属性:padding(可选),类型boolean,是否给content增加padding,iOS默认为true,android默认为false
属性:scroll(可选),类型boolean,是否允许滚动内容,默认是true
属性:overflow-scroll(可选),类型boolean,是否使用overflow-scrolling 而不是ionic scroll
属性:scrollbar-x,类型boolean,是否显示x轴滚动条
属性:scrollbar-y,类型boolean,是否显示y轴滚动条
属性:start-y,类型string,y轴scroll初始位置,默认是0
属性:on-scroll,类型:expression,滚动内容时执行的表达式
属性:on-scroll-complete,类型:expression,滚动操作结束时执行的表达式
属性:has-bouncing,类型:boolean,是否允许滚动时弹跳超过内容体的边界,ios默认true,Android默认false
|
ion-refresher
在scrollview中添加下拉刷新,在ionContent或ionScroll中第一个子元素位置放置改指令,加载结束时候,在control中广播’scroll.refreshComplete’ 事件
用法:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<ion-content ng-controller="MyController">
<ion-refresher
pulling-text="Pull to refresh..."
on-refresh="doRefresh()">
</ion-refresher>
<ion-list>
<ion-item ng-repeat="item in items"></ion-item>
</ion-list>
</ion-content>
angular.module('testApp', ['ionic'])
.controller('MyController', function($scope, $http) {
$scope.items = [1,2,3];
$scope.doRefresh = function() {
$http.get('/new-items')
.success(function(newItems) {
$scope.items = newItems;
})
.finally(function() {
// Stop the ion-refresher from spinning
$scope.$broadcast('scroll.refreshComplete');
});
};
});
|
API参数:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
Attr Type Details
on-refresh(optional),expression,Called when the user pulls down enough and lets go of the refresher.
-----------------------------------------------------------
on-pulling(optional),expression,Called when the user starts to pull down on the refresher.
-----------------------------------------------------------
pulling-icon(optional),string,The icon to display while the user is pulling down. Default: 'ion-arrow-down-c'.
-----------------------------------------------------------
pulling-text(optional),string,The text to display while the user is pulling down.
-----------------------------------------------------------
refreshing-icon(optional),string,The icon to display after user lets go of the refresher.
-----------------------------------------------------------
refreshing-text(optional),string,The text to display after the user lets go of the refresher.
-----------------------------------------------------------
disable-pulling-rotation(optional),boolean,Disables the rotation animation of the pulling icon when it reaches its activated threshold. To be used with a custom pulling-icon.
|
####ion-pane
简单的适配内容的容器
用法:
1
2
3
|
<ion-pane>
...
</ion-pane>
|
第二部分
谢谢!
转载请注明出处://fed123.oss-ap-southeast-2.aliyuncs.com/2014/08/11/2014_ionic_api/
欢迎关注皓眸学问公众号(扫描左侧二维码),每天好文、新技术!任何学习疑问或者工作问题都可以给我留言、互动。T_T 皓眸大前端开发学习 T_T