ion-tabs 是有一组页面选项卡组成的选项卡栏。可以通过点击选项来切换页面。
对于 iOS，它会出现在屏幕的底部，Android会出现在屏幕的顶部(导航栏下面)。
| <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>芝麻教程(web3.xin)</title> |
| <link href="//cdn.bootcss.com/ionic/1.3.1/css/ionic.min.css" rel="stylesheet"> |
| <script src="//cdn.bootcss.com/ionic/1.3.1/js/ionic.bundle.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> |
| 属性 | 类型 | 详情 |
|---|---|---|
|
delegate-handle
(可选)
|
字符串
|
该句柄用 |
隶属于ionTabs
包含一个选项卡内容。该内容仅存在于被选中的给定选项卡中。
每个ionTab都有自己的浏览历史。
| <ion-tab |
| title="Tab!" |
| icon="my-icon" |
| href="#/tab/tab-link" |
| on-select="onTabSelected()" |
| on-deselect="onTabDeselected()"> |
| </ion-tab> |
| 属性 | 类型 | 详情 |
|---|---|---|
| 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()来指定切换标签。 |
授权控制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。提示：如果一个 |
| selectedIndex() |
返回值: 数值, 被选中标签的索引，如 -1。
| $getByHandle(handle) |
| 参数 | 类型 | 详情 |
|---|---|---|
| handle |
字符串
|
例如:
| $ionicTabsDelegate.$getByHandle('my-handle').select(0); |
