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. LintCode 汉诺塔

    题目链接:https://www.lintcode.com/problem/tower-of-hanoi/description 题目大意 经典递归问题. 分析 由于是经典问题了,这里不讨论用递归实现 ...

  2. PAT_A1139#First Contact

    Source: PAT A1139 First Contact (30 分) Description: Unlike in nowadays, the way that boys and girls ...

  3. React简单入门

    各位圆友,新年好!!! 使用 React 的网页源码时,首先,最后一个 <script> 标签的 type 属性为 text/babel .这是因为 React 独有的 JSX 语法,跟 ...

  4. Centos下yum安装 apache+php环境 以及redis扩赞

    一 : 安装apache 1.首先保证yum源没问题 在此不再阐述 2.安装apache yum -y install httpd 3.设置开机启动apache chkconfig --levels ...

  5. python_django_The requested URL /sunck/login/sunck/showmain/ was not found on this server.错误

    在我url匹配过程中出现了这样一个错误: 网页显示: Not Found The requested URL /sunck/login/sunck/showmain/ was not found on ...

  6. swiper-animate

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. java中的访问修饰符详解

    主要讲述一下java中protected的修饰控制范围. 在叙述protected修饰符使用之前,先来说一下java,可以发现,开发java程序是一个时时刻刻都在编写类.开发类.定义类的过程.类里面可 ...

  8. 【JZOJ6285】飘雪圣域

    description analysis 从求联通块出发根本没做法,于是考虑连通块里面的边 对于一个询问\([l,r]\),一条边的左端点\(≥l\)且右端点\(≤r\)才在这个区间的点之间 于是对于 ...

  9. 进程、线程、协程、CPU

    进程.线程.CPU 进程是计算机中的程序关于某数据集合上的一次运行活动,是系统进行资源分配和调度的基本单位,是操作系统结构的基础.或者说进程是具有一定独立功能的程序关于某个数据集合上的一次运行活动,进 ...

  10. Dll注入技术之输入法注入

    DLL注入技术之输入法注入 输入法注入原理是利用Windows系统中在切换输入法需要输入字符时,系统就会把这个输入法需要的ime文件装载到当前进程中,而由于这个Ime文件本质上只是个存放在C:\WIN ...