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. 文本表征：SoW、BoW、TF-IDF、Hash Trick、doc2vec、DBoW、DM

    原文地址:https://www.jianshu.com/p/2f2d5d5e03f8 一.文本特征 (一)基本文本特征提取 词语数量 常,负面情绪评论含有的词语数量比正面情绪评论更多. 字符数量 常 ...

  2. 改变IntelliJ IDEA 中的system和config/plugins的默认C盘的路径

    1,问题,在为idea在线安装插件时,如JProfiler,会默认安装到C盘,而本人则是希望安装到软件所在的D盘目录下,那么如何修改呢: C:\Users\xxx\.IntelliJIdea\conf ...

  3. 1089 Insert or Merge (25 分)

    According to Wikipedia: Insertion sort iterates, consuming one input element each repetition, and gr ...

  4. iptables简介及常用命令

    相关文件 iptables服务配置文件 -rw-------. 1 root root 2374 9月 4 2017 /etc/sysconfig/iptables-config iptables规则 ...

  5. [已解决]windows安装docker的问题

    windows下载安装docker出现的问题 进入powershell后输入docker --version报错: could not read CA certificate "C:\\Us ...

  6. pytest-mark跳过

    import pytestimport sysenvironment='android' @pytest.mark.skipif(environment=="android",re ...

  7. 在Linux下如果要使用接口标志要加什么头文件吗？因为我在使用IFF_UP时会出错，说是未定义

    头文件一般放在/usr/include目录下,用grep 'IFF_UP' /usr/include/*.* |less这个命令查找一下在哪个头文件里面有定义.   追问 嗯~这个方法确实可以查找到一 ...

  8. boost 实现读写锁

    #include <boost/thread/shared_mutex.hpp> #include <boost/thread/locks.hpp> using BoostMu ...

  9. win10 快速访问存在 2345Downloads 删除解决方案

    有时候重装新系后统会发有很多自己不喜欢的捆绑程序,比如2345辣鸡浏览器 这个时候很多人会选择卸载,然后把文件夹位置删除 但是删除后会发现有一个地方一直还在那就是现快速访问的位置里面 这个位置由于卸载 ...

  10. [原创]Delphi 文件函数：ForceDirectories() 函数和 CreateDir函数

    引用单元:SysUtils function ForceDirectories(Dir: string): Boolean;    //创建多级目录  父目录不必存在   (Force 有暴力.强制的 ...