ionic側(cè)邊欄 ion-side-menus 以及 ion-tap結(jié)合側(cè)邊 欄詳解

學(xué)習(xí)要點(diǎn)：
1. 側(cè)邊欄菜單 : ion-side-menus
2. 側(cè)邊欄打開(kāi)關(guān)閉 切換指令 : menu-toggle/menu-close
3. 主區(qū)域容器 ion-side-menu-content 屬性設(shè)置
4. 側(cè)邊欄區(qū)域容器 : ion-side-menu
5. 腳本中控制側(cè)邊欄菜單接口 : $ionicSideMenuDelegate
6. ion-tap 結(jié)合 ion-side-menus 一起使用

1． 側(cè)邊欄菜單 : ion-side-menus
側(cè)邊欄菜單是一個(gè)最多包含三個(gè)子容器的元素：

默認(rèn)情況下，側(cè)邊欄菜單將只顯示 ion-side-menu-content 容器的內(nèi)容。向左 滑動(dòng)時(shí)，將顯
示右邊欄 ion-side-menu 容器的內(nèi)容，向右滑動(dòng)時(shí)，將顯示左邊欄 ion-side-menu 容器的內(nèi)容。

在 ionic 中，使用 ion-side-menus 指令定義側(cè)邊欄菜單：
<ion-side-menus>
<!-- 中間內(nèi)容 -->
<ion-side-menu-content ng-controller="ContentController">
</ion-side-menu-content>
<!-- 左側(cè)菜單 -->
<ion-side-menu side="left">
</ion-side-menu>
<!-- 右側(cè)菜單 -->
<ion-side-menu side="right">
</ion-side-menu>
</ion-side-menus>

2． 側(cè)邊欄打開(kāi)關(guān)閉切換指令 : menu-toggle/menu-close
menu-toggle 指令用來(lái)給元素增加切換側(cè)欄內(nèi)容顯示狀態(tài)的功能：
<!--切換左側(cè)欄顯示狀態(tài)-->
<any menu-toggle="left"></any>
<!--切換右側(cè)欄顯示狀態(tài)-->
<any menu-toggle="right"></any>
menu-close 指令用來(lái)給元素增加關(guān)閉側(cè)欄內(nèi)容的功能：

<any menu-close=""></any>
與 menu-toggle 指令不同， menu-close 不需要指定要關(guān)閉的側(cè)欄是哪一邊，它 直接將當(dāng)前
打開(kāi)的側(cè)欄關(guān)閉。

3． ion-side-menu-content 屬性設(shè)置
使用指令 ion-side-menu-content 聲明側(cè)邊欄菜單的主顯示區(qū)域容器：

<ion-side-menu-content>...</ion-side-menu-content>
ion-side-menu-content 指令有以下可選屬性：

drag-content - 是否允許拖動(dòng)內(nèi)容打開(kāi)側(cè)欄菜單，默認(rèn)為 true。
允許值： true | false。當(dāng)設(shè)置為 false 時(shí)，將禁止通過(guò)拖動(dòng)內(nèi)容打開(kāi)側(cè)欄菜單。
edge-drag-threshold - 是否啟用邊距檢測(cè)。默認(rèn)為 false。
允許值： number | true | false。

如果設(shè)置為一個(gè)正數(shù)，那么只有當(dāng)拖動(dòng)發(fā)生在距離邊界小于這個(gè)數(shù)值的情況下， 才觸發(fā)側(cè)
欄顯示。 當(dāng)設(shè)置為 true 時(shí)，使用默認(rèn)的 25px 作為邊距閾值。
如果設(shè)置為 false 或 0，則意味著禁止邊距檢測(cè)，可以在內(nèi)容區(qū)域的任何地方 拖動(dòng)來(lái)打開(kāi)
側(cè)欄。

4． 側(cè)邊欄區(qū)域容器 : ion-side-menu 屬性
使用指令 ion-side-menu 聲明側(cè)邊欄區(qū)域容器：
<ion-side-menu>...</ion-side-menu>
ion-side-menu 指令有以下屬性：
side - 位于內(nèi)容區(qū)的左邊或右邊
side 屬性是必須的。允許值： left | right。默認(rèn)值為 left。

width - 側(cè)邊欄的寬度 width 屬性是可選的，表示以像素為單位的側(cè)欄菜單寬度。默認(rèn)為 275px。

is-enabled - 是否可用
is-enabled 屬性是可選的，聲明該側(cè)邊欄是否可用，允許值為： true | false ，默認(rèn)為 true。 當(dāng)側(cè)邊欄
不可用時(shí)，拖拽內(nèi)容或使用切換按鈕都無(wú)法打開(kāi)側(cè)欄菜單。
expose-aside-when - 側(cè)邊欄自動(dòng)顯示條件表達(dá)式
默認(rèn)情況下，側(cè)邊欄是隱藏的，需要用戶向左或向右拖動(dòng)內(nèi)容，或者通過(guò)一個(gè)切換按鈕來(lái)打開(kāi)。 但是在有
些場(chǎng)景下（比如，橫放的平板）屏幕寬度足夠大，這時(shí)，自動(dòng)地顯示側(cè)邊欄內(nèi)容會(huì)更 合理。
expose-aside-when 屬性就是處理這種情況的，和 CSS3 的@meida 類似， expose-aside-when 需要 一個(gè) CSS
表達(dá)式，例如： expose-aside-when="(min-width:500px)"，這意味著當(dāng)屏幕寬度大于 500px 時(shí)將自動(dòng)顯
示側(cè)欄菜單。

ionic 為 expose-aside-when 提供了一個(gè)快捷選項(xiàng)： large ， 這等同于 (min-width:768px)。

5． 腳本中控制側(cè)邊欄菜單接口 : $ionicSideMenuDelegate
腳本中控制側(cè)邊欄菜單接口，可以使用服務(wù)$ionicSideMenuDelegate：
toggleLeft([isOpen]) - 是否打開(kāi)左側(cè)欄菜單
參數(shù) isOpen 是可選的，默認(rèn)為 true ，表示打開(kāi)左側(cè)欄菜單。

toggleRight([isOpen]) - 是否打開(kāi)右側(cè)欄菜單
參數(shù) isOpen 是可選的，默認(rèn)為 true ，表示打開(kāi)右側(cè)欄菜單。

getOpenRatio() - 側(cè)欄菜單打開(kāi)的寬度占其總寬度比例
例如，一個(gè) 100px 寬的側(cè)欄菜單，如果打開(kāi) 50px，那么其比例為 50%， getOpenRatio()將 返回 0.5 。
isOpen() - 當(dāng)前側(cè)欄菜單是否打開(kāi)
不管是左側(cè)欄菜單，還是右側(cè)欄菜單，只要處于打開(kāi)狀態(tài)， isOpen()都返回 true。

isOpenLeft() - 左側(cè)欄菜單是否打開(kāi)
當(dāng)左側(cè)欄菜單處于打開(kāi)狀態(tài)時(shí)， isOpenLeft()返回 true。
isOpenRight() - 右側(cè)欄菜單是否打開(kāi)
當(dāng)右側(cè)欄菜單處于打開(kāi)狀態(tài)時(shí)， isOpenRight()返回 true。
canDragContent([canDrag]) - 是否允許拖拽內(nèi)容以打開(kāi)側(cè)欄菜單

canDrag 參數(shù)是可選的，如果 canDrag 為 true，表示允許通過(guò)拖拽內(nèi)容打開(kāi)側(cè)欄菜單。
edgeDragThreshold(value) - 設(shè)置邊框距離閾值
當(dāng)參數(shù) value 為 false 或 0 時(shí)，意味著在內(nèi)容區(qū)域任何位置進(jìn)行拖拽都可以打開(kāi)側(cè)欄菜單。 如果參
數(shù) value 為一個(gè)數(shù)值，意味著只有當(dāng)拖拽發(fā)生的位置距邊框不大于此數(shù)值時(shí)，才能打開(kāi) 側(cè)欄菜單。 參
數(shù) value 為 true 等同于將 value 設(shè)置為 25。

6． 腳本 ion-tap 結(jié)合 ion-side-menus 一起使用

交流QQ群：187269144 

QQ群2：438443293

QQ群3：248403526