Axure制作：自制樹狀圖

Axure RP 8自帶的“樹”功能簡單，選項前置的圖標只能為固心猿意馬的圖標，無法實現勾選和打消的結果，所以，本身建造一條目“樹”控件很有需要……

結果如下圖所示：

東西/原料

Axure RP 8

方式/步調

1
新建2個“箭頭”圖標，4個復選框和1個動態面板。
別離定名為：
“箭頭”圖標：open_1
“箭頭”圖標：close_1
動態面板：kuang1
4個復選框別離定名為：單行輸入框、單行輸入框_1、單行輸入框_2、單行輸入框_3
----
此中動態面板尺寸是120*80
復選框尺寸100*16
---
如下圖所示：
2
此中,“圖標：close_1”是“圖標：open_1”扭轉270度的樣式。
3
按下圖擺列各個控件：
1.默認把“圖標：close_1”埋沒，并把“圖標：close_1”和“圖標：open_1”重疊在一路
2.”復選框：單行輸入框_1、單行輸入框_2、單行輸入框_3“放入"動態面板"中
3.復選框彼此距離是8
4.組合這些控件下，并定名為A01
4
復制A01組，排版如下圖所示，其他兩組別離定名為A02和A03
5
調整內容及各個控件的定名，如下圖所示：
6
設置”組合：A01“中的各個控件動作：
7
“圖標：close_1”的“鼠標單擊時”
---
1.顯示圖標：open_1
2.埋沒圖標：close_1
3.設置”動態面板：kuang1“尺寸為120*80
4.別離移動”組合：A02“和“組合：A03”的相對位置（0，72）
---
8
“圖標：open_1”的“鼠標單擊時”
---
1.顯示圖標：close_1
2.埋沒圖標：open_1
3.設置“動態面板：kuang1”尺寸為120*0
4.別離移動“組合：A02”和“組合：A03”的相對位置（0，-72）
---
9
“復選框：單行輸入框”的“鼠標單擊時”
---
設置“動態面板：kuang1”為”選中“狀況
---
10
“復選框：單行輸入框_1、單行輸入框_2、單行輸入框_3”的操作都一樣，當“打消選中時”
---
設置“復選框：單行輸入框“打消”選中“
---
11
設置“組合：A02”中的各個控件動作：
12
“圖標：close_2”的“鼠標單擊時”
---
1.顯示圖標：open_2
2.埋沒圖標：close_2
3.設置”動態面板：kuang2“尺寸為120*80
4.別離移動”組合：A03“的相對位置（0，72）
---
13
“圖標：open_2”的“鼠標單擊時”
---
1.顯示圖標：close_2
2.埋沒圖標：open_2
3.設置“動態面板：kuang2”尺寸為120*0
4.別離移動“組合：A03”的相對位置（0，-72）
---
14
“復選框：多行輸入框”的“鼠標單擊時”
---
設置“動態面板：kuang2”為”選中“狀況
---
15
“復選框：多行輸入框_1、多行輸入框_2、多行輸入框_3”的操作都一樣，當“打消選中時”
---
設置“復選框：多行輸入框“打消”選中“
---
16
設置”組合：A03“中的各個控件動作：
17
“圖標：close_3”的“鼠標單擊時”
---
1.顯示圖標：open_3
2.埋沒圖標：close_3
3.設置”動態面板：kuang3“尺寸為120*80
---
18
“圖標：open_3”的“鼠標單擊時”
---
1.顯示圖標：close_3
2.埋沒圖標：open_3
3.設置“動態面板：kuang3”尺寸為120*0
---
19
“復選框：單選框”的“鼠標單擊時”
---
設置“動態面板：kuang3”為”選中“狀況
---
20
“復選框：單選框_1、單選框_2、單選框_3”的操作都一樣，當“打消選中時”
---
設置“復選框：單選框“打消”選中“
---
21
這些設置好后，就可以看下結果了……
更多的樹狀目次，無非就是這些操作的疊加……
22
感覺不錯，對你有幫忙的話，請投個票，加個贊哦~

發表于 2018-07-19 00:00
閱讀 ( 1080 )
分類：其他類型

Axure制作：自制樹狀圖

東西/原料

方式/步調

你可能感興趣的文章

相關問題

0 條評論

作家榜 ?

推薦文章