實現的效果1:頁面中,默認為全部選中狀態,單擊一次,取消全選;單擊二次,再次全選,來回切換;效果1如下:
如果要實現效果2:打開頁面,默認全部未選中,點擊后全部選中,再次點擊,全部不選中,則可以將方框默認設置為藍色底,然后選中效果中,白色填充即可;效果2如下:
默認打開效果-----------------------------------------------單擊一次效果-------------------------------------二次單擊效果
下面是按照第一個效果來進行講解;
第一步:繪制選擇框;Axure中,設置三個多選框;多選組合命名55,選項一組合命名51,選項二組合命名52;
我這里是一個方框,里面一個白色對號,通過設置選中后方框藍色填充,來區分是否選中;效果1,多選框默認為白色底色,效果2默認為藍色底色;
第二步:三個圖標,設置用例為【鼠標單擊時】-選中狀態為【toggle】,單擊切換選中狀態;
用例添加示例如下;設置選中后 則單擊切換選中狀態;
第三部:設置【選中】時,填充藍色;;操作如下;效果1,選中則填充藍色;效果2,選中則填充白色;
這個時候生成的頁面中,效果是展示為默認選中狀態,首次單擊沒反應,再次點擊,取消選中效果生效;這里為什么會有一次單擊無效呢?
第四步:這里需要把整個圖標,設置為選中情況;這個設置完后,就完全符合,打開頁面,藍色填充效果,展示為預期的選中效果,單擊后,藍色填充物,展示未取消選中效果;可正常切換;
;,
注意:多個多選框,則每個多選框都需要設置以上內容;鼠標單擊-切換選中狀態(toggle),效果1:設置選中狀態的樣子藍色填充(原圖為無底色),設置為默認選中狀態;效果2:設置選中狀態為白色填充(原圖為藍色底),設置為默認選中效果;
三個選擇框的設置到此就完成了,現在對控制全選按鈕進行條件編輯設置;
-------------------------------------------------這里是一些原因的說明---------------------------------------------------------------------------------------------------
首先梳理一下鼠標單擊后的用例關系,當全選框為選中狀態,則選項一和選項二都為選中狀態;當全選框切換為取消選中,則選項一和選項二都為取消選中狀態;
這里注意,在case1和case2里,都必須設置一下選中狀態切換的動作;且這個動作需要再用例的第一順位,否則不生效;
但是,這樣操作后發現,在頁面中,頁面展示為默認全部選中的狀態;如下
默認頁面效果----------------------------------------------單擊第一次------------------------------------------------單擊第二次
這個與預期不符;
原因是,設置選中效果與切換效果之間疊加后,導致的效果反了;
第一次單擊,執行case1,切換選中狀態1【選中】-2【不選中】,此時第一次單擊,切換成了選中狀態1,但是展現效果是不填充;
選項一和選項二判斷【全選】狀態為ture,則執行也是ture,則保持不變;
單擊第二次,toggle的效果,是2【不選中】,也就是fasle,執行case2,因此全選為選中的樣子,選項一和選項二執行case2,都更改為fasle;
這里可能有點繞,回頭會整理出更容易理解的說法補充上來;
這個時候,將條件設置的反過來,效果就對了;
默認打開效果----------------------------------------------單擊一次效果----------------------------------------------二次單擊效果
第五步: 或者可以直接參考下面的用例內容;出來的效果就是正常的;
這個時候,效果就對了;