ion-tabs
ion-tabs 是有一组页面选项卡组成的选项卡栏。可以通过点击选项来切换页面。
对于 iOS，它会出现在屏幕的底部，Android会出现在屏幕的顶部(导航栏下面)。
用法

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







ion-tab
隶属于ionTabs
包含一个选项卡内容。该内容仅存在于被选中的给定选项卡中。
每个ionTab都有自己的浏览历史。
用法

<ion-tab

  title="Tab!"

  icon="my-icon"

  href="#/tab/tab-link"

  on-select="onTabSelected()"

  on-deselect="onTabDeselected()">

</ion-tab>



$ionicTabsDelegate
授权控制ionTabs指令。
该方法直接调用\(ionicTabsDelegate服务，控制所有ionTabs指令。用\)getByHandle方法控制具体的ionTabs实例。
用法

<body ng-controller="MyCtrl">

  <ion-tabs>

    <ion-tab title="Tab 1">

      你好，标签1！

      <button ng-click="selectTabWithIndex(1)">选择标签2</button>

    </ion-tab>

    <ion-tab title="Tab 2">你好标签2！</ion-tab>

  </ion-tabs>

</body>
function MyCtrl($scope, $ionicTabsDelegate) {

  $scope.selectTabWithIndex = function(index) {

    $ionicTabsDelegate.select(index);

  }

}

Ionic Js二十：选项卡栏操作的更多相关文章

  1. ionic js ion-tabs选项卡栏操作

    ionic 选项卡栏操作 ion-tabs ion-tabs 是有一组页面选项卡组成的选项卡栏.可以通过点击选项来切换页面. 对于 iOS,它会出现在屏幕的底部,Android会出现在屏幕的顶部(导航 ...

  2. Java从零开始学二十九(大数操作（BigIntger、BigDecimal)

    一.BigInteger 如果在操作的时候一个整型数据已经超过了整数的最大类型长度long的话,则此数据就无法装入,所以,此时要使用BigInteger类进行操作. 不可变的任意精度的整数.所有操作中 ...

  3. jQuery 源码解析(二十五) DOM操作模块 html和text方法的区别

    html和text都可以获取和修改DOM节点里的内容,方法如下: html(value)     ;获取匹配元素集合中的一个元素的innerHTML内容,或者设置每个元素的innerHTML内容,   ...

  4. jQuery 源码解析(二十八) 样式操作模块 scrollLeft和scrollTop详解

    scrollLeft和scrollTop用于获取/设置滚动条的,如下: scrollLeft(val) ;读取或设置整个页面的水平滚动条距离 scrollTop(val) ;读取或设置整个页面的垂直滚 ...

  5. jQuery 源码解析(二十六) 样式操作模块 样式详解

    样式操作模块可用于管理DOM元素的样式.坐标和尺寸,本节讲解一下样式相关,样式操作通过jQuery实例的css方法来实现,该方法有很多的执行方法,如下: css(obj)            ;参数 ...

  6. jQuery 源码解析(二十四) DOM操作模块 包裹元素 详解

    本节说一下DOM操作模块里的包裹元素子模块,该模块可将当前匹配的元素替换指定的DOM元素,有如下方法: wrap(html)               ;在每个匹配元素的外层添加一层DOM元素   ...

  7. koa 基础（二十）nodejs 操作mongodb数据库 --- 新增数据

    1.app.js /** * nodejs 操作mongodb数据库 * 1.安装 操作mongodb * cnpm install mongodb --save * 2.引入 mongodb 下面的 ...

  8. jQuery 源码解析(二十九) 样式操作模块 尺寸详解

    样式操作模块可用于管理DOM元素的样式.坐标和尺寸,本节讲解一下尺寸这一块 jQuery通过样式操作模块里的尺寸相关的API可以很方便的获取一个元素的宽度.高度,而且可以很方便的区分padding.b ...

  9. ballerina 学习二十九 数据库操作

    ballerina 数据操作也是比较方便的,官方也我们提供了数据操作的抽象,但是我们还是依赖数据库驱动的. 数据库驱动还是jdbc模式的 项目准备 项目结构 ├── mysql_demo │ ├── ...

随机推荐

  1. javascript精雕细琢（二）：++、--那点事

    目录 引言 ++和--在数学运算中的计算规则 ++和--在变量引用时的计算规则 ++和--的数据转换应用 引言 对于接触JS时间不长的前端来说,刚开始要实现诸如轮播图,选项卡等小模块时,肯定会用到in ...

  2. git爬坑不完全指北（一）：Permission to xxx.git denied to user的解决方案

    由于对之前github账户名不太满意,又不像大神一样需要两个账号绑定.所以今天注册了新账号,想把电脑绑定到新账号上,结果就踩坑了……报错如标题. 在网上按照这个题目可以搜索出一大堆的解决方案,但都是一 ...

  3. 2017 清北济南考前刷题Day 6 afternoon

    期望得分:100+100+30=230 实际得分: 正解: 枚举最高的位,这一位m是1但实际用了0 然后剩余的低位肯定是 正数就用1,负数用0 考场思路:数位DP #include<cstdio ...

  4. 机器学习算法整理（一）线性回归与梯度下降 python实现

    回归算法 以下均为自己看视频做的笔记,自用,侵删! 一.线性回归 θ是bias(偏置项) 线性回归算法代码实现 # coding: utf-8 ​ get_ipython().run_line_mag ...

  5. hbase系列之：独立模式部署hbase

    一.概述 在上一篇博文中,我简要介绍了hbase的部分基础概念,如果想初步了解hbase的理论,可以参看上一篇博文 hbase系列之:初识hbase .本博文主要介绍独立模式下部署hbase及hbas ...

  6. Spyder简述

    导言 想打造轮子, 就必须要有一套完善的造轮子的工具. 我在jupyter+sciTE的组合里转来转去, 最后还是打算放弃这个组合, 因为离开了自动完成/调用提示/随时随地的访问文档帮助, 前行之路太 ...

  7. springmvc转springboot过程中访问jsp报Whitelabel Error Page错误

    前言: 虽然springboot内嵌了一个tomcat,但是这个内嵌的tomcat不支持jsp页面,所以需要引入其他包 解决: maven引入以下包即可 <dependency> < ...

  8. 内核：为了fan的健康，我的重新编译记录

    email: jiqingwu@gmail.com date: 2008-02-13 关键词:ubuntu cpu cpufreqd cpufrequtils 编译 内核 装上ubuntu7.10后, ...

  9. 64位linux安装32位校园网客户端

    下面的是ubuntu下和arch下的安装方法,ubuntu的转自网络, ubuntu: 下载客户端并解压 安装开发包 1 sudo -i 2 dpkg --add-architecture i386 ...

  10. 【codeforces】【比赛题解】#931 CF Round #468 (Div. 2)

    因为太迟了,所以没去打. 后面打了Virtual Contest,没想到拿了个rank 3,如果E题更快还能再高,也是没什么想法. [A]Friends Meeting 题意: 在数轴上有两个整点\( ...