將一個矩形設置進選項板中去

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

可下載的 RP 文件已被作為例子包含到最終的產品中去。在此次向導中我們將會從頭構造這個例子。

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

在工具欄中點擊 Fill Color 按鈕來設置默認顏色，確保透明度為 100%。

編輯選項板的選擇樣式

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

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

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

復制、粘貼，添加到選項組中去

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

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

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

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

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

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

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

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

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

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

在部件管理器中，標記面板為 TabDynamicPanel1。重復這個狀態(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 動作，放置一個標記 Tab1 的復選框。 在默認的 True 選項中移除 value 下拉菜單。

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

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

設置活動選項板

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

設置頁面加載時默認顯示的選項板。

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

預覽原型

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

預覽你的原型然后去測試吧。