什麼是TAB頁面切換?
我的理解是:點擊不同的標題或者標籤,內容顯示區顯示不同的結果。通常標題或者標籤是並列排放的。如攜程網首頁下面的部分。
注:對於上面的內容區部分,是非常有規律的,這種使用中繼器來做會很簡單。
期望效果:
單擊不同的tab頁面切換顯示不同的tab內容頁,且選中頁籤的標題變紅色。
爲了好理解,做一個簡單的5月份汽車銷量排行,分別按照轎車,SUV,MPV排行顯示。
製作步驟:
1.製作靜態頁面
在編輯區拖入一個矩形框。
單擊上圖中1處可以修出弧度,2處修改矩形爲這種樣式,得到以下的圖,作爲TAB標籤的雛形。
複製2個進行排列,且分別寫上標籤名稱。爲3個矩形標籤分別命名(”jiaoche”,”SUV”,”MPV”)。
拖動一個動態面板進入編輯區。
爲動態面板命名:xiaoliangpaihang,製作3個狀態:轎車,SUV,MPV。(不會做的可以參考:Axure原型設計:動態面板之輪播圖顯示(附帶源文件)http://www.woshipm.com/rp/692728.html)
3種狀態下分別放置3種tab標籤需要顯示的排行榜。
2.製作交互
靜態頁面做完成之後,便可以做交互了。點擊矩形“轎車”,進入動態面板的轎車頁面;
對點擊“轎車”的動作,做3個交互的操作:
1)點擊後,動態面板選中“轎車”的靜態頁面。
2)矩形“jiaoche”爲選中狀態,其餘2個tab頁籤爲“未選中”狀態。
3)選中時,背景色變爲紅色。
設置選中的樣式,填充背景顏色。
重複上面的步驟製作點擊“SUV”和“MPV”的交互。這樣就完成了動態面板的TAB頁籤的切換了。
延伸:
- 在例子,動態面板的每個狀態的頁面爲一張圖片。我們也可以換成其他的控件,例如下拉列表框,單選框,輸入框,按鈕等,根據需要採用不同的控件,當然也可以在動態面板中繼續添加動態面板來達到效果(動態面板使用熟練後可以練習使用)。
- 在例子中,頁籤選中爲填充背景色,還可以有多種選中後的表現形式,例如字體變粗等,可以按照需要設置不同的交互。
- 製作tab下面帶下劃線