將一個矩形設(shè)置進(jìn)選項板中去

http://wiki.jikexueyuan.com/project/axure/images/tabcontrol1.png" alt="image" />

可下載的 RP 文件已被作為例子包含到最終的產(chǎn)品中去。在此次向?qū)е形覀儗念^構(gòu)造這個例子。

添加一個矩形部件到設(shè)計區(qū)域，右鍵單擊矩形的底邊，選擇彈出菜單中的選項 Select Shape > Top，改變矩形的形狀。

在工具欄中點(diǎn)擊 Fill Color 按鈕來設(shè)置默認(rèn)顏色，確保透明度為 100%。

編輯選項板的選擇樣式

http://wiki.jikexueyuan.com/project/axure/images/tabcontrol2.png" alt="image" />

為了區(qū)分選項板默認(rèn)狀態(tài)和被選中時的樣式，點(diǎn)擊 Properties 選項板中的 Selected，選中復(fù)選按鈕 Fill Color 然后點(diǎn)擊設(shè)置填充的顏色。

在這例子中，我們使用的填充類型為 Linear Gradient，從右邊的滑動條中選中藍(lán)色。

復(fù)制、粘貼，添加到選項組中去

http://wiki.jikexueyuan.com/project/axure/images/tabcontrol3.png" alt="image" />

現(xiàn)在，復(fù)制和粘貼矩形兩次，然后你就有三個完全相同的選項板，排列好他們。

為了在同一時刻只顯示一個選項板，全選它們，然后打開 Properties 面板，選中一個名為 Selection Group 的選項，命名這個選項組。

在屬性面板中分別標(biāo)記你的選項板為 Tab1，Tab2，Tab3。輸入標(biāo)記到 Tab1，Tab2，Tab3。

添加一個矩形，轉(zhuǎn)換為動態(tài)面板

http://wiki.jikexueyuan.com/project/axure/images/tabcontrol4.png" alt="image" />

拖動另一個矩形部件到設(shè)計區(qū)域，將其安置在選項板下面。然后，右鍵單擊新的矩形，單擊 Convert to Dynamic Panel 選項。

為確保選項板的底邊與動態(tài)面板的頂邊重合，右鍵單擊動態(tài)面板選中 Order > Send to Back 選項，然后使用鍵盤方向鍵移動一像素點(diǎn)。

重復(fù)狀態(tài)，編輯文本

http://wiki.jikexueyuan.com/project/axure/images/tabcontrol5.png" alt="image" />

在部件管理器中，標(biāo)記面板為 TabDynamicPanel1。重復(fù)這個狀態(tài)兩次，總計三次。一般地，狀態(tài)一般命名為 State1，State2，和 State3。

向矩形 Pane 1， Pane 2 和 Pane 3 輸入文字。

添加 OnClick 事件

http://wiki.jikexueyuan.com/project/axure/images/tabcontrol6.png" alt="image" />

選中 Tab1 然后編輯他的 OnClick 事件。首先添加 Set Selected 動作，放置一個標(biāo)記 Tab1 的復(fù)選框。 在默認(rèn)的 True 選項中移除 value 下拉菜單。

接著，添加另一個動作 Set Panel State。在 TabDynamicPanel1 復(fù)選框中選中它，在 Select the state 的下拉菜單中將其設(shè)置為 State1。

對第二個和第三個選項板重復(fù)上訴步驟。確保 Tab2 和 State2 是第二個選項板， Tab3 和 State3 是第三個選項板的。

設(shè)置活動選項板

http://wiki.jikexueyuan.com/project/axure/images/tabcontrol7.png" alt="image" />

設(shè)置頁面加載時默認(rèn)顯示的選項板。

在 Page Interactions 選項板中為頁面添加一個事例到頁面的 OnPageLoad 事件中去。在 Tab1 的復(fù)選框中選擇 Set Selected 動作。移除默認(rèn)的選項在單擊 OK。

預(yù)覽原型

http://wiki.jikexueyuan.com/project/axure/images/tabcontrol7.png" alt="image" />

預(yù)覽你的原型然后去測試吧。