ionic学习&资料整理

ionic CSS

注意这部分都是CSS
1.ionic 头部与底部

class="bar bar-header bar-light"
class="bar bar-header bar-stable"
class="bar bar-header bar-positive"
class="bar bar-header bar-calm"
class="bar bar-header bar-balanced"
class="bar bar-header bar-energized"
class="bar bar-header bar-assertive"
class="bar bar-header bar-royal"
class="bar bar-header bar-dark"
class="bar bar-subheader"
class="bar bar-footer bar-balanced"

2.ionic按钮

class="button button-light/stable/positive/calm/balanced/energized/assertive/royal/dark"

class="button button-block button-positive" // button-block 100%W

class="button button-full button-positive" // 不想block那么圆润

class="button button-small/large button-assertive"

class="button button-outline button-positive" // 线框按钮

class="button button-clear button-positive" // 透明无边框按钮

<button class="button icon-left ion-home">Home</button> // 带图标按钮

class="button-bar" // 按钮栏
class="button-bar bar-positive"

3.ionic列表
ionList ionItem，主要就是外层list，内层item

class="item item-divider" // 分栏标题
// a 首先是一个item 左右icon位置说明 
<a class="item item-icon-left item-icon-right" href="#">
  <i class="icon ion-chatbubble-working"></i> // 左icon
  Call Ma
  <i class="icon ion-ios-telephone-outline"></i> // 右icon
</a>

// 头像
<a class="item item-avatar" href="#">
  <img src="http://www.runoob.com/try/demo_source/venkman.jpg">
  <h2>Venkman</h2>
  <p>Back off, man. I'm a scientist.</p>
</a>

// 缩略图
<a class="item item-thumbnail-left" href="#">
  <img src="http://www.runoob.com/try/demo_source/blue-album.jpg">
  <h2>Weezer</h2>
  <p>Blue Album</p>
</a>

<div class="list list-inset"> // 内嵌列表

4.ionic卡片
class=”card”
class=”list card”

5.ionic表单和输入框

<div class="list">
  <label class="item item-input">
    <span class="input-label">用户名：</span>
    <input type="text">
  </label>

// 两个摞起来
<label class="item item-input item-stacked-label">
  <span class="input-label">Last Name</span>
  <input type="text" placeholder="Suhr">
</label>

// 搜索条
<div class="bar bar-header item-input-inset">
  <label class="item-input-wrapper">
    <i class="icon ion-ios-search placeholder-icon"></i>
    <input type="search" placeholder="搜索">
  </label>
  <button class="button button-clear">
    取消
  </button>
</div>

6.ionic Toggle（切换开关）

// 不太懂 track 为什么有input？
 <li class="item item-toggle">
   HTML5
    <label class="toggle toggle-positive">
      <input type="checkbox" checked="">
      <div class="track">
        <div class="handle"></div>
      </div>
    </label>
 </li>

7.ionic checkbox（复选框）

<li class="item item-checkbox">
  <label class="checkbox">
     <input type="checkbox">
   </label>
   Flux Capacitor
</li>

8.ionic 单选框

<label class="item item-radio">
  <input type="radio" name="group" value="go" checked="checked">
  <div class="item-content">
    Go
  </div>
  <i class="radio-icon ion-checkmark"></i>
</label>

9.ionic Range

<div class="range">
  <i class="icon ion-volume-low"></i>
  <input type="range" name="volume">
  <i class="icon ion-volume-high"></i>
</div>

<div class="item range range-positive">
  <i class="icon ion-ios-sunny-outline"></i>
  <input type="range" name="volume" min="0" max="100" value="12">
  <i class="icon ion-ios-sunny"></i>
</div>

10.ionic select

<div class="item item-input item-select">
  <div class="input-label">
    Lightsaber
  </div>
  <select>
    <option>Blue</option>
    <option selected="">Green</option>
    <option>Red</option>
  </select>
</div>

11.ionic tab（选项卡）

<div class="tabs tabs-icon-top">
  <a class="tab-item" href="#">
    <i class="icon ion-home"></i>
    主页
  </a>
  <a class="tab-item" href="#">
    <i class="icon ion-star"></i>
    收藏
  </a>
  <a class="tab-item" href="#">
    <i class="icon ion-gear-a"></i>
    设置
  </a>
</div>

12.ionic 网格（Grid）

<div class="row">
  <div class="col col-75">
    <div>.col.col-75</div>
  </div>
  <div class="col">
    <div>.col</div>
  </div>
</div>

// 下面不太懂
响应式类 描述
.responsive-sm 小于手机横屏
.responsive-md 小于平板竖屏
.responsive-lg 小于平板横屏

13.ionic 颜色
dark/stable-dark/positive/calm/balanced/energized/assertive/royal

14.ionic icon（图标）
见本地下载项目

ionic JavaScript

1.ionic 上拉菜单（ActionSheet）
要点：页面正常触发方法，controller加载$ionicActionSheet，然后是固定写法：

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;
    }
});

$timeout(function() {
    hideSheet();
}, 2000);

2.ionic 背景层
要点：页面正常触发，controller加载$ionicBackdrop，然后固定写法如下：

$scope.action = function() {
  $ionicBackdrop.retain();
   $timeout(function() {    //默认让它1秒后消失
     $ionicBackdrop.release();
   }, 1000);
}; 

3.ionic 下拉刷新
要点：ion-content下写<ion-refresher pulling-text="下拉刷新" on-refresh="doRefresh()"></ion-refresher>，controller做常规http请求方法更新数据。

4.ionic复选框
就是页面组件

<ion-checkbox ng-model="isChecked">复选框标签</ion-checkbox>

5.ionic单选框操作
页面组件 里面应该有item类，外边是list

<ion-radio ng-repeat="item in clientSideList"
           ng-value="item.value"
           ng-model="data.clientSide">
  {{ item.text }}
</ion-radio>

6.ionic 切换开关操作
页面组件

<ion-toggle ng-repeat="item in settingsList"
            ng-model="item.checked" 
            ng-checked="item.checked">
  {{ item.text }}
</ion-toggle>

7.ionic手势事件
1.长按 on-hold
用法：button添加on-hold属性，赋值function。

2.单击 on-tap
用法：button添加on-tap属性，赋值function。

3.双击 on-double-tap
用法：button添加on-double-tap属性，赋值function。

4.触碰 on-touch
用法：button添加on-touch属性，赋值function。

5.抬手 on-release
用法：button添加on-release属性，赋值function。

6.拖拽 on-drag
用法：button添加on-drag属性，赋值function。

7.滑动 on-swipe on-swipe-up/right/down/left

8.ionicGestureon(eventType,callback,element)
off(eventType, callback, $element)
没看懂什么意思，不知道怎么用，也没搜到怎么用，碰到再说吧。

8.ionic头部和底部

<ion-header-bar>
</ion-header-bar>
<ion-content>
<ion-content>
<ion-footer-bar>
</ion-footer-bar>

9.ionic列表操作
页面组件，ionic定义的指令 ionList、ionItem

<ion-list>
  <ion-item ng-repeat="item in items">
    Hello, {{item}}!
  </ion-item>
</ion-list>

10.ionic加载动作 静默读黑条
用法：加载$ionicLoading, show方法，hide方法。

.controller('LoadingCtrl', function($scope, $ionicLoading) {
  $scope.show = function() {
    $ionicLoading.show({
      template: 'Loading...指示器的html内容'
    });
  };
  $scope.hide = function(){
    $ionicLoading.hide();
  };
});

11.ionic模态窗口
用法：先写好模态框，如下：

<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>

再controller注入$ionicModal, 建模，连接scope。

.controller('MyController', function($scope, $ionicModal) {
  $ionicModal.fromTemplateUrl('my-modal.html', {
    scope: $scope,
    animation: 'slide-in-up'
  }).then(function(modal) {
    $scope.modal = modal;
  });
});

最后主页面触发，buttton ng-click=”modal.show()” / ng-click=”modal.hide()”

12.ionic导航 ->重点查看
说的就是ionic自己的页面导航系统

<ion-nav-bar></ion-nav-bar>
<ion-nav-view class="slide-left-right">
  <ion-view title="我的页面">
    <ion-content>
      你好!
    </ion-content>
  </ion-view>
</ion-nav-view>

设置最大允许缓存的视图数量
全局禁用缓存

$ionicConfigProvider.views.maxCache(0);

ion-nav-view
ion-view
ion-nav-bar
ion-nav-buttons
ion-nav-back-button
nav-clear
nav-transition
nav-direction
$ionicNavBarDelegate$ionicHistory

13.ionic平台 还是不太懂
$ionicPlatform$ionicPlatform 用来检测当前的平台，以及诸如在PhoneGap/Cordova中覆盖Android后退按钮。

onHardwareBackButton(callback)

14.ionic浮动框
用法：跟模态窗口类型

<button ng-click="openPopover($event)">打开浮动框</button>

<script id="my-popover.html" type="text/ng-template">
<ion-popover-view>
  <ion-header-bar>
    <h1 class="title">我的浮动框标题</h1>
  </ion-header-bar>
  <ion-content>
    Hello!
  </ion-content>
</ion-popover-view>
</script> 

.controller( 'AppCtrl',['$scope','$ionicPopover',...
// .fromTemplateUrl() 方法
  $ionicPopover.fromTemplateUrl('my-popover.html', {
    scope: $scope
  }).then(function(popover) {
    $scope.popover = popover;
  });

15.ionic对话框
用法：也是一样，页面btn触发，js代码格式如下：
注入$ionicPopup

 .controller('PopupCtrl',function($scope, $ionicPopup, $timeout) {

         // Triggered on a button click, or some other target
         $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);
          };
           //  confirm 对话框
           $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');
               }
             });
           };

           //  alert（警告） 对话框
           $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');
             });
           };
        });

16.ionic滚动条
页面组件

<ion-scroll zooming="true" direction="xy" style="width: 500px; height: 500px">
</ion-scroll>

上拉加载

<ion-infinite-scroll
  on-infinite="loadMore()"
  distance="1%">
</ion-infinite-scroll>

$ionicScrollDelegate
该方法直接被$ionicScrollDelegate服务触发，来控制所有滚动视图。用 $getByHandle方法控制特定的滚动视图。

$scope.scrollTop = function() {
  $ionicScrollDelegate.scrollTop();
};

resize()

scrollBottom([shouldAnimate])

17.ionic侧栏菜单
用法：配置路由， 搭建menu框架，主要就是页面组件。

<ion-side-menus>

  <!-- 菜单统领的程序主界面 -->
  <ion-side-menu-content>

    <!-- 注释掉 菜单按钮将无效 -->
    <ion-nav-bar class="bar-stable nav-title-slide-ios7">
    </ion-nav-bar>

    <!-- 这里是主界面入口 -->
    <ion-nav-view name="menuContent" animation="slide-right-left"></ion-nav-view>

  </ion-side-menu-content>

  <!-- 下面是菜单内容 -->
  <ion-side-menu side="right">

    <!-- 菜单标题 -->
    <header class="bar bar-header bar-stable">
      <h1 class="title">明星台菜单</h1>
    </header>

    <!-- 菜单项目 -->
    <ion-content class="has-header">    
      <ion-list>
        <ion-item nav-clear menu-close href="#">
          我的账户
        </ion-item>
        <ion-item nav-clear menu-close href="#">
          余额宝
        </ion-item>
        <ion-item nav-clear menu-close href="#">
          联系我们
        </ion-item>
      </ion-list>
    </ion-content>

  </ion-side-menu>

</ion-side-menus>

18.ionic滑动框
页面组件

<ion-slide-box 
    active-slide="myActiveSlide" 
    does-continue="true"  
    auto-play="true"
    slide-interval="2000"
    show-pager="true">
    <!-- does-continue:循环滚动开关
         auto-play:自动滚动开关
         slide-interval:多少毫秒滚动一次
         show-pager:分页显示开关 -->

      <ion-slide>
      <!-- <div class="box blue"><h1>BLUE</h1></div> -->
      <img ng-src="img/Sufei.png" alt="" width="100%" height="200">
      </ion-slide>

      <ion-slide>
      <!-- <div class="box yellow"><h1>YELLOW</h1></div> -->
      <img ng-src="img/Scarlett.png" alt="" width="100%" height="200">
      </ion-slide>

      <ion-slide>
        <!-- <div class="box pink"><h1>PINK</h1></div> -->
        <img ng-src="img/TaylorSwift.png" alt="" width="100%" height="200">
      </ion-slide>
    </ion-slide-box>

19.ionic加载动画
页面组件

<div align="center">
    <ion-spinner icon="android"></ion-spinner>
    <ion-spinner icon="ios"></ion-spinner>
    <ion-spinner icon="ios-small"></ion-spinner>
    <ion-spinner icon="bubbles" class="spinner-balanced"></ion-spinner>
    <ion-spinner icon="circles" class="spinner-energized"></ion-spinner>
    <br>
    <ion-spinner icon="crescent" class="spinner-royal"></ion-spinner>
    <ion-spinner icon="dots" class="spinner-dark"></ion-spinner>
    <ion-spinner icon="lines" class="spinner-calm"></ion-spinner>
    <ion-spinner icon="ripple" class="spinner-assertive"></ion-spinner>
    <ion-spinner icon="spiral"></ion-spinner>
</div>

20.ionic选项卡栏操作
页面组件

<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>

The End