原型設(shè)計(jì)工具Axure RP參考（十三）：動態(tài)面板小部件（下）

---

Axure RP是一套專門為網(wǎng)站或應(yīng)用程序所設(shè)計(jì)的快速原型設(shè)計(jì)工具， 可以讓應(yīng)用網(wǎng)站策劃人員或網(wǎng)站功能界面設(shè)計(jì)師更加快速方便的建立Web AP和Website的線框圖、流程圖、原型和規(guī)格。

免費(fèi)下載Axure RP 優(yōu)惠購買Axure RP

---

動態(tài)面板是一個(gè)容器，用于將其他小部件保存在稱為“狀態(tài)”的集合中。動態(tài)面板可以具有一個(gè)或多個(gè)狀態(tài)，并且一次只能顯示其中一種狀態(tài)?？梢允褂谩霸O(shè)置面板狀態(tài)”操作來動態(tài)設(shè)置可見狀態(tài)，這使動態(tài)面板非常適合創(chuàng)建輪播和幻燈片顯示。（本文是動態(tài)面板小部件的下部分，點(diǎn)擊此處查看上部分）

特殊性質(zhì)

適合內(nèi)容

將動態(tài)面板設(shè)置為“適合內(nèi)容”可使其寬度和高度自動調(diào)整大小以適合其包含的窗口小部件。當(dāng)在不同大小的面板狀態(tài)之間切換以及對可見狀態(tài)包含的窗口小部件進(jìn)行更改時(shí)，會發(fā)生這種大小調(diào)整。

要切換此設(shè)置，請?jiān)凇皹邮健贝案裰羞x中或取消選中“適合內(nèi)容”框，或雙擊任何動態(tài)面板的調(diào)整大小手柄。

注意:如果您通過“樣式”窗格中的“ W”和“ H”字段或拖動面板的調(diào)整大小手柄來手動調(diào)整動態(tài)面板的大小，則“適合內(nèi)容”將被自動禁用。

滾動

通過使動態(tài)面板本身比其狀態(tài)的內(nèi)容更短或更窄，可以使動態(tài)面板的內(nèi)容可滾動。這將關(guān)閉“適合內(nèi)容”并隱藏任何超出動態(tài)面板范圍的窗口小部件。

然后要啟用滾動，請?jiān)凇皹邮健贝案竦摹皾L動”下拉列表中選擇以下選項(xiàng)之一：

• 根據(jù)需要滾動
• 垂直滾動
• 水平滾動

注意：動態(tài)面板只能在Web瀏覽器中滾動，滾動條的樣式由瀏覽器控制。模擬滾動條將出現(xiàn)在Axure RP的動態(tài)面板上，但它們不起作用。

100％寬

“ 100％寬”動態(tài)面板用于使顏色或圖像跨越瀏覽器窗口的整個(gè)寬度。

首先為動態(tài)面板的第一種狀態(tài)設(shè)置背景顏色或背景圖像。然后，在“樣式”窗格中檢查“ 100％寬”。當(dāng)您在Web瀏覽器中查看原型時(shí)，背景顏色或圖像將擴(kuò)展窗口的整個(gè)寬度。如果調(diào)整窗口的大小，動態(tài)面板的寬度（及其背景）將自動調(diào)整。

注意：此屬性僅調(diào)整動態(tài)面板本身的大小。它包含的小部件不受影響。

固定到瀏覽器

“固定到瀏覽器”選項(xiàng)將動態(tài)面板固定在相對于瀏覽器窗口的位置，這意味著在滾動頁面時(shí)它不會移動。使用此選項(xiàng)可以構(gòu)建諸如始終可見的導(dǎo)航標(biāo)題和模式窗口之類的東西。

• 選擇一個(gè)動態(tài)面板，然后在“樣式”窗格中單擊“固定到瀏覽器” 。
• 在出現(xiàn)的對話框中，選中“固定到瀏覽器”窗口框以啟用該功能。
• 在下面，配置面板的水平和垂直位置。

注意：將根據(jù)Axure RP畫布上動態(tài)面板的X和Y坐標(biāo)自動設(shè)置“左”和“上”圖釘選項(xiàng)的邊距。要更改這些邊距，請?jiān)诋嫴忌弦苿印皠討B(tài)面板”。

• 如果您希望面板始終顯示在頁面上所有其他小部件的前面，請選中保留在前面的框。
• 單擊“確定”關(guān)閉對話框。

特殊互動

特定于動態(tài)面板的事件和操作

動態(tài)面板具有一些其他控件沒有的特殊功能：可以拖動，滑動和滾動它們，并且可以動態(tài)更改面板的活動狀態(tài)（可見狀態(tài)）。您可以通過動態(tài)面板特有的事件（“拖動”，“向上滑動”等）和動作（“設(shè)置面板狀態(tài)”，“拖動移動”等）來利用這些功能。要了解更多信息，請參閱有關(guān)交互事件，案例和操作的文章。

設(shè)置面板狀態(tài)動作

如果創(chuàng)建了具有多個(gè)狀態(tài)的動態(tài)面板，則可以使用“設(shè)置面板狀態(tài)”操作在Web瀏覽器中動態(tài)更改面板的可見狀態(tài)。

配置操作時(shí)，可以從以下選項(xiàng)之一選擇狀態(tài)：

• 特定州的名稱
• Next，它將面板設(shè)置為列表中的下一個(gè)狀態(tài)。此選項(xiàng)可與“重復(fù)每隔...毫秒”復(fù)選框一起使用，以自動循環(huán)顯示面板的所有狀態(tài)。添加從最后到第一的環(huán)繞選項(xiàng)將使您能夠創(chuàng)建重復(fù)結(jié)構(gòu)，例如圖像輪播和幻燈片。
• Previous，它將面板設(shè)置為列表中的上一個(gè)狀態(tài)?？梢耘c“下一步”類似地配置此選項(xiàng)。
• 停止重復(fù)，這將停止進(jìn)一步的自動下一個(gè)或上一個(gè)重復(fù)
• Value，它允許您通過面板的名稱或在狀態(tài)列表（1、2、3等）中的位置將面板設(shè)置為特定狀態(tài)。您可以在此字段中輸入文字值，也可以使用變量或表達(dá)式動態(tài)填充它。這對于在另一個(gè)頁面上設(shè)置動態(tài)面板的狀態(tài)非常方便

火鼠標(biāo)樣式效果

默認(rèn)情況下，在動態(tài)面板中具有鼠標(biāo)樣式效果的窗口小部件照常工作：當(dāng)您將鼠標(biāo)懸?；騿螕鬢eb瀏覽器中的窗口小部件時(shí)，將顯示樣式效果。但是，您可以選擇在鼠標(biāo)懸?；騿螕魟討B(tài)面板本身的任何部分（包括小部件之間的空白區(qū)域）時(shí)立即觸發(fā)所有包含的小部件的樣式效果。

為此，請選擇動態(tài)面板，然后在“交互”窗格中選中“ Fire Mouse樣式效果”框。

動態(tài)面板VS包含的小部件上的交互

動態(tài)面板具有與其包含的窗口小部件可能相同的事件（例如Click或Tap），這可能會導(dǎo)致沖突。如果動態(tài)面板及其包含的小部件之一對同一事件設(shè)置了動作，則將執(zhí)行小部件的動作，而不是面板的動作。

選擇組

您可以在一組形狀，線條，圖像和/或動態(tài)面板窗口小部件之間創(chuàng)建關(guān)系，通過“設(shè)置選定/選中”操作，一次只能將一個(gè)窗口小部件設(shè)置為其選定狀態(tài)。（這類似于單選按鈕組中單選按鈕之間的關(guān)系。）

本文是動態(tài)面板小部件的下部分，點(diǎn)擊此處查看上部分

推薦閱讀：

原型設(shè)計(jì)工具Axure RP入門教程

原型設(shè)計(jì)工具Axure RP新手教程

關(guān)注慧聚IT微信公眾號???，了解產(chǎn)品的最新動態(tài)及最新資訊。