Ionic学习总结

一、Ionic概念
ionic 主要关注外观和体验，以及和你的应用程序的 UI 交互，特别适合用于基于 Hybird 模式的 HTML5 移动应用程序开发。
Hybird：混合模式移动应用。
Ionic主要分为Ionic CSS 和Ionic JavaScript，

二、Ionic安装
可查看右边的网址安装：http://www.runoob.com/ionic/ionic-install.html

三、IonicCSS

常用标签

ion-side-menus 侧栏菜单组

ion-side-menu-content 侧栏菜单内容

ion-nav-view 导航视图

ion-side-menu 侧栏菜单

ion-footer-bar 底部

ion-header-bar 头部

ion-content 文本

ion-view 视图

ion-option-button select选项

ion-tabs tab组合

ion-tab tab栏

ion-delete-button 删除按钮

ion-reorder-button 记录按钮

ion-list 列表

ion-item 列表项

button 按钮

ion-pane 面板

ion-spinner 加载动画

ion-toggle 开关切换

ion-slide-box 侧边框

ion-checkbox 复选框

ion-radio 单选框

ion-refresher 刷新

ion-side-menus ：是一个带有边栏菜单的容器，可以通过点击按钮或者滑动屏幕来展开菜单。
- 属性enable-menu-with-back-views，布尔值，在返回按钮显示时，确认是否启用侧边栏菜单。
- 属性delegate-handle，字符串，该句柄用于标识带有$ionicScrollDelegate的滚动视图。
ion-side-menu-content：展示主要内容的容器，可以通过滑动屏幕来展开menu。
- 属性drag-content，布尔值，内容是否可被拖动，默认为true。
ion-nav-view：导航。
ion-side-menu：存放侧边栏的容器。
- 侧栏菜单的容器，同级的一个ion-side-menu-content 指令。
- 属性side，字符串，侧栏菜单当前在哪一边。可选的值有: ‘left’ 或 ‘right’。
- 属性is-enabled，布尔值，该侧栏菜单是否可用。
- 属性width，数值，侧栏菜单应该有多少像素的宽度。默认为275。
- 通用属性menu-toggle，在一个指定的侧栏中切换菜单。
- 通用属性menu-close，关闭当前打开的侧栏菜单。
ion-footer-bar：屏幕的底部。
ion-header-bar：菜单栏头部。
- bar-light 样式白色
- bar-stable 白框
- bar-positive 蓝色
- bar-calm 淡蓝色
- bar-balanced 绿色
- bar-energized 黄色
- bar-assertive 红色
- bar-royal 淡紫色
- bar-dark 黑色
- bar-subheader 副标题
- bar-footer 底部
- pull-right 居右
- 属性 align-title=”left/right/center”，对齐title
- 属性 no-tap-scroll，默认情况下，头部标题栏在点击屏幕时内容会滚动到头部，可以将 no-tap-scroll 设置为 true 来禁止该动作。它的值是布尔值（true/false）。
  示例：

<div class="bar bar-footer bar-calm">
  <button class="button button-clear pull-right">Left</button>
  <div class="title">Title</div>
  <button class="button button-clear">Right</button>
</div>

ion-content：内容。
ion-view 视图，属于ionNavView。一个内容的容器，用于展示视图或导航栏信息。
- 通过cache-view=”false” 属性禁用缓存。
ion-option-button
ion-tabs 是有一组页面选项卡组成的选项卡栏。可以通过点击选项来切换页面。
- 属性delegate-handle，字符串，该句柄用$ionicTabsDelegate来标识这些选项卡。
ion-tab 隶属于ionTabs，包含一个选项卡内容。该内容仅存在于被选中的给定选项卡中。
- 样式tabs-icon-top tabs-positive
  示例：

<ion-tab
  title="Tab!" //字符串，该选项卡的标题。
  icon="my-icon"  //字符串，选项卡的图标。如果给定值，它将成为ion-on和ion-off的默认值。
  ion-on="" //字符串，被选中标签的图标。
  ion-off=""  //字符串，没被选中标签的图标。
  badge=""  //表达式，选项卡上的徽章（通常是一个数字）。
  ng-click=""  //表达式，通常，点击时选项卡会被选中。如果设置了 ng-Click，它将不会被选中。 你可以用$ionicTabsDelegate.select()来指定切换标签。
  badge-style=""  //表达式，选项卡上微章的样式（例，tabs-positive ）。
  href="#/tab/tab-link" //字符串，但触碰的时候，该选项卡将会跳转的的链接。
  on-select="onTabSelected()" //表达式，选项卡被选中时触发。
  on-deselect="onTabDeselected()">//表达式，选项卡取消选中时触发。
</ion-tab>

ion-delete-button
ion-reorder-button
ion-list：列表。
- 样式
- list list-insert，内嵌列表，列表不会显示完整的宽度。
- item，标签。
- item-input，文本框，input-label。
- item-select,
- item-stacked-label，堆叠标签
- item-floating-label，浮动标签
- item-input-inset，内嵌输入域
- item-toggle，切换开关，类似 HTML 的 checkbox 标签，但它更易于在移动设备上使用。
- item-checkbox，复选框。
- item-radio，单选框。
- item range range-calm，滑块，左右两边一个图标，用标签<i></i> 表示
- 属性 show-delete，列表项的删除按钮当前是显示还是隐藏。
- 属性 delegate-handle="字符串" 该句柄定义带有$ionicListDelegate的列表。
- 属性 show-reorder，列表项的排序按钮当前是显示还是隐藏。
- 属性 can-swipe，列表项是否被允许滑动显示选项按钮。默认：true。
  示例：

<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>菜鸟教程(runoob.com)</title>
        <link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script>
    </head>
    <body>

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

//滑块示例
          <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>

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

ion-item：列表项
- 样式
- item-divider，分隔符
- item-icon-left , 设置图标在左侧， item-icon-right，设置图标在右侧。如果你需要在两边都有图标，则两个类都添加上即可。
- item-button-right， item-button-left 按钮列表
- item-avatar，带圆形头像列表
- item-thumbnail-left，带方形缩略图列表
- item
示例：

<ion-side-menus>

<!-- 中心内容 -->
<ion-side-menu-content>
  <ion-header-bar class="bar-dark">
    <button class="button button-icon" ng-click="toggleProjects()">
      <i class="icon ion-navicon"></i>
    </button>
    <h1 class="title">{{activeProject.title}}</h1>
    <!-- 新增按钮 -->
    <button class="button button-icon" ng-click="newTask()">
      <i class="icon ion-compose"></i>
    </button>
  </ion-header-bar>
  <ion-content scroll="false">
    <ion-list>
      <ion-item ng-repeat="task in activeProject.tasks">
        {{task.title}}
      </ion-item>
    </ion-list>
  </ion-content>
</ion-side-menu-content>

<!-- 左边栏 -->
<ion-side-menu side="left">
<ion-header-bar class="bar-dark">
  <h1 class="title">Projects</h1>
  <button class="button button-icon ion-plus" ng-click="newProject()">
  </button>
</ion-header-bar>
<ion-content scroll="false">
  <ion-list>
    <ion-item ng-repeat="project in projects" ng-click="selectProject(project, $index)" ng-class="{active: activeProject == project}">
      {{project.title}}
    </ion-item>
  </ion-list>
</ion-content>
</ion-side-menu>

</ion-side-menus>

//样式示例
<div class="list">
    <a class="item item-thumbnail-left" href="#">
      <img src="cover.jpg">
      <h2>Pretty Hate Machine</h2>
      <p>Nine Inch Nails</p>
    </a>
    ...

</div>

button 按钮
- 按钮默认显示样式：display:inline-block
- 显示样式：display: block，完全填充父元素的宽度，包含了内边距属性padding。
- 颜色同bar，button-light，button-stable，button-positive，button-calm，button-balanced，button-energized，button-assertive，button-royal，button-dark
- button-full，让按钮显示完全宽度，且不包含内边距padding。
- button-large ，button-small ，设置按钮大小
- button-outline，设置背景透明
- button-clear，无背景与边框按钮
- 按钮图标，icon, icon-left, icon-right, ion-home, ion-star, ion-chevron-right, ion-chevron-left, ion-gear-a, ion-navicon
  示例：

<div class="bar bar-header">
  <button class="button button-icon icon ion-navicon"></button>
  <div class="h1 title">Header Buttons</div>
  <button class="button button-clear button-positive">Edit</button>
</div>

ionic tab 选项卡（没有标签，仅为样式显示）
- tabs tabs-icon-only/tabs-icon-left
- tab-item
  示例：

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

ionic Grid 网格，采用了弹性盒子模型(Flexible Box Model)（没有标签，仅为样式显示）。
- 样式
- row
- col
- col-50 指定列宽 50%，col-20 指定列宽 20%
- col-offset-33 ，左偏移
- col-top，col-center,col-bottom，列纵向对齐网络
- row-top,row-center,row-bottom，行纵向对齐网络
- row responsive-sm/responsive-md/responsive-lg，sm：小于手机横屏，md：小于平板竖屏，lg：小于平板横屏
ion-pane ，面板
ion-spinner ，提供了许多种旋转加载的动画图标。当你的界面加载时，你就可以呈现给用户相应的加载图标。该图标采用的是SVG。
示例：
<ion-spinner class="spinner-energized"></ion-spinner>
<ion-spinner icon="dots" class="spinner-dark"></ion-spinner>
ion-toggle 切换开关操作
ion-slide-box 滑动框是一个包含多页容器的组件，每页滑动或拖动切换。
- 属性delegate-handle，字符串，该句柄用$ionicSlideBoxDelegate来标识这个滑动框。
- 属性does-continue，布尔值，滑动框是否开启循环滚动。
- 属性auto-play，布尔值，设置滑动框是否循环播放，如果 does-continue 为 true，默认也为 true。
- 属性slide-interval，数字，等待多少毫秒开始滑动（如果继续则为true）。默认为4000。
- 属性show-pager，布尔值，滑动框的页面是否显示。
- 属性pager-click，表达式，当点击页面时，触发该表达式（如果shou-pager为true）。传递一个’索引’变量。
- 属性on-slide-changed，表达式，当滑动时，触发该表达式。传递一个’索引’变量。
- 属性active-slide，表达式，将模型绑定到当前滑动框。
ion-checkbox 复选框
ion-radio 单选框
示例：

//复选框
<ion-checkbox ng-model="isChecked">复选框标签</ion-checkbox>
//单选框
<ion-radio ng-repeat="item in clientSideList"
               ng-value="item.value"
               ng-model="data.clientSide">
      {{ item.text }}
    </ion-radio>

ion-refresher
示例：

 <ion-refresher pulling-text="下拉刷新" on-refresh="doRefresh()"></ion-refresher>

ionic icon 图标（没有标签，仅为样式显示）
- 样式
- icon ion-star
- Ionic icons 官网: http://ionicons.com/
- 国内图标样式 CDN 地址：https://cdn.bootcss.com/ionicons/2.0.1/css/ionicons.min.css。
  示例：

<i class="icon ion-star"></i>
<i class = "icon ion-happy-outline"></i>
<i class = "icon ion-ios-analytics"></i>
<i class = "icon ion-ios-eye"></i>

card 卡片
- box-shadow，阴影。
  示例：

<div class="list card">

  <div class="item item-avatar">
    <img src="mcfly.jpg">
    <h2>Marty McFly</h2>
    <p>November 05, 1955</p>
  </div>

  <div class="item item-body">
    <img class="full-image" src="delorean.jpg">
    <p>
      菜鸟教程 -- 学的不仅是技术，更是梦想！<br>
      菜鸟教程 -- 学的不仅是技术，更是梦想！<br>
      菜鸟教程 -- 学的不仅是技术，更是梦想！<br>
      菜鸟教程 -- 学的不仅是技术，更是梦想！
    </p>
    <p>
      <a href="#" class="subdued">1 喜欢</a>
      <a href="#" class="subdued">5 评论</a>
    </p>
  </div>

  <div class="item tabs tabs-secondary tabs-icon-left">
    <a class="tab-item" href="#">
      <i class="icon ion-thumbsup"></i>
      喜欢
    </a>
    <a class="tab-item" href="#">
      <i class="icon ion-chatbox"></i>
      评论
    </a>
    <a class="tab-item" href="#">
      <i class="icon ion-share"></i>
      分享
    </a>
  </div>

</div>

四、Ionic 常用AngularJS服务

$ionicModal可以遮住用户主界面的内容框

$ionicSideMenuDelegate，控制所有侧栏菜单

$ionicPlatform

$stateParams

$ionicActionSheet

$ionicTabsDelegate 授权控制ionTabs指令。用$getByHandle方法控制具体的ionTabs实例。

$urlRouterProvider url路由

$stateProvider 设置导航的状态

$ionicConfigProvider

$ionicLoading 加载交互效果

$ionicActionSheet 上拉菜单

$ionicBackdrop 背景层

$ionicGesture手势事件

$ionicModal 模态窗口

$ionicSideMenuDelegate，触发$ionicSideMenuDelegate服务，来控制所有侧栏菜单。用$getByHandle方法控制特定情况下的ionSideMenus。
- $ionicSideMenuDelegate.toggleLeft([isOpen]);isOpen:布尔值，是否打开或关闭菜单。默认：切换菜单。
- $ionicSideMenuDelegate.toggleRight([isOpen]);isOpen:布尔值，是否打开或关闭菜单。默认：切换菜单。
- $ionicSideMenuDelegate.getOpenRatio();获取打开菜单内容超出菜单宽度的比例。
- $ionicSideMenuDelegate.isOpen();判断左侧或右侧菜单是否已经打开。
- $ionicSideMenuDelegate.isOpenLeft();判断左侧菜单是否已经打开。
- $ionicSideMenuDelegate.isOpenRight();判断右侧菜单是否已经打开。
  $ionicSideMenuDelegate.canDragContent([canDrag]);canDrag:布尔值，设置是否可以拖动内容打开侧栏菜单。
- $ionicSideMenuDelegate.$getByHandle(handle);handle:字符串。
  示例：$ionicSideMenuDelegate.$getByHandle('my-handle').toggleLeft();
$ionicPlatform 服务
$stateParams
$ionicActionSheet 服务
$ionicTabsDelegate 授权控制ionTabs指令。用$getByHandle方法控制具体的ionTabs实例。
- $ionicTabsDelegate.select(index, [shouldChangeHistory]); index：数值，选择标签的索引；shouldChangeHistory：布尔值，此选项是否应该加载这个标签的浏览历史（如果存在），并使用，或仅加载默认页面。默认为false。提示：如果一个ion-nav-view在选项卡里，你可能需要设置它为true。
- $ionicTabsDelegate.selectedIndex();数值，被选中标签的索引，如-1.
- $ionicTabsDelegate.$getByHandle(handle); handle:字符串。$ionicTabsDelegate.$getByHandle('my-handle').select(0);
$urlRouterProvider url路由
示例：$urlRouterProvider.otherwise('/app/playlists');
$stateProvider 设置导航的状态
示例：

var app = angular.module('myApp', ['ionic']);
app.config(function($stateProvider) {
  $stateProvider
  .state('index', {
    url: '/',
    templateUrl: 'home.html'
  })
  .state('music', {
    url: '/music',
    templateUrl: 'music.html'
  });
});

$ionicConfigProvider
$ionicBackdrop 背景层
- $ionicBackdrop.retain()，显示背景层。
- $ionicBackdrop.release()，隐藏背景层。
$ionicGesture angular服务, 展示ionicionic.EventController手势。
- on(eventType, callback, $element)
  在一个元素上添加一个事件监听器。
  eventType：string类型，监听的手势事件；
  callback：function(e)类型，当手势事件发生时触发的事件。
  $element：element类型，angular元素监听的事件。
- off(eventType, callback, $element)
  参数含义同on(eventType, callback, $element) 。
$ionicActionSheet，上拉菜单
示例：

angular.module('starter', ['ionic'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

.controller( 'actionsheetCtl',['$scope','$ionicActionSheet','$timeout' ,function($scope,$ionicActionSheet,$timeout){
    $scope.show = function() {
        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);
    };  
}])

背景层（$ionicBackdrop）
- $ionicBackdrop.retain()，显示背景层。
- $ionicBackdrop.release()，隐藏背景层。
手势事件($ionicGesture)
- on-hold 长按的时间是500毫秒。示例：<button on-hold="onHold()" class="button" >Test <button>
- on-tab 手势轻击事件.
- on-double-tap 手双击屏幕事件
- on-touch 这个和 on-tap 还是有区别的，这个是立即执行，而且是用户点击立马执行。
- on-release 当用户结束触摸事件时触发。
- on-drag 这个有点类似于PC端的拖拽。当你一直点击某个物体，并且手开始移动，都会触发 on-drag。
- on-drag-up 向上拖拽, on-drag-right , on-drag-down, on-drag-left,
- on-swipe 手指滑动效果，可以是任何方向上的。而且也和 on-drag 类似，都有四个方向上单独的事件。
- on-swipe-up 向上的手指滑动效果。on-swipe-right, on-swipe-down, on-swipe-left
$ionicLoading 加载交互效果。
- 显示一个加载效果，show(opts); $ionicLoading.show();
- 隐藏一个加载效果，hide(); $ionicLoading.hide();
- $ionicLoadingConfig ，设置加载的默认项

<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>菜鸟教程(runoob.com)</title>

    <link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script>
    <script>
    var app = angular.module('ionicApp', ['ionic'])
    app.constant('$ionicLoadingConfig',{template:'默认加载模版......'});
    app.controller('AppCtrl', function($scope, $timeout, $ionicLoading) {

      // Setup the loader
      $ionicLoading.show({
        content: 'Loading',
        animation: 'fade-in',
        showBackdrop: true,
        maxWidth: 200,
        showDelay: 0,
        template:"",指示器的html内容。
        templateUrl:"",//一个加载html模板的url作为指示器的内容。
        noBackdrop:false;//是否隐藏背景。默认情况下它会显示。
        delay:2000,//指示器延迟多少毫秒显示。默认为不延迟。
        duration:3000 //等待多少毫秒后自动隐藏指示器。默认情况下，指示器会一直显示，直到触发.hide()。
      });
      //或者$ionicLoading.show();配置项在$ionicLoadingConfig设置
      // Set a timeout to clear loader, however you would actually call the $ionicLoading.hide(); method whenever everything is ready or loaded.
      $timeout(function () {
        $ionicLoading.hide();
        $scope.stooges = [{name: 'Moe'}, {name: 'Larry'}, {name: 'Curly'}];
      }, 2000);

    });
    </script>
  </head>
  <body ng-controller="AppCtrl">

      <ion-view title="Home">
        <ion-header-bar>
          <h1 class="title">The Stooges</h1>
        </ion-header-bar>
        <ion-content has-header="true">
          <ion-list>
            <ion-item ng-repeat="stooge in stooges" href="#">{{stooge.name}}</ion-item>
          </ion-list>
        </ion-content>
      </ion-view>

  </body>
</html>

$ionicModal 模态窗口。
示例：

<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>菜鸟教程(runoob.com)</title>
    <link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script>
    <style>
    body {
        cursor: url('http://ionicframework.com/img/finger.png'), auto;
    }
    </style>
    <script>
    var app=angular.module('ionicApp', ['ionic'])

    app.controller('AppCtrl', function($scope, $ionicModal) {

      $scope.contacts = [
        { name: 'Gordon Freeman' },
        { name: 'Barney Calhoun' },
        { name: 'Lamarr the Headcrab' },
      ];
      /*fromTemplate(templateString, options);
      fromTemplateUrl(templateUrl, options);
      templateString:"",模板的字符串作为模态窗口的内容。
      templateUrl:载入模板的url。
      options:options 会传递到 ionicModal#initialize方法中。
      */
      /*initialize(options),创建一个新的模态窗口控制器示例。
        options：{object=} 范围 子类的范围。默认：创建一个$rootScope子类。
                 {string=} 动画 带有显示或隐藏的动画。默认：'slide-in-up'
                 {boolean=} 第一个输入框获取焦点 当显示时，模态窗口的第一个输入元素是否自动获取焦点。默认：false。
                 {boolean=}backdropClickToClose` 点击背景时是否关闭模态窗口。默认：true。
      */
      $ionicModal.fromTemplateUrl('templates/modal.html', {
        scope: $scope
      }).then(function(modal) {
        $scope.modal = modal;
      });

      $scope.createContact = function(u) {        
        $scope.contacts.push({ name: u.firstName + ' ' + u.lastName });
        $scope.modal.hide();
        //$scope.modal.remove();
        //$scope.modal.isShown();
      };

    });
    </script>
  </head>
  <body ng-controller="AppCtrl">

    <ion-header-bar class="bar-positive">
      <h1 class="title">Contacts</h1>
      <div class="buttons">
        <button class="button button-icon ion-compose" ng-click="modal.show()">
        </button>
      </div>
    </ion-header-bar>
    <ion-content>
      <ion-list>
        <ion-item ng-repeat="contact in contacts">
          {{contact.name}}
        </ion-item>
      </ion-list>
    </ion-content>

    <script id="templates/modal.html" type="text/ng-template">
      <ion-modal-view>
        <ion-header-bar class="bar bar-header bar-positive">
          <h1 class="title">New Contact</h1>
          <button class="button button-clear button-primary" ng-click="modal.hide()">Cancel</button>
        </ion-header-bar>
        <ion-content class="padding">
          <div class="list">
            <label class="item item-input">
              <span class="input-label">First Name</span>
              <input ng-model="newUser.firstName" type="text">
            </label>
            <label class="item item-input">
              <span class="input-label">Last Name</span>
              <input ng-model="newUser.lastName" type="text">
            </label>
            <label class="item item-input">
              <span class="input-label">Email</span>
              <input ng-model="newUser.email" type="text">
            </label>
            <button class="button button-full button-positive" ng-click="createContact(newUser)">Create</button>
          </div>
        </ion-content>
      </ion-modal-view>
    </script>

  </body>
</html>

猜你喜欢