學習要點：
1. 選項卡 : ion-tabs 簡介
2. ion-tabs 常用設(shè)置
3. ion-tabs 下面的 ion-tab ：標題文字、圖標和徽章 顯示隱藏
4. ion-tabs 事件 和 $ionicTabsDelegate
5. ion-tabs 路由詳解

從事電信機房托管，服務(wù)器租用，云主機，雅安服務(wù)器托管，主機域名，CDN，網(wǎng)絡(luò)代維等服務(wù)。

1． 選項卡 : ion-tabs簡單介紹
使用 ion-tabs 指令聲明選項卡，使用 ion-tab 聲明選項頁：

...
...
...

每個 ion-tab元素的 title屬性值將作為選項頁的標題其 內(nèi)容將填充選項卡書簽欄之外的剩余
區(qū)域（被應(yīng)用.pane 樣式）。
注意：
1. 不要把 ion-tabs 指令放在 ion-content 之內(nèi)
2. ion-tab 的內(nèi)容應(yīng)當放入 ion-view 指令內(nèi)，否則 ionic 在計算布局時可能出錯
AngularJS 編譯后， ion-tabs 元素將被應(yīng)用.tabs 樣式，因此我們可以使用 相關(guān)的樣式調(diào)整
ion-tabs 的外觀：

tab 1 content






tab 2 content






tab 3 content




2． ion-tabs常用設(shè)置
ion-tabs聲明條帶風格：

如果學習過課程： ionic 之 CSS 框架，應(yīng)該記得使用.tabs-striped 樣式可以將選項卡 聲明為條帶風格：
.tabs-standard 申明不帶條風格
...
也可以通過$ionicConfigProvider 在 AngularJS 的配置階段，將選項卡設(shè)置為條帶風格：

app.config(function($ionicConfigProvider){
$ionicConfigProvider.tabs.style("striped"); // 參數(shù)可以是： standard | striped
})

ion-tabs : 聲明位置：
如果學習過課程： ionic 之 CSS 框架，應(yīng)該記得使用.tabs-top 可以將選項卡置于 頂部標題欄之下：
...
也可以通過$ionicConfigProvider，在配置階段設(shè)置選項卡的位置是在頂部還是底部：

app.config(function($ionicConfigProvider){
$ionicConfigProvider.tabs.position("top"); //參數(shù)可以是： top | bottom
});

3． ion-tabs下面的 ion-tab： 標題文字、圖標和徽章顯示隱藏
ion-tab 指令有以下屬性用于設(shè)置文本、圖標和徽章：
title - 標題文字

標題文字是必須的。該屬性值將作為選項頁的標題文字。

icon - 標題圖標
使用 icon 屬性是可選的，該屬性值將用來在標題文字旁邊添加一個指定的圖標。 這個屬性的值將被作為
icon-on 和 icon-off 的默認值

icon-on - 被選中狀態(tài)的標題圖標
如果一個選項頁被選中， ion-tabs 將使用 icon-on 屬性的值繪制圖標。如果 icon-on 沒有設(shè)置，那么
ion-tabs 就使用 icon 屬性的值繪制圖標

icon-off - 未選中狀態(tài)的標題圖標
如果一個選項頁沒有被選中， ion-tabs 將使用 icon-off 屬性的值繪制圖標。如果 icon-off 沒有設(shè)置，那
么 ion-tabs 就使用 icon 屬性的值繪制圖標

badge - 標題徽章
ion-tabs 使用 badge 屬性的值在標題文字旁邊添加一個圓形的文字標識，通常用來 顯示數(shù)字。這個屬性
是可選的，可以是一個具體的值，也可以是當前作用域上的 一個變量

badge-style - 標題徽章樣式
使用 badge-style 屬性設(shè)置徽章的樣式， 比如配色方案： barge-{color}
hidden - 隱藏
hidden 屬性是當前作用域上的表達式。 當其值為 true 時，選項頁將不可見
disabled - 禁止
disabled 屬性是當前作用域上的表達式。當值為 true 時，選項頁將不響應(yīng) 用戶的點擊

home tab

settings tab

4． ion-tabs事件 和 $ionicTabsDelegate
1.ion-tab 事件：
on-select - 選中事件
可選。選項頁從未選中狀態(tài)切換到選中狀態(tài)時執(zhí)行此表達式
on-deselect - 未選中事件
可選。選項頁從選中狀態(tài)切換到未選中狀態(tài)時執(zhí)行此表達式
ng-click - 點擊事件
可選。選項頁被點擊時執(zhí)行此表達式。如果這個屬性被設(shè)置，那么 ion-tabs 將不會 自動切換選項頁，調(diào)
用者需要手動調(diào)用$ionicTabsDelegate 的 select()方法進行 選項頁切換

2.ionicTabsDelegate

使用$ionicTabsDelegate 服務(wù)，我們可以在腳本中控制選項卡對象：
select(index) - 選中指定的選項頁
index 參數(shù)從 0 開始，第一個選項頁的 index 為 0，第二個為 1，依次類推。

selectedIndex() - 返回當前選中選項頁的索引號
如果當前沒有選中的選項頁，則返回 -1。

angular.module("ezApp",["ionic"])
.controller("ezCtrl",function($scope,$ionicTabsDelegate,$interval){
var idx=0;
$interval(function(){
idx = (idx + 1) % 3;
$ionicTabsDelegate.select(idx);
},2000);
});

5． ion-tabs路由詳解
1.觸發(fā)狀態(tài)遷移的幾種方式（通俗的講就是頁面跳轉(zhuǎn)的幾種方式）
1. 調(diào)用$state.go() 方法，這是一個高級的便利方法；
2. 點擊包含 ui-sref 指令的鏈接 Go State 1
3. 導航到與狀態(tài)相關(guān)聯(lián)的 url。
2. 通過 href 方式頁面切換需要指定 url

var app = angular.module("myApp", ["ionic"]);
app.config(function($stateProvider,$urlRouterProvider) {
$stateProvider
.state("home", {
url: "/home",
templateUrl: "home.html",
controller:'homeController'
})
.state("music", {
url: "/music",
templateUrl: "music.html",
controller:'musicController'
});
})
.controller("myCtrl",function($scope,$state){
$state.go("home");
})
//
.controller("homeController",function($scope){
console.log('home');
})

.controller("musicController",function($scope){
console.log('music');
})

3. ionic 中結(jié)合 tab 狀態(tài)嵌套的幾種方式
狀態(tài)可以相互嵌套。有三個嵌套的方法：
1.使用“點標記法”，例如： .state('contacts.list', {})
2.使用 parent 屬性，指定一個父狀態(tài)的名稱字符串，例如： parent: 'contacts'
3.使用 parent 屬性，指定一個父狀態(tài)對象，例如： parent: contacts（ contacts 是一個狀態(tài)對象）
1.點標記法
在$stateProvider 中可以使用點語法來表示層次結(jié)構(gòu)，下面， contacts.list 是 contacts 的子狀態(tài)。

$stateProvider
.state('contacts', {})
.state('contacts.list', {});

2.使用 parent 屬性，指定一個父狀態(tài)的名稱字符串
$stateProvider
.state('contacts', {})
.state('list', {
parent: 'contacts'
});
3.基于對象的狀態(tài)
如果你不喜歡使用基于字符串的狀態(tài)，您還可以使用基于對象的狀態(tài)。 name 屬性將在狀態(tài)對象內(nèi)部設(shè)
置，在所有的子狀態(tài)對象中設(shè)置 parent 屬性為父狀態(tài)對象，像下面這樣：

var contacts = {
name: 'contacts', //mandatory
templateUrl: 'contacts.html'
}
var contactsList = {
name: 'list', //mandatory
parent: contacts, //mandatory
templateUrl: 'contacts.list.html'
}
$stateProvider
.state(contacts)
.state(contactsList)
4. ionic 路由結(jié)合 tap 實現(xiàn)頁面切換
1. 在 ionic tab 中定義 ion-nav-view 并且加上 name 屬性

icon-on="ion-ios-pulse-strong" href="#/news/list">



icon-on="ion-ios-chatboxes" href="#/news/content">



2. 在 ionic $stateProvider.state 中定義 view 并對應(yīng) ion-nav-view 中的 name 屬性
$stateProvider.state('news', {
url: "/news",
abstract:true,
templateUrl: "templates/news.html"
})
.state('news.list', {
url: '/list',
views: {
'news-list': {
templateUrl: 'templates/news-list.html'
}
}
})
5. ionic states 抽象狀態(tài) abstract
一個抽象的狀態(tài)可以有子狀態(tài)但不能顯式激活，它將被隱性激活當其子狀態(tài)被激活時。
下面是兩個最常用的抽象狀態(tài)的示例：
為所有子狀態(tài)預提供一個基 url
在父狀態(tài)中設(shè)置 template 屬性，子狀態(tài)對應(yīng)的模板將插入到父狀態(tài)模板中的 ui-view(s)中

交流QQ群：187269144 

QQ群2：438443293

QQ群3：248403526