找軟件用軟件,就到華軍軟件園! 軟件發(fā)布
所在位置: 首頁 — 教程攻略 — 教程 — 電腦軟件教程  —  Axure RP教...

Axure RP教程 Axure RP如何制作彈出窗口

作者:葫蘆娃 日期:2018-01-19

Axure RP
Axure RP-10.0.0.3882 官方版

編程工具 占存:142.74MB 時(shí)間:2022-10-14

軟件介紹: Axure RP是一款能夠大大提高功能效率的軟件,它能夠高效率制作產(chǎn)品原型,可以減少大部分溝通成本...

立即下載

1.正常打開Axure RP8.0工具,如下圖,創(chuàng)建一個(gè)新的RP文件 。

 
360截圖20180119141551815.jpg
 
2.在空白頁面上從元件庫中拉出一個(gè)矩形框和一個(gè)按鈕,矩形框是為了展示主頁的內(nèi)容,按鈕是為了點(diǎn)擊后彈出對(duì)話框的效果,界面設(shè)計(jì)如下截圖,使用過程中根據(jù)自己項(xiàng)目的實(shí)際需求擺放具體內(nèi)容。
 
360截圖20180119141606183.jpg
 
3.從左邊元件庫中拉出一個(gè)動(dòng)態(tài)面板,放在頁面上,擺放位置可以根據(jù)需要進(jìn)行擺放,也可以通過設(shè)置,使其在頁面上居中顯示,具體這個(gè)設(shè)置步驟請(qǐng)查看步驟十說明。
 
360截圖20180119141618454.jpg
 
4.雙擊動(dòng)態(tài)面板,將彈出如下對(duì)話框,先為動(dòng)態(tài)面板定義一個(gè)名稱 ,這個(gè)名稱等會(huì)在設(shè)置顯隱的時(shí)候需要用到。然后再單擊"state1"會(huì)彈出另一個(gè)新的子頁面,就可以在該頁面中增加彈出框的具體內(nèi)容了,詳細(xì)步驟請(qǐng)查看截圖2.
 
360截圖20180119141627769.jpg
360截圖20180119141637723.jpg
 
5.在上述步驟過后,主頁index的頁面效果將如下所示,鼠標(biāo)右鍵點(diǎn)擊動(dòng)態(tài)面板,把動(dòng)態(tài)面板設(shè)置成隱藏,具體操作如下截圖2。
 
360截圖20180119141646207.jpg
360截圖20180119141656239.jpg
 
6.為頁面上的按鈕增加事件。選中按鈕,在右邊的設(shè)置面板中,雙擊“鼠標(biāo)單擊時(shí)”按鍵,如下截圖1,頁面將會(huì)彈出新的用例編輯窗口,選擇元件的“顯示/隱藏”,找到剛剛的動(dòng)態(tài)面板,并將其設(shè)置為顯示,具體操作如下截圖2中標(biāo)紅的位置。這步的設(shè)置非常重要, 只有正確設(shè)置了這步,才能正確的彈出窗口。
 
360截圖20180119141717958.jpg
360截圖20180119141728608.jpg
 
7.在第五步中增加的動(dòng)態(tài)面板,也有放置一個(gè)按鈕,該按鈕的作用就是點(diǎn)擊后自動(dòng)關(guān)閉彈出框,設(shè)置步驟和步驟7類似,只是將“顯示”改成了“隱藏”,具體操作如下截圖中標(biāo)紅的位置。
 
360截圖20180119141738298.jpg
 
8.配置完后,點(diǎn)擊預(yù)覽,在瀏覽器上點(diǎn)擊“打開新窗口”按鈕,頁面將彈出新的對(duì)話框如下截圖,點(diǎn)擊“關(guān)閉窗口”將關(guān)閉該頁面。
 
360截圖20180119141748361.jpg
 
9.在第八步之后 ,已經(jīng)完成了新窗口彈出的配置功能,這一步將分享如何美化頁面。在第九步中展示的效果是設(shè)計(jì)人員在頁面上將對(duì)話框放置在什么位置,彈出時(shí)就在什么位置,為了美觀,我們經(jīng)常需要將彈出框在頁面中居中顯示,要實(shí)現(xiàn)該功能也很簡單,只要完成如下步驟就可以了。
10.在主頁上,鼠標(biāo)右鍵點(diǎn)擊動(dòng)態(tài)面板,在彈出的選擇項(xiàng)中選擇“固定到瀏覽器”并單擊它。在彈出的對(duì)話框中按照如下截圖2進(jìn)行配置就可以了。
 
360截圖20180119141756000.jpg
360截圖20180119141804510.jpg
 
11.這時(shí)候預(yù)覽頁面效果,就如下截圖所示,彈出框?qū)⒃陧撁嫔暇又姓故尽?/div>
 
360截圖20180119141814574.jpg
 
以上就是Axure RP制作彈出窗口方法教程,更多Axure RP等軟件相關(guān)教程請(qǐng)到華軍軟件園軟件教程專區(qū)!

相關(guān)文章

最新教程 更多

圖片轉(zhuǎn)為pdf怎么弄?碼住這九個(gè)轉(zhuǎn)換方法,幾百張圖片只需30秒! 圖片轉(zhuǎn)為pdf怎么弄?碼住這九個(gè)轉(zhuǎn)換方法,幾百張圖片只需30秒!

如何實(shí)現(xiàn)圖片轉(zhuǎn)換成pdf格式?簡單幾步,輕松搞定! 如何實(shí)現(xiàn)圖片轉(zhuǎn)換成pdf格式?簡單幾步,輕松搞定!

視頻轉(zhuǎn)GIF文件過大?掌握這4個(gè)轉(zhuǎn)換技巧,輕松平衡畫質(zhì)和體積! 視頻轉(zhuǎn)GIF文件過大?掌握這4個(gè)轉(zhuǎn)換技巧,輕松平衡畫質(zhì)和體積!

視頻格式轉(zhuǎn)換后如何保持原音質(zhì)和畫質(zhì)?分享無損轉(zhuǎn)換的3個(gè)技巧?。ㄔ敿?xì)教程) 視頻格式轉(zhuǎn)換后如何保持原音質(zhì)和畫質(zhì)?分享無損轉(zhuǎn)換的3個(gè)技巧?。ㄔ敿?xì)教程)

實(shí)時(shí)變聲器免費(fèi)版,讓你的聲音充滿樂趣——聲音的魔法師! 實(shí)時(shí)變聲器免費(fèi)版,讓你的聲音充滿樂趣——聲音的魔法師!

熱門教程 更多

電腦重裝系統(tǒng)后沒聲音怎么辦-驅(qū)動(dòng)精靈教程 電腦重裝系統(tǒng)后沒聲音怎么辦-驅(qū)動(dòng)精靈教程

谷歌瀏覽器怎么清除緩存-谷歌瀏覽器清除緩存的方法 谷歌瀏覽器怎么清除緩存-谷歌瀏覽器清除緩存的方法

金山打字通怎么練打字-金山打字通練習(xí)打字方法 金山打字通怎么練打字-金山打字通練習(xí)打字方法

bootcamp驅(qū)動(dòng)如何升級(jí)?bootcamp驅(qū)動(dòng)升級(jí)方法 bootcamp驅(qū)動(dòng)如何升級(jí)?bootcamp驅(qū)動(dòng)升級(jí)方法

qq音樂皮膚怎么換?-qq音樂換皮膚方法 qq音樂皮膚怎么換?-qq音樂換皮膚方法