腊月的季节

ionic总结一

发表于 | 分类于 ， | | 阅读次数

ion-nav-view加载

ion-nav-view标签可以用来导航页面，并可以制作导航时候的页面动画，建议页面过渡的动作：’slide-left-right’,’slide-left-right-ios7’,’slide-in-up’。

1
2
<ion-nav-view animation="slide-left-right">
</ion-nav-view>

利用$stateProvider进行渲染

1
2
3
4
5
6
7
8
9
10
11
12
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，检查它的索引匹配状态，然后把home.html加载到内，页面由指定的URL加载。

ion-header-bar添加一个header栏

1
2
3
4
5
6
7
8
9
10
11
12
<ion-header-bar align-title="left" class="bar-positive">
  <div class="buttons">
    <button class="button" ng-click="doSomething()">左侧按钮</button>
  </div>
  <h1 class="title">Title!</h1>
  <div class="buttons">
    <button class="button">右侧按钮</button>
  </div>
</ion-header-bar>
<ion-content>
  一些内容!
</ion-content>

align-title属性：标题对齐的位置，值可为”left”,”right”,或者”center”.默认为”center”。

ion-footbar-bar添加页脚

1
2
3
4
5
6
7
8
9
10
11
12
<ion-content>
  一些内容!
</ion-content>
<ion-footer-bar align-title="left" class="bar-assertive">
  <div class="buttons">
    <button class="button">左侧按钮</button>
  </div>
  <h1 class="title">Title!</h1>
  <div class="buttons" ng-click="doSomething()">
    <button class="button">右侧按钮</button>
  </div>
</ion-footer-bar>

align-title同上

选项卡

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="首页" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline">
    <!-- 标签 1 内容 -->
  </ion-tab>

  <ion-tab title="关于" icon-on="ion-ios7-clock" icon-off="ion-ios7-clock-outline">
    <!-- 标签 2 内容 -->
  </ion-tab>

  <ion-tab title="设置" icon-on="ion-ios7-gear" icon-off="ion-ios7-gear-outline">
    <!-- 标签 3 内容 -->
  </ion-tab>

</ion-tabs>

侧栏菜单

1
2
3
4
5
6
7
8
9
10
11
12
13
<ion-side-menus>
  <!-- 中间内容 -->
  <ion-side-menu-content ng-controller="ContentController">
  </ion-side-menu-content>

  <!-- 左侧菜单 -->
  <ion-side-menu side="left">
  </ion-side-menu>

  <!-- 右侧菜单 -->
  <ion-side-menu side="right">
  </ion-side-menu>
</ion-side-menus>
1
2
3
4
5
function ContentController($scope, $ionicSideMenuDelegate) {
  $scope.toggleLeft = function() {
    $ionicSideMenuDelegate.toggleLeft();
  };
}

delegate-handle属性，该句柄用来标识带有$ionicSideMenuDelegate的侧栏菜单
侧栏菜单分三部分中间内容，左侧栏，右侧栏，控制侧栏出现和隐藏应该在中间内容中。外面被包裹。中间内容由包裹，侧栏由包裹，side属性控制左右。$ionicSideMenuDelegate.toggleLeft()服务控制侧栏显示隐藏。menu-toggle属性打开指定侧栏菜单,menu-close属性关闭当前打开的侧栏菜单。

弹出窗口

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
angular.module('mySuperApp', ['ionic'])
.controller(function($scope, $ionicPopup, $timeout) {

 // 触发一个按钮点击，或一些其他目标
 $scope.showPopup = function() {
   $scope.data = {}

   // 一个精心制作的自定义弹窗
   var myPopup = $ionicPopup.show({
     template: '<input type="password" ng-model="data.wifi">',
     title: 'Enter Wi-Fi Password',
     subTitle: 'Please use normal things',
     scope: $scope,
     buttons: [
       { text: 'Cancel' },
       {
         text: '<b>Save</b>',
         type: 'button-positive',
         onTap: function(e) {
           if (!$scope.data.wifi) {
             //不允许用户关闭，除非他键入wifi密码
             e.preventDefault();
           } else {
             return $scope.data.wifi;
           }
         }
       },
     ]
   });
   myPopup.then(function(res) {
     console.log('Tapped!', res);
   });
   $timeout(function() {
      myPopup.close(); //由于某种原因3秒后关闭弹出
   }, 3000);

   // 一个确认对话框
   $scope.showConfirm = function() {
     var confirmPopup = $ionicPopup.confirm({
       title: 'Consume Ice Cream',
       template: 'Are you sure you want to eat this ice cream?'
     });
     confirmPopup.then(function(res) {
       if(res) {
         console.log('You are sure');
       } else {
         console.log('You are not sure');
       }
     });
   };

   // 一个提示对话框
   $scope.showAlert = function() {
     var alertPopup = $ionicPopup.alert({
       title: 'Don\'t eat that!',
       template: 'It might taste good'
     });
     alertPopup.then(function(res) {
       console.log('Thank you for not eating my delicious ice cream cone');
     });
   };
 };
});

show(可选)
显示一个复杂的对话框。
一个带有按钮组的复杂弹窗，每个按钮带有一个文本 和 类型字段，此外还有一个 onTap功能。当点击弹窗上的相关按钮，会触发onTap函数，默认会关闭弹窗，处理弹窗的返回值。如果你想阻止默认动作，点击按钮保持打开弹窗，当点击一个事件时，触发event.preventDefault()。
详见如下表格。

参数 类型 详情
options object 新弹窗的选项的表现形式见下 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
  title: '', // String. 弹窗的标题。
  subTitle: '', // String (可选)。弹窗的子标题。
  template: '', // String (可选)。放在弹窗body内的html模板。
  templateUrl: '', // String (可选)。在弹窗body内的html模板的URL。
  scope: null, // Scope (可选)。一个链接到弹窗内容的scope（作用域）。
  buttons: [{ //Array[Object] (可选)。放在弹窗footer内的按钮。
    text: 'Cancel',
    type: 'button-default',
    onTap: function(e) {
      // 当点击时，e.preventDefault() 会阻止弹窗关闭。
      e.preventDefault();
    }
  }, {
    text: 'OK',
    type: 'button-positive',
    onTap: function(e) {
      // 返回的值会导致处理给定的值。
      return scope.data.response;
    }
  }]
}

返回: object 当关闭弹窗时，处理一个promise。有一个附加的关闭函数，用于利用程序关闭弹窗。
alert(可选)
显示一个带有一段信息和一个用户可以点击关闭弹窗的按钮的简单提示弹窗。

参数 类型 详情
options object 显示提示的选项形式见下 
1
2
3
4
5
6
7
8
{
  title: '', // String. 弹窗的标题。
  subTitle: '', // String (可选)。弹窗的子标题。
  template: '', // String (可选)。放在弹窗body内的html模板。
  templateUrl: '', // String (可选)。 放在弹窗body内的html模板的URL。
  okText: '', // String (默认: 'OK')。OK按钮的文字。
  okType: '', // String (默认: 'button-positive')。OK按钮的类型。
}

返回: object 当弹窗关闭时，处理的一个 promise。有一个额外的关闭函数，可以被带有任何给定的值的关闭程序调用。
confirm(可选)
显示一个简单的带有一个取消和OK按钮的对话框弹窗。

如果用户点击OK按钮，就设置promise为true，如果用户点击取消按钮则为false。

参数 类型 详情
options object 显示对话框弹窗选项见下 
1
2
3
4
5
6
7
8
9
10
{
  title: '', // String. 弹窗标题。
  subTitle: '', // String (可选)。弹窗的副标题。
  template: '', // String (可选)。放在弹窗body内的html模板。
  templateUrl: '', // String (可选)。放在弹窗body内的一个html模板的URL。
  cancelText: '', // String (默认: 'Cancel')。一个取消按钮的文字。
  cancelType: '', // String (默认: 'button-default')。取消按钮的类型。
  okText: '', // String (默认: 'OK')。OK按钮的文字。
  okType: '', // String (默认: 'button-positive')。OK按钮的类型。
}

返回: object 当关闭对话框时，处理的一个promise。当弹窗关闭时，处理的一个 promise。有一个额外的关闭函数，可以被带有任何给定的值的关闭程序调用。
prompt(可选)
显示一个简单的提示弹窗，带有一个input， OK 按钮，和取消按钮。如果用户点击OK，就设置promise的值，如果用户点击取消，则值为未定义。

1
2
3
4
5
6
7
8
$ionicPopup.prompt({
   title: 'Password Check',
   template: 'Enter your secret password',
   inputType: 'password',
   inputPlaceholder: 'Your password'
 }).then(function(res) {
   console.log('Your password is', res);
 });

参数 类型 详情
options object 显示对话框弹窗选项见下 
1
2
3
4
5
6
7
8
9
10
11
12
{
  title: '', // String. 弹窗的标题。
  subTitle: '', // String (可选)。弹窗的副标题。
  template: '', // String (可选)。放在弹窗body内的html模板。
  templateUrl: '', // String (可选)。放在弹窗body内的html模板的URL。
  inputType: // String (默认: 'text')。input的类型。
  inputPlaceholder: // String (默认: '')。input的 placeholder。
  cancelText: // String (默认: 'Cancel')。取消按钮的文字。
  cancelType: // String (默认: 'button-default')。取消按钮的类型。
  okText: // String (默认: 'OK')。OK按钮的文字。
  okType: // String (默认: 'button-positive')。OK按钮的类型。
}

返回: object 当关闭对话框时，处理的一个promise。当弹窗关闭时，处理的一个 promise。有一个额外的关闭函数，可以被带有任何给定的值的关闭程序调用。

平台$ionicPlatform

一个angular抽象的ionic.Platform。

用来检测当前的平台，以及诸如在PhoneGap/Cordova中覆盖Android后退按钮。
方法
onHardwareBackButton(callback)
一些平台有硬件的后退按钮，因此可以用这种方法绑定到它。

参数 类型 详情
callback function 当该事件发生时，触发回调函数。

offHardwareBackButton(callback)
移除一个后退按钮的监听事件。

参数 类型 详情
callback function 最初绑定的监视器函数。

registerBackButtonAction(callback, priority, [actionId])
注册一个硬件后退按钮动作。当点击按钮时，只有一个动作会执行，因此该方法决定了注册的后退按钮动作具有最高的优先级。

例如，如果一个动作表已经显示，后退按钮应该关闭这个动作表，但是它不应该还能返回一个页面视图或关闭一个打开的模型。

参数 类型 详情
callback function 当点击返回按钮时触发，如果该监视器具有最高的优先级。
priority number 仅最高优先级的会执行。
actionId(可选) * 该id指定这个动作。默认：一个随机且唯一的id。

返回: function 一个被触发的函数，将会注销该后退按钮动作。
ready([callback])
一旦设备就绪，则触发一个回调函数，或如果该设备已经就绪，则立即调用。

参数 类型 详情
callback function= 触发的函数。

返回: promise 当设备就绪后，就会解决一个 promise。

ionic.Platform工具

方法
ready(callback)
设备就绪后触发一个回调函数，或如果设备已经就绪理解触发。该方法可以随处运行而无需通过任何附加方法封装。当一个app包含一个web视图（Cordova），当设备就绪后它将会触发回调函数。如果该app包含一个web浏览器，它会在window.load之后触发回调。

参数 类型 详情
callback function 调用的函数

device()
返回当前设备（通过cordova提供）。

返回: 对象设备对象。
isWebView()
返回: boolean验证我们是否附带web视图运行（比如Cordova）。
isIPad()
返回: boolean 是否在iPad上运行。
isIOS()
返回: boolean 是否在iOS上运行。
isAndroid()
返回: boolean 是否在Android上运行。
isWindowsPhone()
返回: boolean 是否在Windows手机上运行。
platform()
返回: string 当前平台的名字。
version()
返回: string 当前设备平台的版本。
exitApp()
退出app。
showStatusBar(shouldShow)
显示或隐藏设备状态栏（用Cordova）。
fullScreen([showFullScreen], [showStatusBar])
设置app是否全屏（用Cordova）。

参数 类型 详情
showFullScreen(可选) boolean 是否设置app全屏。默认为true。
showStatusBar(可选) boolean 是否显示设备状态栏。默认为false。

属性
boolean isReady
设备是否就绪。
boolean isFullScreen
设备是否全屏。
Array(string) platforms
一个所有平台的数组。
string grade
当前平台是什么级别的。

热评文章