Axure網(wǎng)頁(yè)怎么添加樹(shù)狀控件?
我要評(píng)論Axure RP 8中想要制作一個(gè)樹(shù)狀的折疊菜單，該怎么制作呢？我們可以使用Axure自帶的“樹(shù)”功能實(shí)現(xiàn)，請(qǐng)看下文詳細(xì)介紹。
Axure RP v8.1.0.3382 Enterprise 中文特別版(附注冊(cè)機(jī)+漢化包+安裝教程)
- 類(lèi)型：輔助設(shè)計(jì)
- 大?。?/span>83.2MB
- 語(yǔ)言：簡(jiǎn)體中文
- 時(shí)間：2019-04-26
1、新建2個(gè)“箭頭”圖標(biāo)，4個(gè)復(fù)選框和1個(gè)動(dòng)態(tài)面板。
分別命名為：
“箭頭”圖標(biāo)：open_1
“箭頭”圖標(biāo)：close_1
動(dòng)態(tài)面板：kuang1
4個(gè)復(fù)選框分別命名為：?jiǎn)涡休斎肟颉涡休斎肟騙1、單行輸入框_2、單行輸入框_3
其中動(dòng)態(tài)面板尺寸是120*80
復(fù)選框尺寸100*16
如下圖所示：
2、其中,“圖標(biāo)：close_1”是“圖標(biāo)：open_1”旋轉(zhuǎn)270度的樣式。
3、按下圖排列各個(gè)控件：
1）默認(rèn)把“圖標(biāo)：close_1”隱藏，并把“圖標(biāo)：close_1”和“圖標(biāo)：open_1”重疊在一起
2）”復(fù)選框：?jiǎn)涡休斎肟騙1、單行輸入框_2、單行輸入框_3“放入"動(dòng)態(tài)面板"中
3）復(fù)選框相互間隔是8
4）組合這些控件下，并命名為A01
4、復(fù)制A01組，排版如下圖所示，其他兩組分別命名為A02和A03
5、調(diào)整內(nèi)容及各個(gè)控件的命名，如下圖所示：
6、設(shè)置”組合：A01“中的各個(gè)控件動(dòng)作：
7、“圖標(biāo)：close_1”的“鼠標(biāo)單擊時(shí)”
1）顯示圖標(biāo)：open_1
2）隱藏圖標(biāo)：close_1
3）設(shè)置”動(dòng)態(tài)面板：kuang1“尺寸為120*80
4）分別移動(dòng)”組合：A02“和“組合：A03”的相對(duì)位置（0，72）
8、“圖標(biāo)：open_1”的“鼠標(biāo)單擊時(shí)”
1）顯示圖標(biāo)：close_1
2）隱藏圖標(biāo)：open_1
3）設(shè)置“動(dòng)態(tài)面板：kuang1”尺寸為120*0
4）分別移動(dòng)“組合：A02”和“組合：A03”的相對(duì)位置（0，-72）
9、“復(fù)選框：?jiǎn)涡休斎肟?/strong>”的“鼠標(biāo)單擊時(shí)”
設(shè)置“動(dòng)態(tài)面板：kuang1”為”選中“狀態(tài)
10、“復(fù)選框：?jiǎn)涡休斎肟騙1、單行輸入框_2、單行輸入框_3”的操作都一樣，當(dāng)“取消選中時(shí)”
設(shè)置“復(fù)選框：?jiǎn)涡休斎肟?ldquo;取消”選中“
11、設(shè)置“組合：A02”中的各個(gè)控件動(dòng)作：
12、“圖標(biāo)：close_2”的“鼠標(biāo)單擊時(shí)”
1）顯示圖標(biāo)：open_2
2）隱藏圖標(biāo)：close_2
3）設(shè)置”動(dòng)態(tài)面板：kuang2“尺寸為120*80
4）分別移動(dòng)”組合：A03“的相對(duì)位置（0，72）
13、“圖標(biāo)：open_2”的“鼠標(biāo)單擊時(shí)”
1）顯示圖標(biāo)：close_2
2）隱藏圖標(biāo)：open_2
3）設(shè)置“動(dòng)態(tài)面板：kuang2”尺寸為120*0
4）分別移動(dòng)“組合：A03”的相對(duì)位置（0，-72）
14、“復(fù)選框：多行輸入框”的“鼠標(biāo)單擊時(shí)”，設(shè)置“動(dòng)態(tài)面板：kuang2”為”選中“狀態(tài)
15、“復(fù)選框：多行輸入框_1、多行輸入框_2、多行輸入框_3”的操作都一樣，當(dāng)“取消選中時(shí)”，設(shè)置“復(fù)選框：多行輸入框“取消”選中“。
16、設(shè)置”組合：A03“中的各個(gè)控件動(dòng)作：
17、“圖標(biāo)：close_3”的“鼠標(biāo)單擊時(shí)”
1）顯示圖標(biāo)：open_3
2）隱藏圖標(biāo)：close_3
3）設(shè)置”動(dòng)態(tài)面板：kuang3“尺寸為120*80
18、“圖標(biāo)：open_3”的“鼠標(biāo)單擊時(shí)”
1）顯示圖標(biāo)：close_3
2）隱藏圖標(biāo)：open_3
3）設(shè)置“動(dòng)態(tài)面板：kuang3”尺寸為120*0
19、“復(fù)選框：?jiǎn)芜x框”的“鼠標(biāo)單擊時(shí)”，設(shè)置“動(dòng)態(tài)面板：kuang3”為”選中“狀態(tài)
20、“復(fù)選框：?jiǎn)芜x框_1、單選框_2、單選框_3”的操作都一樣，當(dāng)“取消選中時(shí)”，設(shè)置“復(fù)選框：?jiǎn)芜x框“取消”選中“。
21、這些設(shè)置好后，就可以看下效果了。更多的樹(shù)狀目錄，無(wú)非就是這些操作的疊加。
以上就是Axure制作樹(shù)狀折疊菜單的教程，希望大家喜歡，請(qǐng)繼續(xù)關(guān)注腳本之家。
相關(guān)推薦：
Axure RP 8怎么設(shè)計(jì)有漂亮圖標(biāo)的樹(shù)狀菜單?
相關(guān)文章
Axure設(shè)計(jì)的登陸頁(yè)面怎么生成網(wǎng)頁(yè)原型?
Axure設(shè)計(jì)的登陸頁(yè)面怎么生成網(wǎng)頁(yè)原型？Axure中設(shè)計(jì)的登陸網(wǎng)頁(yè)想要直接生成網(wǎng)頁(yè)原型，該怎么生成呢？下面我們就來(lái)看看詳細(xì)的教程，需要的朋友可以參考下2018-01-10
Axure文件怎么生成html分享鏈接？Axure中設(shè)計(jì)的模型想要分享給朋友觀看，該怎么生成html鏈接呢？下面我們就來(lái)看看2017-12-21
Axure RP怎么制作選項(xiàng)卡控件？網(wǎng)頁(yè)需要選項(xiàng)卡控件，但是Axure RP中沒(méi)有選項(xiàng)卡控件，該怎么制作呢？下面我們就來(lái)看看詳細(xì)的教程，需要的朋友可以參考下2017-12-21
Axure rp怎么設(shè)計(jì)微信的交互界面？Axure中想要設(shè)計(jì)一個(gè)網(wǎng)頁(yè)交互的效果，該怎么制作呢？下面我們就來(lái)看看Axure設(shè)計(jì)微信交互界面的教程，需要的朋友可以參考下2017-12-17
axure頁(yè)面載入時(shí)自動(dòng)選中按鈕該怎么實(shí)現(xiàn)?
axure頁(yè)面載入時(shí)自動(dòng)選中按鈕該怎么實(shí)現(xiàn)？axure中使用母版的時(shí)候想要實(shí)現(xiàn)單個(gè)頁(yè)面按鈕的添加選中狀態(tài)，我們可以使用函數(shù)來(lái)實(shí)現(xiàn)，下面我們就來(lái)看看詳細(xì)的教程，需要的朋友可2017-12-05
Axure母版怎么使用? Axure母版功能詳細(xì)介紹
Axure母版怎么使用？Axure一般都會(huì)創(chuàng)建母版，但是母版有什么功能，該怎么使用呢？下面我們就來(lái)看看Axure母版功能詳細(xì)介紹，需要的朋友可以參考下2017-11-30
Axure文本輸入框怎么去掉邊框? Axure隱藏輸入框邊框的教程
Axure文本輸入框怎么去掉邊框？Axure設(shè)計(jì)網(wǎng)頁(yè)原型的時(shí)候，插入了文本輸入框，但是有邊框，想要去掉邊框，該怎么操作呢？下面我們就來(lái)看看Axure隱藏輸入框邊框的教程，需要2017-11-17
Axure怎么設(shè)計(jì)頁(yè)面標(biāo)簽可以切換的登錄框?
Axure怎么設(shè)計(jì)頁(yè)面標(biāo)簽可以切換的登錄框？Axure中在設(shè)計(jì)登陸框的時(shí)候，想要設(shè)計(jì)企業(yè)會(huì)員和個(gè)人會(huì)員兩個(gè)登陸頁(yè)面，可以使用標(biāo)簽切換，該怎么設(shè)計(jì)呢？下面我們就來(lái)看看詳細(xì)的2017-11-08
Axure RP 8怎么設(shè)計(jì)立體的圓角矩形按鈕?
Axure RP 8怎么設(shè)計(jì)立體的圓角矩形按鈕？Axure RP 8中想要設(shè)計(jì)一個(gè)查詢(xún)的圓角矩形按鈕，該怎么設(shè)計(jì)呢？下面我們就來(lái)看看詳細(xì)的教程，需要的朋友可以參考下2017-11-02
axure怎么設(shè)計(jì)鼠標(biāo)展開(kāi)折疊效果?
axure怎么設(shè)計(jì)鼠標(biāo)展開(kāi)折疊效果？axure中想要繪制一個(gè)可以折疊展開(kāi)功能的原型，該怎么設(shè)計(jì)呢？下面我們就來(lái)看看axure制作折疊效果的教程，需要的朋友可以參考下2017-11-01
