Axure RP實例教程：全選與取消全選效果

Axure RP 9 Mac這款原型設計軟件能讓設計者快速建立應用軟件，或者在web網站的線框圖、流程圖、原型和規格的設計製做，從低到高的視覺和交互保真度的全方位構建，是目前業界數一數二的交互式產品原型設計軟件！這次小編就帶你們來看看Axure RP如何作全選與取消全選效果。

一、案例效果：

初始狀態/取消全選時：

全選後取消任一選項時：

全選/單選所有選中時：

二、案例描述：

列表中相鄰的行具備交替的背景顏色；點擊列表中複選框時，能夠切換複選框的勾選狀態，複選框被勾選時整行變爲灰色，取消勾選時恢復默認顏色；列表中的複選框被所有勾選時，列表左下方的全選複選框變爲被勾選狀態；列表中的複選框有任何一個取消勾選時，全選複選框都會變爲未勾選狀態；全選複選框被主動勾選時，列表中全部的複選框均被勾選，全選複選框被主動取消勾選時，列表中全部的複選框均被取消勾選。

另外，本案例中當列表中某一行被雙擊時，該行爲播放狀態，歌曲名以前顯示播放圖標，而且顯示聽類似歌曲與看現場翻唱的按鈕。

元件準備：

頁面中：

中繼器「PlayList」中：

中繼器「PlayList」數據集中：

中繼器「PlayList」樣式設置中：

包含命名：

複選框（用於全選的複選框）：SelectAll

文本標籤（用於記錄列表中複選框被勾選的數量）：SelectNumber

中繼器（用於歌曲列表）：PlayList

組合（用於歌曲信息部分的同一操做）：InfoGroup

組合（用於其它按鈕部分的同一操做）：ButtonGroup

圖片（用於播放狀態顯示的頻譜圖標）：SpectrumIcon

圖片（用於顯示歌曲MV圖標）：MVIcon

複選框（用於列表中每行的複選框）：SelectItem

文本標籤（用於顯示歌曲名稱）：SongName

文本標籤（用於顯示歌手姓名）：SingerName

文本標籤（用於顯示專輯名稱）：AlbumName

矩形（用於歌曲信息部分的灰色背景）：BackgroundShape

三、思路分析：

完成歌曲列表的常規信息部分；（操做步驟1）

爲播放狀態的歌曲顯示更多的按鈕；顯示頻譜圖標，將歌曲名稱置於頻譜圖標右側，顯示整行灰色的背景；（操做步驟2）

爲有MV的歌曲顯示MV的圖標，MV的圖標在歌曲名稱右側間距5像素的位置；（操做步驟3）

雙擊歌曲列表中任何一項時，取消其它歌曲的播放狀態，並將當前歌曲改變爲播放狀態；（操做步驟4~5）

勾選歌曲列表中任何一項的複選框時，整行顯示灰色背景，勾選數量記錄增長1；（操做步驟6）

若是勾選數量記錄等於列表項的總和，勾選複選框「SelectAll」；（操做步驟7）

取消勾選歌曲列表中任何一項的複選框時，勾選數量記錄減小1；取消勾選複選框「SelectAll」；（操做步驟8）

若是歌曲列表中取消勾選的項不是播放狀態，取消顯示整行的灰色背景；（操做步驟9）

在單擊複選框「SelectAll」時判斷複選框是否被勾選，若是該複選框被勾選則勾選歌曲列表中全部的複選框；不然，取消勾選歌曲列表中全部的複選框；這裏須要注意的是，全選與取消全選只有在主動勾選或取消勾選複選框「SelectAll」時纔可以生效，因此觸發事件要選擇複選框「SelectAll」的【鼠標單擊時】而不是【選中時】和【取消選中時】。（操做步驟10~11）

四、操做步驟：

一、爲中繼器「PlayList」的【每項加載時】事件添加「用例1」，設置動做爲【設置文本】；勾選元件「SongName」，設置文本爲【值】「[[Item. SongName]]」；勾選元件「SingerName」，設置文本爲【值】「[[Item. SingerName]]」；勾選元件「AlbumName」，設置文本爲【值】「[[Item.AlbumName]]」；

二、繼續爲中繼器「PlayList」的【每項加載時】事件添加「用例2」，設置條件判斷【值】「[[Item.IsPlay]]」【==】【值】「True」；設置知足條件時的動做爲【顯示】組合「ButtonGroup」，【顯示】圖片「SpectrumIcon」，【移動】元件「SongName」【通過】{x}「25」{y}「0」的位置，【選中】元件「BackgroundShape」；

三、繼續爲中繼器「PlayList」的【每項加載時】事件添加「用例3」，設置條件判斷【值】「[[Item.MV]]」【==】【值】「Yes」；設置知足條件時的動做爲【顯示】圖片 「MVIcon」，【移動】圖片「MVIcon」【到達】{x}「[[s.x+s.text.length*12+5]]」{y}「[[Target.y]]」的位置；公式中「s」爲局部變量，其內容爲元件「SongName」的對象實例；這裏要注意的是：由於，歌曲名稱長度不一，因此不能移動MV的圖標到固定的位置，在這裏移動公式「[[s.x+s.text.length*12+5]]」的含義爲「歌曲名稱元件的x軸座標值+歌曲名稱字符數量*字符的寬度+5像素」；

事件交互設置：

四、爲組合「InfoGroup」的【鼠標雙擊時】事件添加「用例1」，設置動做爲【更新行】於中繼器「PlayList」，勾選【條件】，設置條件爲「True」（表示所有符合條件），【選擇列】爲「IsPlay」，設置列的【Value】（值）爲「False」；這一步完成了取消列表中全部歌曲的播放狀態；

五、繼續上一步，添加動做【更新行】於中繼器「PlayList」，勾選【This】，【選擇列】爲「IsPlay」，設置列的【Value】（值）爲「True」；這一步完成了將當前歌曲設置爲播放狀態；

事件交互設置：

六、爲複選框「SelectItem」的【選中時】事件添加「用例1」，設置動做爲【選中】元件「BackgroundShape」；【設置文本】於元件「SelectNumber」爲【值】「[[Target.text+1]]」；公式「[[Target.text+1]]」表示目標元件文字加1；

七、爲複選框「SelectItem」的【選中時】事件添加「用例2」，添加條件判斷【元件文字】於「SelectNumber」【==】【值】「[[Item.Repeater.visibleItemCount]]」；設置知足條件時的動做爲【選中】元件「SelectAll」；公式「[[Item.Repeater.visibleItemCount]]」的返回值爲當前項所在的中繼器的可見項數量；完成動做設置後，在用例名稱上點擊<鼠標右鍵>，選擇菜單中最後一項，將用例的條件判斷由「Else If」轉換爲「If」；

八、爲複選框「SelectItem」的【取消選中時】事件添加「用例1」，設置動做爲【設置文本】於元件「SelectNumber」爲【值】「[[Target.text-1]]」；【取消選中】元件「SelectAll」；公式「[[Target.text-1]]」表示目標元件文字減1；

九、爲複選框「SelectItem」的【取消選中時】事件添加「用例2」，添加條件判斷【值】「[[Item.IsPlay]]」【==】【值】「False」；設置知足條件時的動做爲【取消選中】元件「BackgroundShape」；完成動做設置後，在用例名稱上點擊<鼠標右鍵>，選擇菜單中最後一項，將用例的條件判斷由「Else If」轉換爲「If」；

事件交互設置：

十、爲元件「SelectAll」的【鼠標單擊時】事件添加「用例1」，設置條件判斷【選中狀態】於「當前元件」（This）【==】【true】，設置知足條件時的動做爲【選中】元件「SelectItem」；

十一、繼續爲元件「SelectAll」的【鼠標單擊時】事件添加「用例2」，設置不知足操做步驟10的條件時，執行動做爲【取消選中】元件「SelectItem」。

事件交互設置：

以上就是小編爲你們帶來的Axure RP實例教程：全選與取消全選效果。還有更多詳細、實用的功能以及相關軟件Axure RP 9Mac版獲取，你們快來Macdown.com自行探索一番吧。