ionic ion-tap 選項(xiàng)卡以及 路由結(jié)合 ion-tap 詳解

學(xué)習(xí)要點(diǎn)：
1. 選項(xiàng)卡 : ion-tabs 簡(jiǎn)介
2. ion-tabs 常用設(shè)置
3. ion-tabs 下面的 ion-tab ：標(biāo)題文字、圖標(biāo)和徽章 顯示隱藏
4. ion-tabs 事件 和 $ionicTabsDelegate
5. ion-tabs 路由詳解

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

<ion-tabs>
<ion-tab title="tab1">
<ion-view>
<ion-content class="calm-bg">
tab 1 content
</ion-content>
</ion-view>
</ion-tab>
<ion-tab title="tab2">
<ion-view>
<ion-content class="balanced-bg">
tab 2 content
</ion-content>
</ion-view>
</ion-tab>
<ion-tab title="tab3">
<ion-view>
<ion-content class="energized-bg">
tab 3 content
</ion-content>
</ion-view>
</ion-tab>
</ion-tabs>
2． ion-tabs 常用設(shè)置
ion-tabs 聲明條帶風(fēng)格：

如果學(xué)習(xí)過(guò)課程： ionic 之 CSS 框架，應(yīng)該記得使用.tabs-striped 樣式可以將選項(xiàng)卡 聲明為條帶風(fēng)格：
.tabs-standard 申明不帶條風(fēng)格
<ion-tabs class="tabs-striped">...</ion-tabs>
也可以通過(guò)$ionicConfigProvider 在 AngularJS 的配置階段，將選項(xiàng)卡設(shè)置為條帶風(fēng)格：

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

ion-tabs : 聲明位置：
如果學(xué)習(xí)過(guò)課程： ionic 之 CSS 框架，應(yīng)該記得使用.tabs-top 可以將選項(xiàng)卡置于 頂部標(biāo)題欄之下：
<ion-tabs class="tabs-top">...</ion-tabs>
也可以通過(guò)$ionicConfigProvider，在配置階段設(shè)置選項(xiàng)卡的位置是在頂部還是底部：

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

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

標(biāo)題文字是必須的。該屬性值將作為選項(xiàng)頁(yè)的標(biāo)題文字。

icon - 標(biāo)題圖標(biāo)
使用 icon 屬性是可選的，該屬性值將用來(lái)在標(biāo)題文字旁邊添加一個(gè)指定的圖標(biāo)。 這個(gè)屬性的值將被作為
icon-on 和 icon-off 的默認(rèn)值

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

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

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

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

<ion-tabs class="tabs-positive tabs-icon-top">
<ion-tab title="Home" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">
<ion-view>
<ion-header-bar class="bar-positive">
<h2 class="title">home tab</h2>
</ion-header-bar>
<ion-content>
<p>home content</p>
</ion-content>
</ion-view>
</ion-tab>
<ion-tab title="About" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline" badge="12"
badge->
<ion-view>
<ion-header-bar class="bar-positive">
<h2 class="title">about tab</h2>
</ion-header-bar>
<ion-content>
<p>about content</p>
</ion-content>
</ion-view>
</ion-tab>

<ion-tab title="Settings" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline">
<ion-view>
<ion-header-bar class="bar-positive">
<h2 class="title">settings tab</h2>
</ion-header-bar>
<ion-content>
<p>settings content</p>
</ion-content>
</ion-view>
</ion-tab>
</ion-tabs>

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

2.ionicTabsDelegate

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

selectedIndex() - 返回當(dāng)前選中選項(xiàng)頁(yè)的索引號(hào)
如果當(dāng)前沒(méi)有選中的選項(xiàng)頁(yè)，則返回 -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)遷移的幾種方式（通俗的講就是頁(yè)面跳轉(zhuǎn)的幾種方式）
1. 調(diào)用$state.go() 方法，這是一個(gè)高級(jí)的便利方法；
2. 點(diǎn)擊包含 ui-sref 指令的鏈接 <a ui-sref="state1">Go State 1</a>
3. 導(dǎo)航到與狀態(tài)相關(guān)聯(lián)的 url。
2. 通過(guò) href 方式頁(yè)面切換需要指定 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');
})
</script>

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

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

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

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 實(shí)現(xiàn)頁(yè)面切換
1. 在 ionic tab 中定義 ion-nav-view 并且加上 name 屬性
<ion-nav-view name="news-list"></ion-nav-view>
<ion-tabs class="tabs-icon-top tabs-positive">
<!-- Dashboard Tab -->
<ion-tab title="list" icon-off="ion-ios-pulse"

icon-on="ion-ios-pulse-strong" href="#/news/list">
<ion-nav-view name="news-list"></ion-nav-view>
</ion-tab>
<!-- Chats Tab -->
<ion-tab title="content" icon-off="ion-ios-chatboxes-outline"
icon-on="ion-ios-chatboxes" href="#/news/content">
<ion-nav-view name="news-content"></ion-nav-view>
</ion-tab>
</ion-tabs>
2. 在 ionic $stateProvider.state 中定義 view 并對(duì)應(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
一個(gè)抽象的狀態(tài)可以有子狀態(tài)但不能顯式激活，它將被隱性激活當(dāng)其子狀態(tài)被激活時(shí)。
下面是兩個(gè)最常用的抽象狀態(tài)的示例：
為所有子狀態(tài)預(yù)提供一個(gè)基 url
在父狀態(tài)中設(shè)置 template 屬性，子狀態(tài)對(duì)應(yīng)的模板將插入到父狀態(tài)模板中的 ui-view(s)中

交流QQ群：187269144 

QQ群2：438443293

QQ群3：248403526