Axure教程:中繼器如何切換標(biāo)記狀態(tài)?
中繼器如何切換標(biāo)記狀態(tài)呢?一定有很多PM和我一樣為此苦惱,一起來看看作者的解答。
寫在前面
在之前的文章《Axure教程:如何使用Axure中繼器元件?》中,@wu賴、在評論里指出:
有瑕疵,選中一次后背景顏色改變再點(diǎn)擊一次背景顏色變成原始狀態(tài),但這行其實(shí)狀態(tài)還是標(biāo)記狀態(tài),會一起被刪除。
問題產(chǎn)生的原因是什么呢?答案是當(dāng)我們點(diǎn)擊中繼器某一行的時(shí)候,該行的選中狀態(tài)會“toggle”而標(biāo)記狀態(tài)不會“toggle”也不會變?yōu)椤癴alse”,也就是說,中繼器只是切換了選中狀態(tài)而沒有切換標(biāo)記狀態(tài)。
因此當(dāng)點(diǎn)擊某一行兩次時(shí),該行選中狀態(tài)為“false”→“true”→“false”,而標(biāo)記狀態(tài)為“false”→“true”→“true”。于是我們看到的視覺效果就是白→藍(lán)→白,而該行卻依然處于標(biāo)記狀態(tài),刪除處于標(biāo)記狀態(tài)的行時(shí)該行依然會被刪除。
這個(gè)問題看似簡單,其實(shí)不然。在網(wǎng)上也無法搜到正確的解決方案。有的只是如何“標(biāo)記行”和“取消標(biāo)記”,并沒有“切換標(biāo)記狀態(tài)”的方法。
那么,中繼器到底該如何切換標(biāo)記狀態(tài)呢?
上下求索
想法一
一下子想到的便是,既然點(diǎn)擊時(shí)行的選中狀態(tài)可以“toggle”,那標(biāo)記狀態(tài)也跟著“toggle”不就好了?不幸的是,Axure并不支持對行標(biāo)記狀態(tài)的“toggle”。So bad.
點(diǎn)擊中繼器模式編輯操作區(qū)中的組合,在右側(cè)“檢視:組合——交互”中雙擊“Case 1”打開用例編輯<鼠標(biāo)單擊時(shí)>面板,如下圖所示,可以看到?jīng)]有“切換標(biāo)記狀態(tài)”動作,只有“標(biāo)記行”和“取消標(biāo)記”動作。
想法二
問題總會有辦法解決的!既然選中狀態(tài)可以“toggle”,標(biāo)記狀態(tài)不可以“toggle”,那我們可不可以刪除處于選中狀態(tài)的行呢?答案是Axure也不支持刪除處于選中狀態(tài)的行,只支持刪除處于標(biāo)記狀態(tài)的行。真令人難過。
切換到主界面,點(diǎn)擊選擇用于刪除的按鈕,在右側(cè)“檢視:矩形——交互”中雙擊“Case 1”打開用例編輯<鼠標(biāo)單擊時(shí)>面板,如下圖所示,可以看到?jīng)]有“已選中”選項(xiàng)。
想法三
咦,除了已標(biāo)記,這不還有個(gè)條件嘛!說不定那里有我們想要找的答案!點(diǎn)進(jìn)去一看,還是可用的條件,絕望。。。
選擇“條件”選項(xiàng),點(diǎn)擊右下角“fx”,試圖設(shè)置刪除行的條件為[[“isPitchOn”==true]],然而如下圖所示,并沒有這樣的變量或函數(shù)。
條件判斷
山窮水盡疑無路,柳暗花明又一村。
點(diǎn)擊中繼器模式編輯操作區(qū)中的組合,在右側(cè)“檢視:組合——交互”中雙擊“Case 1”打開用例編輯<鼠標(biāo)單擊時(shí)>面板,我們看到有個(gè)“添加條件”的按鈕。
點(diǎn)開看看?可以看到,我們可以根據(jù)行的選中狀態(tài)來決定對應(yīng)用例(也就是這里的Case1:切換選中狀態(tài)和標(biāo)記行)的執(zhí)行與否。
于是腦海里產(chǎn)生了這樣的想法:
if (選中狀態(tài) == false) {選中狀態(tài) == true;標(biāo)記狀態(tài) == true;}
if (選中狀態(tài) == true) {選中狀態(tài) == false;標(biāo)記狀態(tài) == false;}
嗯!一定就是這樣了!試試看!
解決方案
點(diǎn)擊中繼器模式編輯操作區(qū)中的組合,在右側(cè)“檢視:組合——交互”中雙擊“Case 1”打開用例編輯<鼠標(biāo)單擊時(shí)>面板,點(diǎn)擊“添加條件”按鈕,打開<條件設(shè)立>面板,將判斷變量設(shè)為“選中狀態(tài)”,判斷值設(shè)為“false”,如圖所示。
按“確定”按鈕保存,關(guān)閉條件設(shè)立面板,關(guān)閉用例編輯<鼠標(biāo)單擊時(shí)>面板,回到中繼器模式編輯操作區(qū)。在右側(cè)“檢視:組合——交互”中右鍵單擊“鼠標(biāo)單擊時(shí)”,選擇“添加用例”。
會自動彈出用例編輯<鼠標(biāo)單擊時(shí)>面板,點(diǎn)擊正上方“添加條件”按鈕,設(shè)置判斷變量為“選中狀態(tài)”,判斷值為“true”。
按“確定”按鈕關(guān)閉條件設(shè)立面板,回到用例編輯<鼠標(biāo)單擊時(shí)>面板,在左側(cè)“添加動作”欄點(diǎn)擊“元件——取消選中”添加取消選中動作。
再在左側(cè)“添加動作”欄點(diǎn)擊“中繼器——數(shù)據(jù)集——取消標(biāo)記”添加取消標(biāo)記動作。
點(diǎn)擊“確定”按鈕關(guān)閉用例編輯<鼠標(biāo)單擊時(shí)>面板,回到中繼器模式編輯操作區(qū),可以在右側(cè)“檢視:組合——交互”中看到此時(shí)鼠標(biāo)單擊時(shí)會執(zhí)行的動作。
大功告成!
點(diǎn)擊上方“預(yù)覽”按鈕查看最新效果。
本文由 @許木勝 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
前面分享了自己的思考經(jīng)過還不錯(cuò),全部看得到。
看完抓住的關(guān)鍵點(diǎn)是“通過再次點(diǎn)擊來實(shí)現(xiàn)標(biāo)記的取消”,這適用于多選的情況,如果是單選呢?
樓主的語言和文字的組織能力比較差,前面的廢話太多了,而且沒有什么關(guān)聯(lián)系,建議大家只看最后的交互動作及條件設(shè)置就可以了,結(jié)果是可以實(shí)現(xiàn)的
請教一下 將中繼器設(shè)置鼠標(biāo)單擊某一行時(shí)改行文字顏色改變(矩形設(shè)置選中時(shí)字體顏色改變,鼠標(biāo)單擊時(shí)設(shè)置該元件選中) 那我單擊另一行如何將選中狀態(tài)切換到另一行
哪有這么麻煩,就一招搞定。
先取消標(biāo)記“全部”——再標(biāo)記“this”就可以了。
你才是王道,簡單粗暴。Thx~
這樣的話,選擇第二個(gè)的時(shí)候,就會把第一個(gè)取消標(biāo)記。導(dǎo)致想一次性刪多個(gè)的話,只有最后點(diǎn)擊的被刪掉。
有用
不會函數(shù),不會中繼器的小白看著好吃力,所以中繼器在一般原型中真的用處很多嗎,我至今還沒用過 ?? ??
不行啊,刪除中繼器當(dāng)中的行要雙擊那個(gè)行,你所給的預(yù)覽頁面也是打不開,哎 ??
你這個(gè)我還是看不懂(昨天才開始學(xué))。但看了以后還可以這樣: case1:設(shè)置選中狀態(tài)為toggle ;標(biāo)記this在(中繼器)。
case2:(條件設(shè)置:if選中狀態(tài)=fasle)取消標(biāo)記行this在(中繼器)
應(yīng)該就可以了
你這次改的刪除這塊,我剛才試了一下,也許可以簡單點(diǎn)。
你試下:在刪除行時(shí)選擇“條件”(不選“已標(biāo)記),點(diǎn)擊fx,選擇”選中狀態(tài)“,動物。
簡單好用哎
厲害厲害!
許久不走邏輯,繞了10分鐘才繞明白,受教了
這教程要我看我也煩,需要靜下心來慢慢看才行 ??
( )氣十足~自個(gè)兒填2333
快叫( )( ) ??