axure8怎么給網(wǎng)頁制作Tabpage頁效果?

我們經(jīng)常能在網(wǎng)頁中看到Tabpage頁,這是很長用的常用組件,下面我們就來看看使用axure制作的方法。
1、新建工程,在元件庫中找:矩形元件,拖放到工作區(qū)。然后按照下圖所示,按照順序?qū)υM(jìn)行:變形,旋轉(zhuǎn):
2、設(shè)置元件大小,并在選中元件后右鍵,將元件轉(zhuǎn)換為動態(tài)面板:詳細(xì)見下圖
3、按照圖示,對元件進(jìn)行命名,狀態(tài)命名操作,名稱分別為 tab1、選中
4、進(jìn)入選中狀態(tài)后,添加一個文本,設(shè)置為:tab1,然后選中狀態(tài),右鍵進(jìn)行“復(fù)制狀態(tài)”操作:
5、復(fù)制狀態(tài)后,對選中狀態(tài)進(jìn)行文字、背景的設(shè)置,如下圖
6、復(fù)制三個“tab1”元件,并分別改變文字為:tab1/tab2/tab3,并命名,且將tab2/tab3的選中狀態(tài)置后:
7、再添加一個動態(tài)面板,置于選項卡的下方,在狀態(tài)1中添加一個圖像元件,并添加圖像。元件命名為:tabpage,然后復(fù)制狀態(tài)兩份,總計三份:
8、點擊選項卡1,在屬性中添加:鼠標(biāo)單擊時,交互事件:
9、根據(jù)圖示,設(shè)置tab1/tab2/tab3的交互事件,添加思路:點擊tab1設(shè)置 tab1狀態(tài)為選中,其他為非選中,設(shè)置tabpage為頁面1,依次類推,進(jìn)行設(shè)置:
10、預(yù)覽效果:
以上就是zxure標(biāo)簽頁效果的制作方法,請繼續(xù)關(guān)注腳本之家。
相關(guān)推薦:
Axure RP Pro 7.0怎么制作Tab標(biāo)簽效果?
相關(guān)文章
Axure RP8怎么設(shè)計倒計時獲取短信驗證碼效果?
Axure RP8怎么設(shè)計倒計時獲取短信驗證碼效果?經(jīng)常能見到帶有短信驗證的網(wǎng)頁,該怎么設(shè)計出這個交互效果呢?下面我們就來看看詳細(xì)的教程,需要的朋友可以參考下2017-08-25- Axure RP怎么給網(wǎng)頁添加滾動字幕?看到很多網(wǎng)頁有滾動字幕,想要在Axure RP中制作滾動字幕效果,該怎么制作呢?下面我們就來看看詳細(xì)的教程,需要的朋友可以參考下2017-08-15
- Axure RP怎么設(shè)計一款導(dǎo)航菜單?Axure RP中設(shè)計網(wǎng)頁的時候需要設(shè)計一款導(dǎo)航菜單,該怎么設(shè)計恩?下面我們就來看看詳細(xì)的教程,需要的朋友可以參考下2017-08-11
axure怎么給下拉框/列表框和元件文本添加內(nèi)容?
axure怎么給下拉框/列表框和元件文本添加內(nèi)容?axure中有很多元件,今天我們就來看看給下拉框/列表框和元件文本添加內(nèi)容的方法,需要的朋友可以參考下2017-07-25- Axure怎么繪制一幅生產(chǎn)產(chǎn)品圖?Axure中想要設(shè)計一個生產(chǎn)產(chǎn)品圖,該怎么設(shè)置呢?下面我們就來看看詳細(xì)的教程,很簡單,需要的朋友可以參考下2017-07-25
- Axure有哪些元件?Axure中有很多元件在制作網(wǎng)頁原型的時候需要使用,今天我們就來簡單的介紹Axure元件的使用方法,需要的朋友可以參考下2017-07-21
- Axure RP 8怎么給網(wǎng)頁添加多選列表框?Axure RP 8設(shè)計網(wǎng)頁的時候需要添加多選列表框,該怎么添加呢?下面我們就來看看詳細(xì)的教程,需要的朋友可以參考下2017-07-19
- Axure RP 8怎么設(shè)置頁面彈出框居中顯示?Axure RP 8設(shè)計網(wǎng)頁的時候,想要合設(shè)計一個居中顯示的彈框,該怎么設(shè)計呢?下面我們就來看看詳細(xì)的教程,需要的朋友可以參考下2017-07-13
Axure RP復(fù)選框怎么實現(xiàn)單選效果?
Axure RP復(fù)選框怎么實現(xiàn)單選效果?Axure使用復(fù)選框的時候,但是卻只想實現(xiàn)單選效果,該怎么實現(xiàn)呢?下面我們就來看看詳細(xì)的教程,需要的朋友可以參考下2017-07-06- Axure RP打開后鼠標(biāo)不能使用該怎么辦?在使用Axure RP的時候,發(fā)現(xiàn)打開以后鼠標(biāo)無法使用,不能動了,該怎么辦呢?下面我們就來看看這個問題的解決辦法,需要的朋友可以參考2017-07-05