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. HDU 6697 Closest Pair of Segments (计算几何 暴力)

    2019 杭电多校 10 1007 题目链接:HDU 6697 比赛链接:2019 Multi-University Training Contest 10 Problem Description T ...

  2. CUDA编程之环境配置

    VS2015+CUDA8.0环境配置 Anyway,在这里记录下正确的配置方式: 1.首先,上官网下载对应vs版本的CUDA toolkit: https://developer.nvidia.com ...

  3. 【Linux】- Systemd 实战篇

    转自:阮一峰的网络日志 一.开机启动 对于那些支持 Systemd 的软件,安装的时候,会自动在/usr/lib/systemd/system目录添加一个配置文件. 如果你想让该软件开机启动,就执行下 ...

  4. 【小知识】神经网络中的SGD优化器和MSE损失函数

    今天来讲下之前发的一篇极其简单的搭建网络的博客里的一些细节 (前文传送门) 之前的那个文章中,用Pytorch搭建优化器的代码如下: # 设置优化器 optimzer = torch.optim.SG ...

  5. jetson nano VNC

    寻找比较好的远程桌面方式,最新系统里有写. ======================================================================= README ...

  6. Java-向上转型后调用方法和属性的注意事项

    /*多态的注意事项 (1)如果子类重写了父类方法, 意味着子类里定义的方法彻底覆盖了父类里同名的方法, 系统将不可能把父类里的方法转移到子类中 补充对(1)的个人理解: 当s向上转型传给了b, b即使 ...

  7. mongodb入门篇

    MongoDB 入门篇 分类: NoSQL, 故障解决 undefined 1.1 数据库管理系统 在了解MongoDB之前需要先了解先数据库管理系统 1.1.1 什么是数据? 数据(英语:data) ...

  8. 深度探索C++对象模型读书笔记-第七章站在对象模型的尖端

    Template 模板是在编译时期而非执行时期被计算的.因此其不会带来效率的降低. 1: const Point<float> &ref = 0; 该语句会实例化一个Point的f ...

  9. redis主从和集群搭建

    主从搭建 redis的主从搭建非常简单,打开配置文件6379.conf,只需要将主节点的protected-mode设置为no,然后在从节点配置中加入:slaveof <masterip> ...

  10. 带各位深入理解java1.8之supplier

    supplier也是是用来创建对象的,但是不同于传统的创建对象语法:new,看下面代码:public class TestSupplier { private int age; (www.0831jl ...