RSS订阅 微信
QQ群：345413787
当前位置：前端学堂 > 性能体验 > 正文

ionic中文javascript API(1)

  • 前端学堂 发布于 2014-08-11
  • 分类：性能体验
  • 阅读(2829)
  • 评论(0)

简介

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，欢迎点星星哦！
欢迎关注皓眸学问公众号（扫描左侧二维码）
ionic中文javascript API(1)

转载请注明出处：//fed123.oss-ap-southeast-2.aliyuncs.com/2014/08/11/2014_ionic_api/

Tabs

####1. ion-tabs
通过tab栏切换不同的page，注意：不要将ion-tabs放在ion-content里面，会导致一个css错误。
效果
ionic中文javascript API(1)
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.
  1. selectedIndex(),Returns: number The index of the selected tab, or -1.
  2. /$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.

效果
ionic中文javascript API(1)

2. ion-side-menu-content

展示主要内容的容器。可以通过滑动屏幕来展开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.

    1
    Example: $ionicSideMenuDelegate.$getByHandle(‘my-handle’).toggleLeft();

Navigation

ion-nav-view

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键即可取消显示。如下图：
ionic中文javascript API(1)
用法
在你的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>

第二部分

参看：ionic中文javascript API(2)

谢谢！

转载请注明出处：//fed123.oss-ap-southeast-2.aliyuncs.com/2014/08/11/2014_ionic_api/

欢迎关注皓眸学问公众号（扫描左侧二维码），每天好文、新技术！任何学习疑问或者工作问题都可以给我留言、互动。T_T 皓眸大前端开发学习 T_T

知识共享署名4.0国际许可协议,转载请保留出处; 部分内容来自网络,若有侵权请联系我：前端学堂 » ionic中文javascript API(1)

赞 (0) 打赏

相关推荐

评论 0

取消

如果对您有帮助，别忘了打赏一下宝宝哦！

支付宝扫一扫打赏

微信扫一扫打赏