ion-tabs简介

<!DOCTYPE html>

<html ng-app="ionic">

<head>

    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">

    <script src="../../lib/js/ionic.bundle.min.js"></script>

    <link rel="stylesheet" type="text/css" href="../../lib/css/ionic.min.css">

</head>

<body>

    <ion-header-bar class="bar-positive">

        <h1 class="title">ion-tabs简介</h1>

    </ion-header-bar>

    <ion-tabs class="tabs-positive tabs-icon-only">  

        <ion-tab title="首页" icon-on="ion-ios-home" icon-off="ion-ios-home-outline">

            <!-- 标签 1 内容 -->

            <ion-view>

                <ion-content class="calm-bg">

                    tab 1 content

                </ion-content>

            </ion-view>

        </ion-tab>  

        <ion-tab title="关于" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline">

            <!-- 标签 2 内容 -->

            <ion-view>

                <ion-content class="balanced-bg">

                    tab 2 content

                </ion-content>

            </ion-view>

        </ion-tab>  

        <ion-tab title="设置" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline">

            <!-- 标签 3 内容 -->

            <ion-view>

                <ion-content class="energized-bg">

                    tab 2 content

                </ion-content>

            </ion-view>

        </ion-tab>

    </ion-tabs>

</body>

</html>

　　

二.ion-tabs 常用设置

ion-tabs声明条带风格：

  • .tabs-striped样式可以将选项卡 声明为条带风格;
  • .tabs-standard 申明不带条风格;
  • <ion-tabs class="tabs-striped">...</ion-tabs>

    也可以通过$ionicConfigProvider在AngularJS的配置阶段，将选项卡设置为条带风格：

    app.config(function($ionicConfigProvider){
    
 $ionicConfigProvider.tabs.style("striped"); // 参数可以是： standard | striped
    
})

    　　

    ion-tabs : 声明位置： 
    如果学习过课程：ionic之CSS框架，应该记得使用.tabs-top可以将选项卡置于 顶部标题栏之下：

    <ion-tabs class="tabs-top">...</ion-tabs>

    也可以通过$ionicConfigProvider，在配置阶段设置选项卡的位置是在顶部还是底部：

    app.config(function($ionicConfigProvider){
    
$ionicConfigProvider.tabs.position("top"); //参数可以是：top | bottom
    
});

    　　

    　　
    <!DOCTYPE html>
    
<html ng-app="ionic">
    
<head>
    
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
    
    <script src="../../lib/js/ionic.bundle.min.js"></script>
    
    <link rel="stylesheet" type="text/css" href="../../lib/css/ionic.min.css">
    
</head>
    
<body>
    
    <ion-header-bar class="bar-positive">
    
        <h1 class="title">ion-tabs : top</h1>
    
    </ion-header-bar>
    
    <ion-tabs class="tabs-positive tabs-striped tabs-top">
    
        <ion-tab title="热门">
    
            <ion-view>
    
                <ion-content class="calm-bg">
    
                    tab 1 content
    
                </ion-content>
    
            </ion-view>
    
        </ion-tab>
    
        <ion-tab title="最新">
    
            <ion-view>
    
                <ion-content class="balanced-bg">
    
                    tab 2 content
    
                </ion-content>
    
            </ion-view>
    
        </ion-tab>
    
        <ion-tab title="推荐">
    
            <ion-view>
    
                <ion-content class="energized-bg">
    
                    tab 3 content
    
                </ion-content>
    
            </ion-view>
    
        </ion-tab>
    
    </ion-tabs>
    
</body>
    
</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时，选项页将不响应 用户的点击
    <!DOCTYPE html>
    
<html ng-app="ionic">
    
<head>
    
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
    
    <script src="../../lib/js/ionic.bundle.min.js"></script>
    
    <link rel="stylesheet" type="text/css" href="../../lib/css/ionic.min.css">
    
</head>
    
<body>
    
    <ion-tabs class="tabs-positive tabs-icon-top">  

        <ion-tab title="主页" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">
    
            <ion-view>
    
                <ion-header-bar class="bar-positive">
    
                    <h1 class="title">home tab</h1>
    
                </ion-header-bar>
    
                <ion-content>
    
                    <p>home content</p>
    
                </ion-content>
    
            </ion-view>
    
        </ion-tab>  

        <ion-tab title="发现" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline" badge="12" badge-style="badge-assertive">
    
            <ion-view>
    
                <ion-header-bar  class="bar-positive">
    
                    <h1 class="title">about tab</h1>
    
                </ion-header-bar>
    
                <ion-content>
    
                    <p>about content</p>
    
                </ion-content>
    
            </ion-view>
    
        </ion-tab>  

        <ion-tab title="设置" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline">
    
            <ion-view>
    
                <ion-header-bar  class="bar-positive">
    
                    <h1 class="title">settings tab</h1>
    
                </ion-header-bar>
    
                <ion-content>
    
                    <p>settings content</p>
    
                </ion-content>
    
            </ion-view>
    
        </ion-tab>  

    </ion-tabs>
    
</body>
    
</html>

    　　

    　　

    四.ion-tabs 事件 和 $ionicTabsDelegate
     1.ion-tab事件：
    • on-select - 选中事件。可选，选项页从未选中状态切换到选中状态时执行此表达式；
    • on-deselect - 未选中事件。可选，选项页从选中状态切换到未选中状态时执行此表达式；
    • ng-click - 点击事件。可选，选项页被点击时执行此表达式。如果这个属性被设置，那么ion-tabs将不会 自动切换选项页，调用者需要手动调用$ionicTabsDelegate的select()方法进行 选项页切换；
    <!DOCTYPE html>
    
<html ng-app="ezApp">
    
<head>
    
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
    
    <script src="../../lib/js/ionic.bundle.min.js"></script>
    
    <link rel="stylesheet" type="text/css" href="../../lib/css/ionic.min.css">
    
</head>
    
<body ng-controller="ezCtrl">
    
    <ion-header-bar class="bar-positive">
    
        <h1 class="title">{{title}}</h1>
    
    </ion-header-bar>  

    <ion-tabs class="tabs-positive tabs-striped">
    
        <ion-tab title="tab1" on-select="on_select(1)">
    
            <ion-view>
    
                <ion-content class="calm-bg">
    
                    tab 1 content
    
                </ion-content>
    
            </ion-view>
    
        </ion-tab>
    
        <ion-tab title="tab2" on-select="on_select(2)">
    
            <ion-view>
    
                <ion-content class="balanced-bg">
    
                    tab 2 content
    
                </ion-content>
    
            </ion-view>
    
        </ion-tab>
    
        <ion-tab title="tab3" on-select="on_select(3)">
    
            <ion-view>
    
                <ion-content class="energized-bg">
    
                    tab 3 content
    
                </ion-content>
    
            </ion-view>
    
        </ion-tab>
    
    </ion-tabs>
    
</body>
    
</html>
    
<script>
    
angular.module("ezApp",["ionic"])
    
.controller("ezCtrl",function($scope){
    
    $scope.title="ion-tab : events";
    
    $scope.on_select = function(idx){
    
        $scope.title = ["ion-tab ",idx," selected!"].join("");
    
    }
    
});  

</script>

    2.ionicTabsDelegate
       使用$ionicTabsDelegate服务，我们可以在脚本中控制选项卡对象： 
    • select(index) - 选中指定的选项页。index参数从0开始，第一个选项页的index为0，第二个为1，依次类推。
    • selectedIndex() - 返回当前选中选项页的索引号。如果当前没有选中的选项页，则返回 -1。
    <!DOCTYPE html>
    
<html ng-app="ezApp">
    
<head>
    
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
    
    <script src="../../lib/js/ionic.bundle.min.js"></script>
    
    <link rel="stylesheet" type="text/css" href="../../lib/css/ionic.min.css">
    
</head>
    
<body ng-controller="ezCtrl">
    
    <ion-header-bar class="bar-stable">
    
        <h1 class="title">$ionTabsDelegate</h1>
    
    </ion-header-bar>
    
    <ion-tabs class="tabs-stable">
    
        <ion-tab title="tab1" disabled="true"  icon-on="ion-ios-heart"  icon-off="ion-ios-heart-outline">
    
            <ion-view>
    
                <ion-content padding="true" class="positive-bg light">
    
                    <p>this is content of tab 1</p>
    
                </ion-content>
    
            </ion-view>
    
        </ion-tab>
    
        <ion-tab title="tab2" disabled="true" icon-on="ion-ios-heart"  icon-off="ion-ios-heart-outline">
    
            <ion-view>
    
                <ion-content  padding="true" class="calm-bg light">
    
                    <p>this is content of tab 2</p>
    
                </ion-content>
    
                </ion-view>
    
        </ion-tab>
    
        <ion-tab title="tab3" disabled="true"  icon-on="ion-ios-heart"  icon-off="ion-ios-heart-outline">
    
            <ion-view>
    
                <ion-content  padding="true" class="balanced-bg light">
    
                    <p>this is content of tab 3</p>
    
                </ion-content>
    
            </ion-view>
    
        </ion-tab>
    
    </ion-tabs>
    
</body>
    
</html>  

<script>
    
angular.module("ezApp",["ionic"])
    
.controller("ezCtrl",function($scope,$ionicTabsDelegate,$interval){
    
    var idx=0;
    
    $interval(function(){
    
        idx = (idx + 1) % 3;
    
        console.log(idx);
    
        $ionicTabsDelegate.select(idx);
    
    },2000);
    
});  

</script>

    　　

    五.ion-tabs路由详解
       1. 触发状态迁移的几种方式（通俗的讲就是页面跳转的几种方式）.
          1). 调用$state.go() 方法，这是一个高级的便利方法； 
          2). 点击包含 ui-sref 指令的链接;
          3). 导航到与状态相关联的 url。
    <a ui-sref="state1">Go State 1</a>

    　　

    2. 通过href方式页面切换需要指定 url.
       3. ionic中结合tab状态嵌套的几种方式
          状态可以相互嵌套。有三个嵌套的方法：
      1).使用“点标记法”，例如：.state('contacts.list', {});
             在$stateProvider中可以使用点语法来表示层次结构，下面，contacts.list是contacts的子状态。     

　　　　

$stateProvider

.state('contacts', {})

.state('contacts.list', {});

　　 2).使用parent属性，指定一个父状态的名称字符串，例如：parent: 'contacts';

　　

$stateProvider

.state('contacts', {})

.state('list', { parent: 'contacts' });

　　

　　

         3).使用parent属性，指定一个父状态对象，例如：parent: contacts（contacts 是一个状态对象);
         如果你不喜欢使用基于字符串的状态，您还可以使用基于对象的状态。name属性将在状态对象内部设置，          在所有的子状态对象中设置parent属性为父           状态对象，像下面这样：

　　　

var contacts = { name: 'contacts', //mandatory templateUrl: 'contacts.html' }

var contactsList = { name: 'list', //mandatory parent: contacts, //mandatory templateUrl: 'contacts.list.html' }

$stateProvider

.state(contacts)

.state(contactsList)

　　

 4. ionic路由结合tap实现页面切换      
       1). 在ionic tab中定义ion-nav-view 并且加上name属性
<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)中。
示例：
<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <title></title>  

    <link href="lib/css/ionic.css" rel="stylesheet">  

    <script src="lib/js/ionic.bundle.js"></script>  

    <script src="js/app.js"></script>

    <script src="js/controllers.js"></script>  

  </head>

  <body ng-app="myApp">

    <ion-nav-bar class="bar-positive">

      <ion-nav-back-button>

      </ion-nav-back-button>

    </ion-nav-bar>

    <ion-nav-view></ion-nav-view>

  </body>

</html>

　　

<ion-tabs class="tabs-icon-top tabs-positive">

    <ion-tab title="tab1" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/tab1">

        <ion-nav-view name="tab-tab1"></ion-nav-view>

    </ion-tab>  

    <ion-tab title="tab2" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes" href="#/tab/tab2">

        <ion-nav-view name="tab-tab2"></ion-nav-view>

    </ion-tab>  

    <ion-tab title="tab3" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" href="#/tab/tab3">

        <ion-nav-view name="tab-tab3"></ion-nav-view>

    </ion-tab>  

</ion-tabs>

　　

<ion-view view-title="Tab1">

  <ion-content>

      Tab1  

      {{title}}  

      <a class="button" href="#/tab/content1/10">跳转到内容</a>  

      <a class="button" href="#/news">news跳转到内容</a>

  </ion-content>

</ion-view>

　　

<ion-view view-title="Tab2">

  <ion-content>

      Tab2

      {{title}}

  </ion-content>

</ion-view>

　　

<ion-view view-title="Tab3">

  <ion-content>

      Tab3

      {{title}}

  </ion-content>

</ion-view>

　　

<ion-view view-title="tabContent1">

  <ion-content>

      tabContent1  

      {{title}}

  </ion-content>

</ion-view>

　　

<ion-view view-title="news">

  <ion-content>

      news

      news

      news  

  </ion-content>

</ion-view>

　　

angular.module('myApp', ['ionic','myApp.controllers'])  

.config(function($stateProvider, $urlRouterProvider) {  

  $stateProvider

    .state('tab', {

    url: "/tab",

    abstract:true,

    templateUrl: "templates/tabs.html"

  })

  .state('tab.tab1', {

    url: '/tab1',

    views:{

        'tab-tab1':{

            templateUrl: "templates/tab-tab1.html",

            controller:'tab1Controller'  

        }  

    }  

  })

  .state('tab.tab2', {

      url: '/tab2',

      views:{

          'tab-tab2':{

              templateUrl: "templates/tab-tab2.html",

              controller:'tab2Controller'

          }  

      }  

  })

  .state('tab.tab3', {

      url: '/tab3',

      views:{

          'tab-tab3':{

              templateUrl: "templates/tab-tab3.html",

              controller:'tab3Controller'

          }  

      }  

  })

  .state('tab.content1', {

      url: '/content1/:id',

      views:{

          'tab-tab1':{

              templateUrl: "templates/tab-content1.html",

              controller:'content1Controller'

          }  

      }  

  })

  .state('news', {

         url: '/news',

        templateUrl: "templates/news.html"  

      })

  $urlRouterProvider.otherwise('/tab/tab1');  

});

　　

angular.module('myApp.controllers', [])  

.controller('tab1Controller', function($scope) {  

        $scope.title='tab1Controller';  

 })

    .controller('tab2Controller', function($scope) {  

        $scope.title='tab2Controller';  

    })

    .controller('tab3Controller', function($scope) {  

        $scope.title='tab3Controller';  

    })  

    .controller('content1Controller', function($scope,$stateParams) {  

        $scope.title='content1Controller';  

        console.log($stateParams);  

    })

　　

　　

　

ion-tap选项卡及路由结合ion-tap的更多相关文章

  1. TAP/TUN浅析（一）

    参考链接:https://www.ibm.com/developerworks/cn/linux/1310_xiawc_networkdevice/ TAP 设备与 VETH 设备     TUN/T ...

  2. 重新想象 Windows 8 Store Apps (49) - 输入: 获取输入设备信息, 虚拟键盘, Tab 导航, Pointer, Tap, Drag, Drop

    [源码下载] 重新想象 Windows 8 Store Apps (49) - 输入: 获取输入设备信息, 虚拟键盘, Tab 导航, Pointer, Tap, Drag, Drop 作者:weba ...

  3. 一文总结 Linux 虚拟网络设备 eth, tap/tun, veth-pair

    本文首发于我的公众号 Linux云计算网络(id: cloud_dev),专注于干货分享,号内有 10T 书籍和视频资源,后台回复「1024」即可领取,欢迎大家关注,二维码文末可以扫. Linux 虚 ...

  4. 利用 Linux tap/tun 虚拟设备写一个 ICMP echo 程序

    本文首发于我的公众号 Linux云计算网络(id: cloud_dev),专注于干货分享,号内有 10T 书籍和视频资源,后台回复「1024」即可领取,欢迎大家关注,二维码文末可以扫. 前面两篇文章已 ...

  5. OpenVPN搭建中tap与tun的实际使用区别

    tap俗称网桥模式,tun俗称路由模式,tap在二层,tun在三层,在实际应用中,其实以上这些知识概念,我是抄来的,具体的解释可以看以下参考链接. 下面将介绍在实际使用中的区别: 1.tap可以直接使 ...

  6. 关于tap设备

    $QEMU_PATH \ -nographic \ -drive file=./rootfs.ext4,format=raw \ -net nic,vlan=0 -net tap,vlan=0,ifn ...

  7. [转]Linux-虚拟网络设备-tun/tap

    转: 原文:https://blog.csdn.net/sld880311/article/details/77854651 ------------------------------------- ...

  8. TAP/TUN浅析

    转:http://www.cnblogs.com/yml435/p/5917628.html 参考链接:https://www.ibm.com/developerworks/cn/linux/1310 ...

  9. 云原生虚拟网络 tun/tap & veth-pair

    云原生虚拟网络 tun/tap & veth-pair 转载请声明出处哦~,本篇文章发布于luozhiyun的博客:https://www.luozhiyun.com/archives/684 ...

随机推荐

  1. windows下phpstorm的快捷键

    ctrl+shift+n查找文件 ctrl+shift+f 在一个目录里查找一段代码(ctrl+f的升级版) ctr+shift+r 在一个目录里查找一段代码并替换(ctrl+r的升级版) CTRL+ ...

  2. POJ 2240 && ZOJ 1082 Arbitrage 最短路,c++ stl pass g++ tle 难度:0

    http://poj.org/problem?id=2240 用log化乘法为加法找正圈 c++ 110ms,g++tle #include <string> #include <m ...

  3. C#如何以管理员身份运行程序

    在使用winform程序获取调用cmd命令提示符时,如果是win7以上的操作系统,会需要必须以管理员身份运行才会执行成功,否则无效果或提示错误. 比如在通过winform程序执行cmd命令时,某些情况 ...

  4. IT公司100题-15-求二元查找树的镜像

    问题描述: 输入一颗二元查找树,将该树转换为它的镜像树,即对每一个节点,互换左右子树.   例如输入:   6/    \4     12/ \   /   \2  5 8   16 输出:   6/ ...

  5. Rhel6-keepalived+lvs配置文档

    系统环境: rhel6 x86_64 iptables and selinux disabled 主机: 192.168.122.119 server19.example.com 192.168.12 ...

  6. 戴文的Linux内核专题：02源代码

    转自Linux中国 在下载并解压内核源代码后,用户可以看到许多文件夹和文件.尝试去找一个特定的文件或许是一个挑战.谢天谢地,源代码以一个特定的方式组织的.这使开发者能够轻松找到任何文件或者内核的一部分 ...

  7. [转] lib和dll 区别,生成及使用方法

    lib 和 dll 的区别.生成以及使用详解 [目录] lib dll介绍 生成动态库 调用动态库 生成静态库 调用静态库 首先介绍一下静态库(静态链接库).动态库(动态链接库)的概念,首先两者都是代 ...

  8. Oracle GoldenGate 12c实时捕获SQL Server数据

    在Oracle GoldenGate 12c中,对一些最新的数据库提供了支持,比如SQL Server 2012/2014,当然12c也支持sql server 2008.主要新增特性有: 捕获进程可 ...

  9. 最新的goldengate monitor 12.1.3已经发布

    Oracle GoldenGate管理包针对OGG提供企业级的监控和管理,包含有如下模块: Oracle Enterprise Manager Plug-in. 利用OEM框架查看.管理和预警OGG ...

  10. MongoDB MapReduce（转）

    MapReduce MapReduce是一种计算模型,简单的说就是将大批量的工作(数据)分解(MAP)执行,然后再将结果合并成最终结果(REDUCE).这样做的好处是可以在任务被分解后,可以通过大量机 ...