在下一個(gè)頁面上設(shè)置面板教程

在鏈接頁面改變動(dòng)態(tài)面板的狀態(tài)

添加用例到單擊提交按鈕事件

http://wiki.jikexueyuan.com/project/axure/images/advanced-variables-set-panel-next-page-tutorial1.png" alt="image" />

首先，打開AxureSetPanelOnNextPage.rp，打開“在下一頁設(shè)置面板”頁面。在設(shè)計(jì)區(qū)域選擇打開狀態(tài)1按鈕并添加一個(gè)用例到 OnClick 事件。這將打開用例編輯器對(duì)話框。

存儲(chǔ)下拉列表選擇到一個(gè)變量中

http://wiki.jikexueyuan.com/project/axure/images/advanced-variables-set-panel-next-page-tutorial2.png" alt="image" />

在本例中，我們想存儲(chǔ)變量和打開花朵頁面。所以，我們選擇“設(shè)置變量值”動(dòng)作，并為 OnPageLoad 變量勾選復(fù)選框。在下拉列表中選擇“選擇選項(xiàng)”，“Flower 下拉列表”將被自動(dòng)選中。

添加動(dòng)作打開第一頁

http://wiki.jikexueyuan.com/project/axure/images/advanced-variables-set-panel-next-page-tutorial3.png" alt="image" />

添加一個(gè)動(dòng)作“開放鏈接”并指定頁面為“花”。注意這里是很重要的，因?yàn)榇瞬僮餍枰竭@里設(shè)置變量值——如果我們先打開頁面，變量值永遠(yuǎn)不會(huì)被設(shè)置。
單擊 OK，并關(guān)閉用例編輯器對(duì)話框。

添加 OnPageLoad 用例到頁面 1

http://wiki.jikexueyuan.com/project/axure/images/advanced-variables-set-panel-next-page-tutorial4.png" alt="image" />

接下來，在站點(diǎn)地圖面板打開花頁面。在這里，我們要查看什么變量值在前一頁被設(shè)置，并設(shè)置相應(yīng)的動(dòng)態(tài)面板的狀態(tài)。在底部的頁面交互選項(xiàng)卡窗格中，添加一個(gè)用例到 OnPageLoad 事件。

添加條件來檢查變量值

http://wiki.jikexueyuan.com/project/axure/images/advanced-variables-set-panel-next-page-tutorial5.png" alt="image" />

添加一個(gè)條件在用例編輯器中。這將打開條件生成器對(duì)話框。將其設(shè)置為檢查變量 OnLoadVariable 的值為 Value，然后輸入“罌粟”到文本值。變量值是很重要的，所以一定要確保這下拉列表中的匹配項(xiàng)是前面的頁面。

單擊 OK，并關(guān)閉條件生成器對(duì)話框。

設(shè)置花面板的狀態(tài)

http://wiki.jikexueyuan.com/project/axure/images/advanced-variables-set-panel-next-page-tutorial6.png" alt="image" />

如果加載的變量值是“罌粟”，我們將在頁面上的動(dòng)態(tài)面板展示罌粟的圖片。所以，我們添加行動(dòng)“設(shè)置面板狀態(tài)”，選擇花的面板，并從下拉列表中選擇“罌粟”狀態(tài)。
單擊 OK，并關(guān)閉用例編輯器對(duì)話框。

添加 OnPageLoad 到每個(gè)選項(xiàng)

http://wiki.jikexueyuan.com/project/axure/images/advanced-variables-set-panel-next-page-tutorial7.png" alt="image" />

在 OnPageLoad 事件，添加超過3個(gè)的用例。在每種情況下，增加一個(gè)條件來檢查變量加載的值為數(shù)字(1、2和3)并設(shè)置花的面板動(dòng)態(tài)面板到適當(dāng)?shù)臓顟B(tài)。最后在頁面加載的情況下應(yīng)該是上面的一個(gè)截圖。

預(yù)覽原型

http://wiki.jikexueyuan.com/project/axure/images/advanced-variables-set-panel-next-page-tutorial8.png" alt="image" />

預(yù)覽您的原型和測(cè)試它。選擇一個(gè)按鈕將你帶到后面的頁面并顯示相關(guān)狀態(tài)。

總結(jié)

現(xiàn)在你知道如何使用變量連接窗口值從一個(gè)頁面到另一個(gè)頁面了嗎？
還需要其他幫助嗎？查看論壇或聯(lián)系我們 support@axure.com