作品名稱：利用全局變量實現(xiàn)跨頁面?zhèn)髦?/p>
作品編號：Case003
軟件版本：Axure9
作品類型：交互案例
在我們使用Axure進行原型設(shè)計的時候，在同一個頁面實現(xiàn)點擊不同的按鈕切換顯示不同的內(nèi)容，可以通過動態(tài)面板來實現(xiàn)；如果要實現(xiàn)在a頁面點擊不同的按鈕，在B頁面中顯示不同的內(nèi)容應(yīng)該如何實現(xiàn)呢？
本文將介紹如何通過全局變量保存值并進行跨頁面?zhèn)髦祦韺崿F(xiàn)這個效果。
- 交互效果說明?-
點擊「首頁」金剛區(qū)的按鈕，跳轉(zhuǎn)至「分類」頁面，選中對應(yīng)的Tab選項，切換顯示對應(yīng)的內(nèi)容。
效果預(yù)覽：
原型預(yù)覽鏈接：
http://daisyaxure.com/demo/Case003
請復(fù)制以上鏈接至電腦瀏覽器查看效果（附源文件下載鏈接）
- 交互效果制作-
1.創(chuàng)建兩個頁面，分別命名為「首頁」和「分類」。
2.在「首頁」中拖入一個圓形和一個文本標(biāo)簽，設(shè)置好顏色和文本，右鍵設(shè)置為組合，命名為【人文- Botton】，再復(fù)制出4個完全相同的組合，分別進行命名和設(shè)置；
頁面其他內(nèi)容可自定義。
3.在「分類」頁面中拖入一個矩形,設(shè)置文本內(nèi)容為“人文”，將其命名為「人文-Tab」；在右側(cè)【交互】面板中給其添加【元件選中的樣式】，效果如下圖所示，設(shè)置選項組名稱為「Tab組」；
4.給文本標(biāo)簽「人文-Tab」添加【鼠標(biāo)單擊時】【選中當(dāng)前元件】的交互。
5.設(shè)置完成后，再復(fù)制出四個相同文本標(biāo)簽分別命名和設(shè)置文本內(nèi)容，這樣Tab就制作完成了。
6.制作出「分類」頁面的內(nèi)容部分，內(nèi)容可自定義，制作好后選中內(nèi)容右鍵轉(zhuǎn)化為動態(tài)面板，再復(fù)制出4個狀態(tài)，分別進行命名。
7.給「Tab組」的5個文本標(biāo)簽分別添加【選中】時的交互，切換到【內(nèi)容】面板的對應(yīng)狀態(tài)。
接下來我們需要通過設(shè)置全局變量來儲存我們的數(shù)據(jù)，在「首頁」中點擊按鈕給全局變量賦值，然后在「分類」頁面中載入時通過判斷全局變量的值，顯示不同的面板狀態(tài)。
7.點擊頂部菜單【項目】-【全局變量設(shè)置】，添加一個全局變量，命名為「BottonVariable」，默認(rèn)值為空。
8.接下來分別給金剛區(qū)的5個按鈕組合添加【鼠標(biāo)單擊時】的交互，分別【設(shè)置變量值】為「renwen」「lishi」「sheke」「yishu」「yinyue」；均設(shè)置【跳轉(zhuǎn)鏈接】至「分類」頁面。
這里需要保證在載入「分類」頁面前已經(jīng)賦值成功，所以設(shè)置變量值的交互要在跳轉(zhuǎn)鏈接之前。
9.在「分類」中添加【頁面載入時】的交互，分別添加情形及對應(yīng)的選中效果，如下：
當(dāng)【變量值】「BottonVariable」為【renwen】時，設(shè)置動作為【選中】矩形元件「人文—Tab」；
【變量值】「BottonVariable」為【lishi】時，設(shè)置動作為【選中】矩形元件「人文—Tab」；
【變量值】「BottonVariable」為【sheke】時，設(shè)置動作為【選中】矩形元件「社科—Tab」；
【變量值】「BottonVariable」為【yishu】時，設(shè)置動作為【選中】矩形元件「藝術(shù)—Tab」；
【變量值】「BottonVariable」為【yinyue】時，設(shè)置動作為【選中】矩形元件「音樂—Tab」；
做完這一步，就完成整個效果了，通過這個案例也可舉一反三，用于登錄、搜索等其他需要頁面中傳值的交互中。
