logo
搜索
我的图书馆

发文章

发文工具

其他工具

留言交流
搜索
分享

Ionic基础

 我的前端图书馆 2017-04-20

一.选项卡 : ion-tabs简单介绍

使用ion-tabs指令声明选项卡，使用ion-tab声明选项页： 

  1. <ion-tabs>   
  2. <ion-tab title="xxx">...</ion-tab>   
  3. <ion-tab title=" xxx ">...</ion-tab>   
  4. ...   
  5. </ion-tabs>  

每个ion-tab元素的title属性值将作为选项页的标题其 内容将填充选项卡书签栏之外的剩余区域（被应用.pane样式）。 注意： 1. 不要把ion-tabs指令放在ion-content之内 2. ion-tab的内容应当放入ion-view指令内，否则ionic在计算布局时可能出错 AngularJS编译后，ion-tabs元素将被应用.tabs样式，因此我们可以使用 相关的样式调整ion-tabs的外观：


  1. <!DOCTYPE html>  
  2. <html ng-app="ionic">  
  3. <head>  
  4.     <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">  
  5.     <script src="../../lib/js/ionic.bundle.min.js"></script>  
  6.     <link rel="stylesheet" type="text/css" href="../../lib/css/ionic.min.css">  
  7. </head>  
  8. <body>  
  9.     <ion-header-bar class="bar-positive">  
  10.         <h1 class="title">ion-tabs简介</h1>  
  11.     </ion-header-bar>  
  12.     <ion-tabs class="tabs-positive tabs-icon-only">  
  13.   
  14.         <ion-tab title="首页" icon-on="ion-ios-home" icon-off="ion-ios-home-outline">  
  15.             <!-- 标签 1 内容 -->  
  16.             <ion-view>  
  17.                 <ion-content class="calm-bg">  
  18.                     tab 1 content  
  19.                 </ion-content>  
  20.             </ion-view>  
  21.         </ion-tab>  
  22.   
  23.         <ion-tab title="关于" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline">  
  24.             <!-- 标签 2 内容 -->  
  25.             <ion-view>  
  26.                 <ion-content class="balanced-bg">  
  27.                     tab 2 content  
  28.                 </ion-content>  
  29.             </ion-view>  
  30.         </ion-tab>  
  31.   
  32.         <ion-tab title="设置" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline">  
  33.             <!-- 标签 3 内容 -->  
  34.             <ion-view>  
  35.                 <ion-content class="energized-bg">  
  36.                     tab 2 content  
  37.                 </ion-content>  
  38.             </ion-view>  
  39.         </ion-tab>  
  40.     </ion-tabs>  
  41. </body>  
  42. </html>  
   

二.ion-tabs 常用设置

ion-tabs声明条带风格：

  • .tabs-striped样式可以将选项卡 声明为条带风格;
  • .tabs-standard 申明不带条风格;
  1. <ion-tabs class="tabs-striped">...</ion-tabs>  
也可以通过$ionicConfigProvider在AngularJS的配置阶段，将选项卡设置为条带风格：
[javascript] view plain copy
 在CODE上查看代码片派生到我的代码片
  1. app.config(function($ionicConfigProvider){  
  2.  $ionicConfigProvider.tabs.style("striped"); // 参数可以是： standard | striped   
  3. })  

ion-tabs : 声明位置： 
如果学习过课程：ionic之CSS框架，应该记得使用.tabs-top可以将选项卡置于 顶部标题栏之下：
  1. <ion-tabs class="tabs-top">...</ion-tabs>  
也可以通过$ionicConfigProvider，在配置阶段设置选项卡的位置是在顶部还是底部：
[javascript] view plain copy
 在CODE上查看代码片派生到我的代码片
  1. app.config(function($ionicConfigProvider){   
  2. $ionicConfigProvider.tabs.position("top"); //参数可以是：top | bottom   
  3. });  
  1. <!DOCTYPE html>  
  2. <html ng-app="ionic">  
  3. <head>  
  4.     <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">  
  5.     <script src="../../lib/js/ionic.bundle.min.js"></script>  
  6.     <link rel="stylesheet" type="text/css" href="../../lib/css/ionic.min.css">  
  7. </head>  
  8. <body>  
  9.     <ion-header-bar class="bar-positive">  
  10.         <h1 class="title">ion-tabs : top</h1>  
  11.     </ion-header-bar>  
  12.     <ion-tabs class="tabs-positive tabs-striped tabs-top">  
  13.         <ion-tab title="热门">  
  14.             <ion-view>  
  15.                 <ion-content class="calm-bg">  
  16.                     tab 1 content  
  17.                 </ion-content>  
  18.             </ion-view>  
  19.         </ion-tab>  
  20.         <ion-tab title="最新">  
  21.             <ion-view>  
  22.                 <ion-content class="balanced-bg">  
  23.                     tab 2 content  
  24.                 </ion-content>  
  25.             </ion-view>  
  26.         </ion-tab>  
  27.         <ion-tab title="推荐">  
  28.             <ion-view>  
  29.                 <ion-content class="energized-bg">  
  30.                     tab 3 content  
  31.                 </ion-content>  
  32.             </ion-view>  
  33.         </ion-tab>  
  34.     </ion-tabs>  
  35. </body>  
  36. </html>  
   

三. ion-tabs 下面的 ion-tab ： 标题文字、图标和徽章显示隐藏
ion-tab指令有以下属性用于设置文本、图标和徽章：
  • title - 标题文字
标题文字是必须的。该属性值将作为选项页的标题文字。
  • icon - 标题图标
使用icon属性是可选的，该属性值将用来在标题文字旁边添加一个指定的图标。 这个属性的值将被作为icon-on和icon-off的默认值。
  • icon-on - 被选中状态的标题图标
如果一个选项页被选中，ion-tabs将使用icon-on属性的值绘制图标。如果icon-on 没有设置，那么ion-tabs就使用icon属性的值绘制图标。
  • icon-off - 未选中状态的标题图标
如果一个选项页没有被选中，ion-tabs将使用icon-off属性的值绘制图标。如果icon-off 没有设置，那么ion-tabs就使用icon属性的值绘制图标。
  • badge - 标题徽章
ion-tabs使用badge属性的值在标题文字旁边添加一个圆形的文字标识，通常用来 显示数字。这个属性是可选的，可以是一个具体的值，也可以是当前作用域上的 一个变量。
  • badge-style - 标题徽章样式
使用badge-style属性设置徽章的样式， 比如配色方案：barge-{color}。
  • hidden - 隐藏
hidden属性是当前作用域上的表达式。 当其值为true时，选项页将不可见
  • disabled - 禁止
disabled属性是当前作用域上的表达式。当值为true时，选项页将不响应 用户的点击
  1. <!DOCTYPE html>  
  2. <html ng-app="ionic">  
  3. <head>  
  4.     <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">  
  5.     <script src="../../lib/js/ionic.bundle.min.js"></script>  
  6.     <link rel="stylesheet" type="text/css" href="../../lib/css/ionic.min.css">  
  7. </head>  
  8. <body>  
  9.     <ion-tabs class="tabs-positive tabs-icon-top">  
  10.   
  11.         <ion-tab title="主页" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">  
  12.             <ion-view>  
  13.                 <ion-header-bar class="bar-positive">  
  14.                     <h1 class="title">home tab</h1>  
  15.                 </ion-header-bar>  
  16.                 <ion-content>  
  17.                     <p>home content</p>  
  18.                 </ion-content>  
  19.             </ion-view>  
  20.         </ion-tab>  
  21.   
  22.         <ion-tab title="发现" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline" badge="12" badge-style="badge-assertive">  
  23.             <ion-view>  
  24.                 <ion-header-bar  class="bar-positive">  
  25.                     <h1 class="title">about tab</h1>  
  26.                 </ion-header-bar>  
  27.                 <ion-content>  
  28.                     <p>about content</p>  
  29.                 </ion-content>  
  30.             </ion-view>  
  31.         </ion-tab>  
  32.   
  33.         <ion-tab title="设置" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline">  
  34.             <ion-view>  
  35.                 <ion-header-bar  class="bar-positive">  
  36.                     <h1 class="title">settings tab</h1>  
  37.                 </ion-header-bar>  
  38.                 <ion-content>  
  39.                     <p>settings content</p>  
  40.                 </ion-content>  
  41.             </ion-view>  
  42.         </ion-tab>  
  43.   
  44.     </ion-tabs>  
  45. </body>  
  46. </html>  
    

四.ion-tabs 事件 和 $ionicTabsDelegate
   1.ion-tab事件：
  • on-select - 选中事件。可选，选项页从未选中状态切换到选中状态时执行此表达式；
  • on-deselect - 未选中事件。可选，选项页从选中状态切换到未选中状态时执行此表达式；
  • ng-click - 点击事件。可选，选项页被点击时执行此表达式。如果这个属性被设置，那么ion-tabs将不会 自动切换选项页，调用者需要手动调用$ionicTabsDelegate的select()方法进行 选项页切换；
  
  1. <!DOCTYPE html>  
  2. <html ng-app="ezApp">  
  3. <head>  
  4.     <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">  
  5.     <script src="../../lib/js/ionic.bundle.min.js"></script>  
  6.     <link rel="stylesheet" type="text/css" href="../../lib/css/ionic.min.css">  
  7. </head>  
  8. <body ng-controller="ezCtrl">  
  9.     <ion-header-bar class="bar-positive">  
  10.         <h1 class="title">{{title}}</h1>  
  11.     </ion-header-bar>  
  12.   
  13.     <ion-tabs class="tabs-positive tabs-striped">  
  14.         <ion-tab title="tab1" on-select="on_select(1)">  
  15.             <ion-view>  
  16.                 <ion-content class="calm-bg">  
  17.                     tab 1 content  
  18.                 </ion-content>  
  19.             </ion-view>  
  20.         </ion-tab>  
  21.         <ion-tab title="tab2" on-select="on_select(2)">  
  22.             <ion-view>  
  23.                 <ion-content class="balanced-bg">  
  24.                     tab 2 content  
  25.                 </ion-content>  
  26.             </ion-view>  
  27.         </ion-tab>  
  28.         <ion-tab title="tab3" on-select="on_select(3)">  
  29.             <ion-view>  
  30.                 <ion-content class="energized-bg">  
  31.                     tab 3 content  
  32.                 </ion-content>  
  33.             </ion-view>  
  34.         </ion-tab>  
  35.     </ion-tabs>  
  36. </body>  
  37. </html>  
  38. <script>  
  39. angular.module("ezApp",["ionic"])  
  40. .controller("ezCtrl",function($scope){  
  41.     $scope.title="ion-tab : events";  
  42.     $scope.on_select = function(idx){  
  43.         $scope.title = ["ion-tab ",idx," selected!"].join("");  
  44.     }  
  45. });  
  46.   
  47. </script>  

     
   2.ionicTabsDelegate
   使用$ionicTabsDelegate服务，我们可以在脚本中控制选项卡对象： 
  • select(index) - 选中指定的选项页。index参数从0开始，第一个选项页的index为0，第二个为1，依次类推。 
  • selectedIndex() - 返回当前选中选项页的索引号。如果当前没有选中的选项页，则返回 -1。
  1. <!DOCTYPE html>  
  2. <html ng-app="ezApp">  
  3. <head>  
  4.     <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">  
  5.     <script src="../../lib/js/ionic.bundle.min.js"></script>  
  6.     <link rel="stylesheet" type="text/css" href="../../lib/css/ionic.min.css">  
  7. </head>  
  8. <body ng-controller="ezCtrl">  
  9.     <ion-header-bar class="bar-stable">  
  10.         <h1 class="title">$ionTabsDelegate</h1>  
  11.     </ion-header-bar>  
  12.     <ion-tabs class="tabs-stable">  
  13.         <ion-tab title="tab1" disabled="true"  icon-on="ion-ios-heart"  icon-off="ion-ios-heart-outline">  
  14.             <ion-view>  
  15.                 <ion-content padding="true" class="positive-bg light">  
  16.                     <p>this is content of tab 1</p>  
  17.                 </ion-content>  
  18.             </ion-view>  
  19.         </ion-tab>  
  20.         <ion-tab title="tab2" disabled="true" icon-on="ion-ios-heart"  icon-off="ion-ios-heart-outline">  
  21.             <ion-view>  
  22.                 <ion-content  padding="true" class="calm-bg light">  
  23.                     <p>this is content of tab 2</p>  
  24.                 </ion-content>  
  25.                 </ion-view>  
  26.         </ion-tab>  
  27.         <ion-tab title="tab3" disabled="true"  icon-on="ion-ios-heart"  icon-off="ion-ios-heart-outline">  
  28.             <ion-view>  
  29.                 <ion-content  padding="true" class="balanced-bg light">  
  30.                     <p>this is content of tab 3</p>  
  31.                 </ion-content>  
  32.             </ion-view>  
  33.         </ion-tab>  
  34.     </ion-tabs>  
  35. </body>  
  36. </html>  
  37.   
  38. <script>  
  39. angular.module("ezApp",["ionic"])  
  40. .controller("ezCtrl",function($scope,$ionicTabsDelegate,$interval){  
  41.     var idx=0;  
  42.     $interval(function(){  
  43.         idx = (idx + 1) % 3;  
  44.         console.log(idx);  
  45.         $ionicTabsDelegate.select(idx);  
  46.     },2000);  
  47. });  
  48.   
  49.   
  50. </script>  
            

五.ion-tabs路由详解
   1. 触发状态迁移的几种方式（通俗的讲就是页面跳转的几种方式）.
      1). 调用$state.go() 方法，这是一个高级的便利方法； 
      2). 点击包含 ui-sref 指令的链接;
  1. <a ui-sref="state1">Go State 1</a>   
      3). 导航到与状态相关联的 url。
   2. 通过href方式页面切换需要指定 url.
   3. ionic中结合tab状态嵌套的几种方式
      状态可以相互嵌套。有三个嵌套的方法：
      1).使用“点标记法”，例如：.state('contacts.list', {});
         在$stateProvider中可以使用点语法来表示层次结构，下面，contacts.list是contacts的子状态。     
[javascript] view plain copy
 在CODE上查看代码片派生到我的代码片
  1. $stateProvider   
  2. .state('contacts', {})   
  3. .state('contacts.list', {});  
      2).使用parent属性，指定一个父状态的名称字符串，例如：parent: 'contacts';
[javascript] view plain copy
 在CODE上查看代码片派生到我的代码片
  1. $stateProvider   
  2. .state('contacts', {})   
  3. .state('list', { parent: 'contacts' });  
      3).使用parent属性，指定一个父状态对象，例如：parent: contacts（contacts 是一个状态对象);
         如果你不喜欢使用基于字符串的状态，您还可以使用基于对象的状态。name属性将在状态对象内部设置，          在所有的子状态对象中设置parent属性为父状态对象，像下面这样：
[javascript] view plain copy
 在CODE上查看代码片派生到我的代码片
  1. var contacts = { name: 'contacts', //mandatory templateUrl: 'contacts.html' }   
  2. var contactsList = { name: 'list', //mandatory parent: contacts, //mandatory templateUrl: 'contacts.list.html' }   
  3. $stateProvider   
  4. .state(contacts)   
  5. .state(contactsList)  
    4. ionic路由结合tap实现页面切换      
       1). 在ionic tab中定义ion-nav-view 并且加上name属性
  1. <ion-nav-view name="news-list"></ion-nav-view>  
       2. 在ionic $stateProvider.state中定义view 并对应 ion-nav-view 中的name属性
    5. ionic states 抽象状态abstract
       一个抽象的状态可以有子状态但不能显式激活，它将被隐性激活当其子状态被激活时。
       下面是两个最常用的抽象状态的示例：
        ·为所有子状态预提供一个基url
        ·在父状态中设置template属性，子状态对应的模板将插入到父状态模板中的ui-view(s)中。
示例：

index.html:
  1. <!DOCTYPE html>  
  2. <html>  
  3.   <head>  
  4.     <meta charset="utf-8">  
  5.     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">  
  6.     <title></title>  
  7.   
  8.     <link href="lib/css/ionic.css" rel="stylesheet">  
  9.   
  10.     <script src="lib/js/ionic.bundle.js"></script>  
  11.   
  12.     <script src="js/app.js"></script>  
  13.     <script src="js/controllers.js"></script>  
  14.   
  15.   </head>  
  16.   <body ng-app="myApp">  
  17.     <ion-nav-bar class="bar-positive">  
  18.       <ion-nav-back-button>  
  19.       </ion-nav-back-button>  
  20.     </ion-nav-bar>  
  21.     <ion-nav-view></ion-nav-view>  
  22.   </body>  
  23. </html>  
tabs.html:
  1. <ion-tabs class="tabs-icon-top tabs-positive">  
  2.     <ion-tab title="tab1" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/tab1">  
  3.         <ion-nav-view name="tab-tab1"></ion-nav-view>  
  4.     </ion-tab>  
  5.   
  6.     <ion-tab title="tab2" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes" href="#/tab/tab2">  
  7.         <ion-nav-view name="tab-tab2"></ion-nav-view>  
  8.     </ion-tab>  
  9.   
  10.     <ion-tab title="tab3" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" href="#/tab/tab3">  
  11.         <ion-nav-view name="tab-tab3"></ion-nav-view>  
  12.     </ion-tab>  
  13.   
  14. </ion-tabs>  
tab-tab1.html:
  1. <ion-view view-title="Tab1">  
  2.   <ion-content>  
  3.       Tab1  
  4.   
  5.       {{title}}  
  6.   
  7.       <a class="button" href="#/tab/content1/10">跳转到内容</a>  
  8.   
  9.       <a class="button" href="#/news">news跳转到内容</a>  
  10.   </ion-content>  
  11. </ion-view>  
tab-tab2.html:
  1. <ion-view view-title="Tab2">  
  2.   <ion-content>  
  3.       Tab2  
  4.       {{title}}  
  5.   </ion-content>  
  6. </ion-view>  
tab-tab3.html:
  1. <ion-view view-title="Tab3">  
  2.   <ion-content>  
  3.       Tab3  
  4.       {{title}}  
  5.   </ion-content>  
  6. </ion-view>  
tab-content1.html:
  1. <ion-view view-title="tabContent1">  
  2.   <ion-content>  
  3.       tabContent1  
  4.   
  5.       {{title}}  
  6.   </ion-content>  
  7. </ion-view>  
news.html:
  1. <ion-view view-title="news">  
  2.   <ion-content>  
  3.       news  
  4.       news  
  5.       news  
  6.   
  7.   </ion-content>  
  8. </ion-view>  
app.js:
  1. angular.module('myApp', ['ionic','myApp.controllers'])  
  2.   
  3. .config(function($stateProvider, $urlRouterProvider) {  
  4.   
  5.   $stateProvider  
  6.     .state('tab', {  
  7.     url: "/tab",  
  8.     abstract:true,  
  9.     templateUrl: "templates/tabs.html"  
  10.   })  
  11.   .state('tab.tab1', {  
  12.     url: '/tab1',  
  13.     views:{  
  14.         'tab-tab1':{  
  15.             templateUrl: "templates/tab-tab1.html",  
  16.             controller:'tab1Controller'  
  17.   
  18.         }  
  19.   
  20.     }  
  21.   
  22.   })  
  23.   .state('tab.tab2', {  
  24.       url: '/tab2',  
  25.       views:{  
  26.           'tab-tab2':{  
  27.               templateUrl: "templates/tab-tab2.html",  
  28.               controller:'tab2Controller'  
  29.           }  
  30.   
  31.       }  
  32.   
  33.   })  
  34.   .state('tab.tab3', {  
  35.       url: '/tab3',  
  36.       views:{  
  37.           'tab-tab3':{  
  38.               templateUrl: "templates/tab-tab3.html",  
  39.               controller:'tab3Controller'  
  40.           }  
  41.   
  42.       }  
  43.   
  44.   })  
  45.   .state('tab.content1', {  
  46.       url: '/content1/:id',  
  47.       views:{  
  48.           'tab-tab1':{  
  49.               templateUrl: "templates/tab-content1.html",  
  50.               controller:'content1Controller'  
  51.           }  
  52.   
  53.       }  
  54.   
  55.   })  
  56.   .state('news', {  
  57.          url: '/news',  
  58.         templateUrl: "templates/news.html"  
  59.   
  60.       })  
  61.   $urlRouterProvider.otherwise('/tab/tab1');  
  62.   
  63. });  
controller.js
[javascript] view plain copy
 在CODE上查看代码片派生到我的代码片
  1. angular.module('myApp.controllers', [])  
  2.   
  3. .controller('tab1Controller', function($scope) {  
  4.   
  5.         $scope.title='tab1Controller';  
  6.   
  7.  })  
  8.     .controller('tab2Controller', function($scope) {  
  9.   
  10.         $scope.title='tab2Controller';  
  11.   
  12.     })  
  13.     .controller('tab3Controller', function($scope) {  
  14.   
  15.         $scope.title='tab3Controller';  
  16.   
  17.     })  
  18.   
  19.     .controller('content1Controller', function($scope,$stateParams) {  
  20.   
  21.         $scope.title='content1Controller';  
  22.   
  23.   
  24.         console.log($stateParams);  
  25.   
  26.     })  
          









   

    本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
    转藏 分享 献花（0）

    来自： 我的前端图书馆 > 《angular+ionic》

    举报/认领

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多