Axure 8.0實(shí)例:復(fù)選框的應(yīng)用

14 評(píng)論 45325 瀏覽 64 收藏 6 分鐘

很多業(yè)務(wù)系統(tǒng)之中都會(huì)有以列表的形式展現(xiàn)數(shù)據(jù)的情況,那么問題來了,對(duì)列表選擇時(shí)會(huì)出現(xiàn)多選、全選、反選的問題,今天就來叨一叨如何使用axure原型工具實(shí)現(xiàn)復(fù)選框的多選、全選和反選。照例,先上預(yù)覽。

預(yù)覽

一、元件準(zhǔn)備

  1. 全選復(fù)選框一個(gè)。用來控制全選或全不選的,命名“全選”;
  2. 文本標(biāo)簽一個(gè)。用來控制反選,命名“反選”;
  3. 中繼器一個(gè)。用來存放內(nèi)容的,命名“中繼器”。里面放置一個(gè)復(fù)選框,一個(gè)文本標(biāo)簽。復(fù)選框命名“內(nèi)容復(fù)選框”,文本標(biāo)簽命名“內(nèi)容文本”;
  4. 添加“全局變量”一個(gè)。用來存放選中的“內(nèi)容復(fù)選框”的個(gè)數(shù)。命名為“test”;

二、添加用例

1、“全選”復(fù)選框添加用例。先來分析一下:①點(diǎn)擊“全選”選中時(shí),“內(nèi)容復(fù)選框”必須全部選中;②點(diǎn)擊“全選”取消選中時(shí),“內(nèi)容復(fù)選框”必須全部取消;

①點(diǎn)擊“全選”復(fù)選框,選中時(shí),設(shè)置“內(nèi)容復(fù)選框”為選中狀態(tài);

②點(diǎn)擊“全選”復(fù)選框,取消選中時(shí),設(shè)置“內(nèi)容復(fù)選框”為未選中狀態(tài)。這里可能會(huì)有朋友有疑問,為什么不在“取消選中時(shí)”中添加用例,非得在“鼠標(biāo)單擊時(shí)”用添加,而且還要去判斷“全選”復(fù)選框的狀態(tài)是否為未選中,這里說明一下:如果這里把設(shè)置“內(nèi)容復(fù)選框”為未選中放到“取消選中時(shí)”里,那么后面完成的復(fù)選功能會(huì)有一點(diǎn)問題,就是當(dāng)你取消一行的選中狀態(tài)時(shí),所有的行都會(huì)全部取消,想要更直觀的話,你可以自己試一試;

2、“反選”文本標(biāo)簽添加用例。反選的效果就是,選中的變?yōu)槲催x中,未選中的變?yōu)檫x中,這里很簡(jiǎn)單,直接設(shè)置“內(nèi)容復(fù)選框”的狀態(tài)為“切換選中狀態(tài)”即可;

3、“內(nèi)容復(fù)選框”添加用例。分析一下:①如果“內(nèi)容復(fù)選框”有一個(gè)沒有選中,那么“全選”復(fù)選框就必須為未選中;②如果“內(nèi)容復(fù)選框”全部選中,那么“全選”復(fù)選框就必須為選中狀態(tài);

①在“內(nèi)容復(fù)選框”狀態(tài)為未選中時(shí),首先設(shè)置“全選”復(fù)選框?yàn)槲催x中,然后將“test”全局變量的值減去1;

“內(nèi)容復(fù)選框”選中時(shí),“test”全局變量加1;

②在“內(nèi)容復(fù)選框”全部選中時(shí),“全部”復(fù)選框就要為選中狀態(tài)。那么如果判定“內(nèi)容復(fù)選框”全部選中了呢?這里就用到了“test”全局變量了,或許有朋友看到這里才明白為啥要設(shè)置一個(gè)“test”全局變量了。通過“中繼器”的行數(shù)與“test”做比較,如果兩者相等,那么不就是所有的行已經(jīng)選中了,直接設(shè)置“全選”為選中狀態(tài)就完事了;

4、“中繼器”添加用例。給中繼器添加“每項(xiàng)加載時(shí)”用例,將中繼器的內(nèi)容通過“文本內(nèi)容”文本標(biāo)簽顯示出來;

三、預(yù)覽

閑話少說,F(xiàn)5吧^_^? ^_^? ^_^

 

本文由 @無淚 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 一樣的設(shè)置,點(diǎn)全選按鈕的時(shí)候全局變量加的值是直接一個(gè)一個(gè)內(nèi)容復(fù)選框點(diǎn)的兩倍,這是怎么回事?

    來自浙江 回復(fù)
  2. RP8打開可以,RP9打開“將下面的選項(xiàng)全部選中后,全局的全選自動(dòng)選中”會(huì)失效

    來自福建 回復(fù)
  3. 樓主知道中繼器怎么批量復(fù)制行么

    來自浙江 回復(fù)
  4. 根本就不用這么麻煩的好嗎,直接用if判斷,如果點(diǎn)擊選中一級(jí)菜單的復(fù)選框,那么所有子菜單的復(fù)選框全部設(shè)為true,再設(shè)置一下,取消選中時(shí)全部設(shè)為false,我看到你這個(gè)分享,我都要笑死了

    來自上海 回復(fù)
    1. 如果覺得沒有幫助請(qǐng)忽略,也煩請(qǐng)您試一下您的方法能完全做好全選的功能再來指教,依照您的方法,不才有幾個(gè)問題想要請(qǐng)教:
      1、將下面的選項(xiàng)全部選中后,全局的全選如何自動(dòng)選中;
      2、取消選中中的任意一項(xiàng)后,全局的全選如何自動(dòng)取消;

      來自浙江 回復(fù)
  5. 大佬,我是新手,請(qǐng)教一下,這個(gè)可以設(shè)置選中四個(gè)復(fù)選框的時(shí)候就全選的復(fù)選框也打勾嗎?能設(shè)定復(fù)選框的選中個(gè)數(shù)嗎?方便的話能不能發(fā)個(gè)原型看看???

    來自浙江 回復(fù)
  6. 不錯(cuò)哦。今天看了遍,明天照著操作,不懂就問你哈!!

    來自湖北 回復(fù)
  7. 謝謝分享!
    參照做了一下,有個(gè)問題,希望請(qǐng)教一下:
    預(yù)覽里,沒有體現(xiàn)【如果“內(nèi)容復(fù)選框”全部選中,那么“全選”復(fù)選框就必須為選中狀態(tài)】的效果;參照練習(xí)時(shí),沒有實(shí)現(xiàn)這個(gè)效果。能不能提供原型文件,學(xué)習(xí)一下?謝謝!

    來自廣東 回復(fù)
    1. 我也遇到了,怎么回事呢?

      來自新疆 回復(fù)
    2. 不是選值等于[[n]],要選變量值

      來自浙江 回復(fù)
    3. 我也是這個(gè)問題。

      來自湖北 回復(fù)
  8. 你好,我想問一下,全選復(fù)選框鼠標(biāo)單機(jī)取消的時(shí)候,設(shè)置條件if this==flase時(shí),里面的this是什么呀。為什么我把條件設(shè)置成if 復(fù)選框狀態(tài)=flase,條件是無效的。謝謝指教,大神??

    回復(fù)
    1. this指的是當(dāng)前元件,就是指當(dāng)前鼠標(biāo)單擊動(dòng)作下的全選復(fù)選框?!癷f 復(fù)選框狀態(tài)==flase”這個(gè)問句中沒有指明是哪個(gè)復(fù)選框,“if全選==flase”是可以的,因?yàn)閠his指的就是全選復(fù)選框,二者意思相同。如果設(shè)置“if內(nèi)容復(fù)選框==flase”而后得到內(nèi)容復(fù)選框=flase,這顯然不對(duì),就好比“如果A恒等于B,則A=B”,這就是無效的因果關(guān)系,將原因直接等于結(jié)果,邏輯上很荒謬。

      來自新疆 回復(fù)
  9. 其實(shí)作者可以出一系列的,挺好的,對(duì)新人幫助很大,可以照著學(xué)習(xí)。 ??

    來自廣東 回復(fù)