ionic所支持的所有事件events

摘自;http://www.haomou.net/2014/10/13/2014_ionic_api2/

（1）on-hold 同一位置触摸时间超过500ms

      用法：<button on-hold="onHold()" class="button" >Test</buttom>

 (2)on-tap 快速触摸某个位置

      用法：<button on-tap="onTap()" class="button" >Test</buttom>

 (3) on-release 用户离开屏幕，结束触摸时触发。

       用法：<button on-release="onRelease()" class="button" >Test</buttom>

 (4) on-drag 在页面触摸一个点移动时触发。

       用法：<button on-drag="onDrag()" class="button" >Test</buttom>

 (5)on-drag-up 向上拖拽时触发。

       用法：<button on-drag-up="onDragUp()" class="button" >Test</buttom>

 (6)on-drag-right 向右拖拽时触发。

       用法：<button on-drag-right="onDragRight()" class="button" >Test</buttom>

 (7)on-drag-left 向左拖拽时触发。

       用法：<button on-drag-left="onDragLeft()" class="button" >Test</buttom>

 (8)on-drag-down 向下拖拽时触发。

       用法：<button on-drag-down="onDragDown()" class="button" >Test</buttom>

 (9)on-swipe  很快速的向任何方向滑动时触发

       用法：<button on-swipe="onSwipe()" class="button" >Test</buttom>

 (10)on-swipe-up  很快速的向上滑动时触发

       用法：<button on-swipe-up="onSwipeUp()" class="button" >Test</buttom>

 (11)on-swipe-down  很快速的向下滑动时触发

       用法：<button on-swipe-down="onSwipeDown()" class="button" >Test</buttom>

 (12)on-swipe-right  很快速的向右滑动时触发

       用法：<button on-swipe-right="onSwipeRight()" class="button" >Test</buttom>

 (13)on-swipe-left  很快速的向左滑动时触发

       用法：<button on-swipe-left="onSwipeLeft()" class="button" >Test</buttom>

 

FormInputs

  ion-checkbox

 用法：

<ion-checkbox ng-model="isChecked">Checkbox Label</ion-checkbox>

  ion-radio

  用法：

<ion-radio ng-model="choice" ng-value="'A'">Choose A</ion-radio>
<ion-radio ng-model="choice" ng-value="'B'">Choose B</ion-radio>
<ion-radio ng-model="choice" ng-value="'C'">Choose C</ion-radio>

  ion-toggle

   用法：

<ion-toggle ng-model="airplaneMode" toggle-class="toggle-calm">Airplane Mode</ion-toggle>

keyboard
在android和ios中，ionic会尽量阻止因为滚动显示出来的键盘而导致的输入框或者可获焦点的元素模糊不清，为了达到这个目的，所有可获焦点的元素都必须放在scroll view中，或者有scroll view的指令中，比如content。
同样会阻止获得焦点时的滚动溢出，这会导致布局的问题，比如headers获得焦点后会滚动到顶部，然后被溢出（overflow）。
这个keyboard 补丁和 Ionic Keyboard Plugin在一块运行时可以获得最好的效果，当然没有这个plugin keyboard也可以很好的工作。如果你在使用cordova，你可以使用这个plugin。
如果你想在显示键盘的时候隐藏某个元素，可以使用‘hide-on-keyboard-open’ 类

1
2
3
 
<div class="hide-on-keyboard-open">
  <div id="google-map"></div>
</div>

keyboard-attach

keyboard-attach是一个属性指令，它会使某个元素浮动显示在弹出的键盘之上，目前只支持ion-footer-bar指令。

Lists

ion-list ,委托控制类$ionicListDelegate。
list是最广泛使用的一个控件，从最简单的只包含文本的list，到很复杂包含按钮，图片的list，几乎所有移动app应用都会用到。

list和list中的item都可以是任何html元素，对于container元素需要使用list样式类，每条item需要应用item样式类。

然而使用ionList 和ionItem 指令 可以很容易的支持各种交互类型，比如通过点击来编辑，拖拽来重新排序和删除item项。

相关的组件：ionItem, ionOptionButton ionReorderButton, ionDeleteButton, list CSS documentation.
用法：
基本用法：

1
2
3
4
5
 
<ion-list>
  <ion-item ng-repeat="item in items">
    Hello, !
  </ion-item>
</ion-list>

 

高级用法，包括缩略图，删除按钮，重排序，划屏。

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
 
<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="">
    <h2></h2>
    <p></p>
    <ion-option-button class="button-positive"
                       ng-click="share(item)">
      Share
    </ion-option-button>
    <ion-option-button class="button-info"
                       ng-click="edit(item)">
      Edit
    </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说明：

1
2
3
4
5
 
属性：delegate-handle（可选），类型：string,说明：针对这个list的handle方法，可以使用$ionicListDelegate 操作。
属性：type(可选)，类型：string, 说明：list的类型，list-set或 card
属性：show-delete(可选)，类型：boolean，是否在items中显示删除按钮
属性: show-reorder(可选)，类型：boolean，是否在items中显示重排序按钮
属性：can-swipe(可选)，类型：boolean，是否在items中通过swipe显示options按钮，默认是true

loading

$ionicLoading , 当用户不能交互时的弹出层，用于表示应用正在运行。
用法：

1
2
3
4
5
6
7
8
9
10
11
 
angular.module('LoadingApp', ['ionic'])
.controller('LoadingCtrl', function($scope, $ionicLoading) {
  $scope.show = function() {
    $ionicLoading.show({
      template: 'Loading...'
    });
  };
  $scope.hide = function(){
    $ionicLoading.hide();
  };
});

API方法：
show(options), 显示loading加载层。如果loading已经显示了，则会应用options的值，并保持显示。

1
2
3
4
5
6
 
options，类型：object，可用的值如下：
--{string=}，template 显示的html内容
--{string=}，加载的html的url
--{boolean=}，noBackDrop，是否显示后台页面，默认是显示
--{number=},delay,延时多长时间再显示这个loading,默认无延迟
--{number=}，duration，显示多长时间后隐藏loading层，默认一直显示，直到调用hide方法

 

hide方法：hide(),隐藏显示的loading层

Modal
$ionicModal,参看下面的ionicModal controller.
modal就是一个暂时浮现在view视图最上方的内容面板，经常用作选择或者编辑某个项目，把内容放在元素中即可。
注意：model会从它自身的scope中广播’modal.shown’, ‘modal.hidden’, 和’modal.removed’事件，把这个作为传递事件参数的一部分。移除model时会调用modal.removed 和 modal.hidden 这两个事件。
下面的例子假设你的modal在index首页或某个模板中，如果不是的话，你可以去掉script标签，通过文件名调用。

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
 
<script id="my-modal.html" type="text/ng-template">
  <ion-modal-view>
    <ion-header-bar>
      <h1 class="title">My Modal title</h1>
    </ion-header-bar>
    <ion-content>
      Hello!
    </ion-content>
  </ion-modal-view>
</script>

angular.module('testApp', ['ionic'])
.controller('MyController', function($scope, $ionicModal) {
  $ionicModal.fromTemplateUrl('my-modal.html', {
    scope: $scope,
    animation: 'slide-in-up'
  }).then(function(modal) {
    $scope.modal = modal;
  });
  $scope.openModal = function() {
    $scope.modal.show();
  };
  $scope.closeModal = function() {
    $scope.modal.hide();
  };
  //Cleanup the modal when we're done with it!
  $scope.$on('$destroy', function() {
    $scope.modal.remove();
  });
  // Execute action on hide modal
  $scope.$on('modal.hidden', function() {
    // Execute action
  });
  // Execute action on remove modal
  $scope.$on('modal.removed', function() {
    // Execute action
  });
});

API方法参数：

1
2
3
4
5
6
7
 
fromTemplate(templateString, options)，返回 ionicModal的控制器实例
----templateString, 类型string，modal中显示的内容。
----options，类型object，传递给 ionicModal#initialize  初始化方法的参数
-------------------------------------------
fromTemplateUrl(templateUrl, options)，返回 ionicModal的控制器实例中用到的promise对象
----templateString, 类型string，modal中显示的内容url。
----options，类型object，传递给 ionicModal#initialize  初始化方法的参数

ionicModal

由$ionicModal 服务调用，当你不需要modal的时候，要及时调用remove()方法以避免发生内存泄漏。
注意：model会从它自身的scope中广播’modal.shown’, ‘modal.hidden’, 和’modal.removed’事件，把这个作为传递事件参数的一部分。移除model时会调用modal.removed 和 modal.hidden 这两个事件。

方法：

1
2
3
4
5
6
7
8
9
10
11
 
initialize(options), 创建一个新的modal控制器实例
----options，类型object，可选值：
-------------{object=} 父scope，默认在$rootScope下创建独立的scope
-------------{string=} 显示或隐藏的动画效果. 默认是'slide-in-up'
-------------{boolean=} 是否让modal的第一个输入获得焦点，默认是false.
-------------{boolean=} 点击背景的是否自动关闭modal，默认是 true
-------------{boolean=} 是否可以使用手机的硬件返回按钮关闭modal，默认: true.
show()，显示modal，返回modal显示后的promise对象
hide(), 隐藏modal，返回modal隐藏后的promise对象
remove()，从dom中移除modal实例，并clean，返回modal移除后的promise对象
isShown(), 返回boolean，表示当前modal是否显示

 

posted on 2015-09-29 19:59  AmeliaLi  阅读(1542)  评论(0)  编辑  收藏  举报
Copyright © 2024 AmeliaLi
Powered by .NET 8.0 on Kubernetes Powered by: 博客园