Axure 多選和取消多選


實現的效果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;

這里可能有點繞,回頭會整理出更容易理解的說法補充上來;

這個時候,將條件設置的反過來,效果就對了;

默認打開效果----------------------------------------------單擊一次效果----------------------------------------------二次單擊效果

 

第五步: 或者可以直接參考下面的用例內容;出來的效果就是正常的;

這個時候,效果就對了;

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM