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

1、第十七講 ionic 側(cè)邊欄ion-side-欄詳解s 以及ion-tap 結(jié)合側(cè)邊學(xué)習(xí)要點(diǎn)：1. 側(cè)邊欄菜單 : ion-side-s2. 側(cè)邊欄打開(kāi)關(guān)閉 切換指令 :-toggle/-close3. 主區(qū)域容器 ion-side-content 屬性設(shè)置4. 側(cè)邊欄區(qū)域容器 : ion-side-中控制側(cè)邊欄菜單接口 : $ionicSide5.Delegate6. ion-tap 結(jié)合 ion-side-s 一起使用主講教師：（樹(shù)根）合作： (PhoneGap 中文網(wǎng))合作：(IT 營(yíng))1側(cè)邊欄菜單 : ion-side-s側(cè)邊欄菜單是一個(gè)最多包含三個(gè)子容器的元素：默認(rèn)情況下，側(cè)邊欄菜單

2、將只顯示 ion-side-content 容器的內(nèi)容。向左滑動(dòng)時(shí)，將顯容器的內(nèi)容。示右邊欄 ion-side-容器的內(nèi)容，向右滑動(dòng)時(shí)，將顯示左邊欄 ion-side-在 ionic 中，使用 ion-side-s 指令定義側(cè)邊欄菜單：2側(cè)邊欄打開(kāi)關(guān)閉切換指令 :-toggle/-close-toggle 指令用來(lái)給元素增加切換側(cè)欄內(nèi)容顯示狀態(tài)的功能：-close 指令用來(lái)給元素增加關(guān)閉側(cè)欄內(nèi)容的功能：-toggle 指令不同，-close 不需要指定要關(guān)閉的側(cè)欄是哪一邊，它直接將當(dāng)前打開(kāi)的側(cè)欄關(guān)閉。3 ion-side-content 屬性設(shè)置使用指令ion-side-content側(cè)邊欄菜

3、單的主顯示區(qū)域容器：.ion-side-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è)欄。邊距檢測(cè)，可以在內(nèi)容區(qū)域的任何地方

4、拖動(dòng)來(lái)打開(kāi)4側(cè)邊欄區(qū)域容器屬性: ion-side-使用指令 ion-side-側(cè)邊欄區(qū)域容器：.ion-side-指令有以下屬性：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è)欄菜單。exe-aside-when - 側(cè)邊欄自動(dòng)顯示

5、條件表達(dá)式默認(rèn)情況下，側(cè)邊欄是隱藏的，需要用戶向左或向右拖動(dòng)內(nèi)容，或者通過(guò)一個(gè)切換按鈕來(lái)打開(kāi)。 但是在有些場(chǎng)景下（比如，橫放的平板）屏幕寬度足夠大，這時(shí)，自動(dòng)地顯示側(cè)邊欄內(nèi)容會(huì)更 合理。exe-aside-when 屬性就是處理這種情況的，和 CSS3 的meida 類似，exe-aside-when 需要 一個(gè)CSS表達(dá)式，例如：ex示側(cè)欄菜單。e-aside-when=(min-width:500px)，這意味著當(dāng)屏幕寬度大于 500px 時(shí)將自動(dòng)顯ionic 為 exe-aside-when 提供了一個(gè)快捷選項(xiàng)：large ， 這等同于 (min-width:768px)。5中控制側(cè)邊欄

6、菜單接口 : $ionicSideDelegate中控制側(cè)邊欄菜單接口，可以使用服務(wù)$ionicSideDelegate：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() -

7、當(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ā)生的位置距邊框不大