ionic 选项卡栏操作

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>

尝试一下 »

效果如下所示：

API

属性 类型 详情
delegate-handle

(可选)
 字符串

该句柄用$ionicTabsDelegate来标识这些选项卡。

ion-tab

隶属于ionTabs

包含一个选项卡内容。该内容仅存在于被选中的给定选项卡中。

每个ionTab都有自己的浏览历史。

用法

<ion-tab

  title="Tab!"

  icon="my-icon"

  href="#/tab/tab-link"

  on-select="onTabSelected()"

  on-deselect="onTabDeselected()">

</ion-tab>

API

属性 类型 详情
title 字符串

选项卡的标题。
href

(可选)
 字符串

但触碰的时候，该选项卡将会跳转的的链接。
icon

(可选)
 字符串

选项卡的图标。如果给定值，它将成为ion-on和ion-off的默认值。
icon-on

(可选)
 字符串

被选中标签的图标。
icon-off

(可选)
 字符串

没被选中标签的图标。
badge

(可选)
 表达式

选项卡上的徽章（通常是一个数字）。
badge-style

(可选)
 表达式

选项卡上微章的样式（例，tabs-positive ）。
on-select

(可选)
 表达式

选项卡被选中时触发。
on-deselect

(可选)
 表达式

选项卡取消选中时触发。
ng-click

(可选)
 表达式

通常，点击时选项卡会被选中。如果设置了 ng-Click，它将不会被选中。 你可以用$ionicTabsDelegate.select()来指定切换标签。

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

  }

}

方法

select(index, [shouldChangeHistory])

选择标签来匹配给定的索引。

参数 类型 详情
index 数值

选择标签的索引。
shouldChangeHistory

(可选)
 布尔值

此选项是否应该加载这个标签的浏览历史（如果存在），并使用，或仅加载默认页面。默认为false。提示：如果一个ion-nav-view在选项卡里，你可能需要设置它为true。

 
selectedIndex()

返回值: 数值, 被选中标签的索引，如 -1。

$getByHandle(handle)
参数 类型 详情
handle 字符串  

例如:

$ionicTabsDelegate.$getByHandle('my-handle').select(0);

完整源码：

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

    <link href="http://www.runoob.com/static/ionic/css/ionic.min.css" rel="stylesheet">

    <script src="http://www.runoob.com/static/ionic/js/ionic.bundle.min.js"></script>

    <script type="text/javascript">

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





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

        $scope.onControllerChanged = function(oldController, oldIndex, newController, newIndex) {

          console.log('Controller changed', oldController, oldIndex, newController, newIndex);

          console.log(arguments);

        };

      })









      .controller('HomeCtrl', function($scope, $timeout, $ionicModal, $ionicActionSheet) {

        $scope.items = [];





        $ionicModal.fromTemplateUrl('newTask.html', function(modal) {

          $scope.settingsModal = modal;

        });





        var removeItem = function(item, button) {

          $ionicActionSheet.show({

            buttons: [],

            destructiveText: 'Delete Task',

            cancelText: 'Cancel',

            cancel: function() {

              return true;

            },

            destructiveButtonClicked: function() {

              $scope.items.splice($scope.items.indexOf(item), 1);

              return true;

            }

          });

        };





        var completeItem = function(item, button) {

          item.isCompleted = true;

        };





        $scope.onReorder = function(el, start, end) {

          ionic.Utils.arrayMove($scope.items, start, end);

        };





        $scope.onRefresh = function() {

          console.log('ON REFRESH');





          $timeout(function() {

            $scope.$broadcast('scroll.refreshComplete');

          }, 1000);

        }









        $scope.removeItem = function(item) {

          removeItem(item);

        };





        $scope.newTask = function() {

          $scope.settingsModal.show();

        };





        // Create the items

        for(var i = 0; i < 25; i++) {

          $scope.items.push({

            title: 'Task ' + (i + 1),

            buttons: [{

              text: 'Done',

              type: 'button-success',

              onButtonClicked: completeItem,

            }, {

              text: 'Delete',

              type: 'button-danger',

              onButtonClicked: removeItem,

            }]

          });

        }





      })





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

        $scope.close = function() {

          $scope.modal.hide();

        }

      });

    </script>

    

  </head>

  <body ng-controller="RootCtrl">

    

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





      <ion-tab title="Home" 

               icon-on="ion-ios7-filing" 

               icon-off="ion-ios7-filing-outline" 

               ng-controller="HomeCtrl">

        

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

          <button class="button button-clear" ng-click="newTask()">New</button>

          <h1 class="title">Tasks</h1>

        </ion-header-bar>

        

        <ion-content has-tabs="true" on-refresh="onRefresh()">





          <ion-refresher></ion-refresher>

          <ion-list scroll="false" on-refresh="onRefresh()"

                    s-editing="isEditingItems" 

                    animation="fade-out"

                    delete-icon="icon ion-minus-circled">

            <ion-item ng-repeat="item in items"

                      item="item"

                      buttons="item.buttons"

                      can-delete="true"

                      can-swipe="true"

                      on-delete="deleteItem(item)"

                      ng-class="{completed: item.isCompleted}">

              {{item.title}}

              <i class="{{item.icon}}"></i>

            </ion-item>

          </ion-list>

        </ion-content>

      </ion-tab>





      <ion-tab title="About" icon-on="icon ion-ios7-clock" icon-off="icon ion-ios7-clock-outline">

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

          <h1 class="title">Deadlines</h1>

        </header>

        <ion-content has-header="true">

          <h1>Deadlines</h1>

        </ion-content>

      </ion-tab>





      <ion-tab title="Settings" icon-on="icon ion-ios7-gear" icon-off="icon ion-ios7-gear-outline">

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

          <h1 class="title">Settings</h1>

        </header>

        <ion-content has-header="true">

          <h1>Settings</h1>

        </ion-content>

      </ion-tab>

      

    </ion-tabs>





    <script id="newTask.html" type="text/ng-template">

      <div id="task-view" class="modal slide-in-up" ng-controller="TaskCtrl">

        <header class="bar bar-header bar-secondary">

          <h1 class="title">New Task</h1>

          <button class="button button-clear button-primary" ng-click="close()">Done</button>

        </header>

        <ion-content class="padding has-header">

          <input type="text" placeholder="I need to do this...">

        </ion-content>

      </div>

    </script>





  </body>

</html>

ionic js ion-tabs选项卡栏操作的更多相关文章

  1. Ionic Js二十：选项卡栏操作

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

  2. Ionic Js十七：侧栏菜单

    一个容器元素包含侧边菜单和主要内容.通过把主要内容区域从一边拖动到另一边,来让左侧或右侧的侧栏菜单进行切换. 效果图如下所示:   用法 要使用侧栏菜单,添加一个父元素,一个中间内容 ,和一个或更 ...

  3. Ionic Js五：单选框操作

    实例中,根据选中的不同选项,显示不同的值. HTML 代码 <ion-header-bar class="bar-positive"> <h1 class=&qu ...

  4. Ionic Js九：列表操作

    列表是一个应用广泛在几乎所有移动app中的界面元素.ionList 和 ionItem 这两个指令还支持多种多样的交互模式,比如移除其中的某一项,拖动重新排序,滑动编辑等等. <ion-list ...

  5. 基于jQuery简单实用的Tabs选项卡插件

    jQuery庞大的插件库总是让人欢喜让人忧,如何从庞大的插件库里挑出适合自己的插件,总是让很多缺少经验的朋友头疼的事!今天为大家推荐几款简单实用的Tabs选项卡插件,推荐理由:简单易用灵活,样式美观, ...

  6. Tabs - 选项卡插件

        接上篇Tabs  - 选项卡插件  其中12)Yet (E)Another Tab Interface没有依赖任何javascript框架,以作补充          9)Flipping C ...

  7. 第二百节，jQuery EasyUI，Tabs(选项卡)组件

    jQuery EasyUI,Tabs(选项卡)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 5.选项卡面板 本节课重点了解 EasyUI 中 Tabs(选项卡)组件的使用方 ...

  8. 微信小程序实现tabs选项卡

    选项卡在我们的日常开发中,使用的还是蛮多的,但是微信小程序中却没有直接提供选项卡组件,不过我们可以变通通过 scroll-view 和 swiper 组件来实现一个选项卡的功能. 需求: 实现一个选项 ...

  9. jquery Tabs选项卡切换

    效果: HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

随机推荐

  1. JOGL图形形状

    图形对象 要访问程序特定于硬件和操作系统平台,以及其他语言编写,比如C和C++(原生应用)库,Java使用一种称为Java本地接口(JNI)编程框架的工作. JOGL内部使用此接口,如图中下面的图表来 ...

  2. 021_IO流

    IO流 I——input 输入 O——Output 输出 文件 File 所有文件类的父类 创建方式 File file = new File("文件路径"); 文件对象常用的方法 ...

  3. shell提取rpm的报名

    说明: rpm本身未安装,下面方法是基于rpm包文件实现提取rpm的包名 rpm -qpi ZXVEi-git0/CgsOS/abrt-2.1.11-48.el7.centos.x86_64.rpm ...

  4. MFS分布式文件系统【4】客户端的挂载MFS存储空间

    挂载基于MooseFS 分布式文件,客户端主机必须安装FUSE软件包(FUSE版本号至少2.6,推荐版本号大于2.7的fuse) [root@master ~]# rpm -qa|grep fuse ...

  5. 三（1）、springcloud之Eureka服务注册与发现

    1.认识Eureka ​ Eureka是Netflix的一个子模块,也是核心模块之一.Eureka是一个基于REST的服务,用于定位服务,以实现云端中间层服务发现和故障转移.服务注册与发现对于微服务架 ...

  6. python全栈开放实践第三版第一章的练习题完成情况

    练习题: 1.简述编译型与解释型语言的区别,且分别列出你知道哪些语言属于编译型,哪些数以解释型.1 编译型:只须编译一次就可以把源代码编译成机器语言,后面的执行无须重新编译,直接使用之前的编译结果就可 ...

  7. 众所周知，static修饰的成员只实例化一次，而string类型每次赋值都会重新创建一个实例，那么用static修饰string呢？

    string 类型每次实例化都会重新创建一个实例: 解释:string 类型重载了运算符 “=” ,每次 “=” 操作都是一次 “new”. static 修饰符的成员只实例化一次?? 解释:这个说法 ...

  8. SpringCloud广告系统随想

    广告系统需要两个方面:一个广告投放系统,一个是广告检索系统. 两个系统针对的人群不同: 1.广告投放系统针对的是广告主,他们出资进行广告的投放,将广告的一些数据投放到系统中. 2.广告检索系统针对的是 ...

  9. 2019-9-11-.NET-Standard

    title author date CreateTime categories .NET Standard lindexi 2019-9-11 9:0:29 +0800 2019-9-11 9:0:2 ...

  10. 【学术篇】2.28测试T2 线段 拓扑排序

    题目: 思路: 看到这种找前后的题目... 第一反应就是拓扑排序_(:з」∠)_ 每条线段都有左右两个端点咯, 然后就乱搞吧.. 我们用\(i\)和\(i'\)分别表示第\(i\)条线段的左右端点.. ...