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. UVA 1525 Falling Leaves

    题目链接:https://vjudge.net/problem/UVA-1525 题目链接:https://vjudge.net/problem/POJ-1577 题目大意 略. 分析 建树,然后先序 ...

  2. yield迭代器的使用

    class Program { static void Main(string[] args) { List<Student> students = new List<Student ...

  3. RTL_PROCESS_MODULE_INFORMATION

    typedef struct _RTL_PROCESS_MODULE_INFORMATION { HANDLE Section; // Not filled in PVOID MappedBase; ...

  4. ubuntu16.04安装python虚拟环境

    自己也是搜的教程,亲测有效 ubuntu16.04创建虚拟环境 一.linux环境 Ubuntu16.04 二.安装和配置虚拟环境 安装虚拟环境 sudo pip install virtualenv ...

  5. MYSql 存储过程自定义跳出

    MYSql存储过程自定义跳出 我们有时会在存储过程中进行一些判断,当判断条件达成时候我们有时会直接跳出存储过程. 但是存储过程不支持return直接返回的操作, 所以我们只能采用另一种方法,'leav ...

  6. Center OS 7 Apache安装配置

    感谢:https://blog.csdn.net/u014157384/article/details/79497761 该作者的帮助. 自己购买了国外的服务器,想把我的网页放到服务器,网页是以web ...

  7. HIVE常用SQL语句及语法

    HIVE建内部表语句 create table dll102.sougou (id string,pwd string,name string,count int,seqno int,address ...

  8. TPCx-BB官宣最新世界纪录，阿里巴巴计算力持续突破

    2019年9月17日,TPC官宣Alibaba Cloud MaxCompute认证结果.同月26日,杭州云栖大会阿里巴巴宣布了这一成绩,飞天大数据平台计算引擎MaxCompute成为全球首个TPCx ...

  9. PHP PDO 大对象 (LOBs)

    应用程序在某一时刻,可能需要在数据库中存储"大"数据. "大"通常意味着"大约 4kb 或以上",尽管某些数据库在数据达到"大&q ...

  10. php给每个数组元素加上前缀

    比如原数组是 array('1','2','3','4'); 我需要得到的结果 array('aaa1','aaa2','aaa3','aaa4'); 用内置函数如何实现? array_walk() ...