复选框选中时文字添加到文本框

AxureRP8.0教程 小楼一夜听春语 2736℃ 0评论

这篇教程,本来我只想简单写写。

但是,我不能容忍不完美的自己。

所以,我把交互做的尽量完善,并把它描述出来,争取每一篇教程都让大家眼前一浪。

看到这么努力的我,还不快来宠幸我?

嘿嘿,我们先来看看要实现什么?

这里,有多个城市的复选框,选中复选框时,在文本框中会出现城市的名称。

你看我屌吗?

说!

看不看?

不是...屌不屌?

好,继续!

当取消某个城市复选框的选中时,文本框中相应的城市名称消失。

 

是不是好屌?

还没完,后面更爽!

删除文本框中某个城市名称的时候,复选框的选中同步取消!

我艹!这个屌!这个屌!

那么,这些交互都是如何实现的呢?

先别忙!

看到这样目测很复杂的交互,总会有些人开始表示不屑:

Axure学那么深干嘛?这样的东西太浪费时间了吧?原型主要是沟通,做那么高保真有什么用?

呵呵你三叔个哒!那是你!

但你不能代表全人类!

作为一个产品相关的职业者,这么说话,注定你的产品视角狭隘!

学的深是为了更高的效率和应用,只有不了解的人才会说Axure只能做产品原型。

去百度一下Axure,看看使用人群都有哪些好吗?

做交互浪费时间?

如果你学得好,都是分分钟的事!

特别是有些内容,做完一遍可以重复使用。

例如马上要讲的这个案例,就能直接拿走放在一些原型中使用。

最后,你不做交互体验测试,你不洽谈投资,你不投标项目,你怎么知道高保真原型没用?

好了,我发泄完了!

下面开始分析这个案例的关键。

1、文本框没有任何内容时,显示“未选择城市”的提示,添加内容时该提示消失。

2、复选框选中时,要在文本框已有文字后方增加当前复选框的元件文字。

3、复选框取消选中时,要在文本框的内容中清除相应的城市名称。

4、文本框中删除某个城市名称时,对应的复选框同步取消选中。

我们先分析这么多,在后面的制作过程中,我们会遇到一些问题,到时再继续分析。

第一步,我们准备两个元件,一个是复选框,另一个是多行文本框(命名为“CityInput”)。

根据思路分析第1点,我们需要给多行文本框元件“CityInput”在属性中添加提示文字。

第二步,根据思路分析第2点,我们在复选框【选中时】设置交互,添加动作【设置文本】于目标元件文本框“CityInput”为目标元件的现有文本连接当前复选框的文本,并以“,”分隔。

目标元件现有文本,我们可以通过“[[Target.text]]”获取,当前元件的文本可以通过“[[This.text]]”获取。

那么,上述公式中的系统变量“Target”即目标元件,“This”即当前元件,“text”即元件文本。

如果不了解系统变量,请先阅读《AxureRP制作原型中变量的使用(3) 》。

最终,我们通过公式“[[Target.text]],[[This.text]]”,就能够完成我们要的效果。

不过,这个时候大家预览原型,选中复选框,会发现一个软件的Bug,就是我们设置的提示文字“未选择城市”留在了文本框中。

艹,先不管,后面再搞它!

第三步,根据思路分析第3点,复选框【取消选中时】设置交互,添加动作【设置文本】于目标元件文本框“CityInput”。

这里我们要把文本框中相应的城市名称剔除。

换一种说法就是,把文本框中,与取消选中复选框文本相同的城市名称替换为空白。

这里,我们可以把公式写成“[[Target.text.replace(This.text,'')]]”。

用白话念的话,把“.”念成“的”,就是“目标元件的元件文本的替换方法(当前元件的元件文本,空白)”。

公式中的函数replace能够对文本内容进行替换,第一个参数是被替换的内容,第二个参数是替换后的内容。

第四步,我们先不做思路第4点,我们先把前面的Bug解决掉。

在文本框内容改变的时候,我们可以把多余的内容替换成空白。

也就是在文本框元件“CityInput”的【文本改变时】设置交互,添加动作【设置文本】于“当前元件”为“[[This.text.replace('未选择地区,','')]]”。

当完成这一步之后,你会发现还有更多问题等着你!

呜哈哈哈哈哈哈哈!

此时此刻,我想淫湿一手...

《复选框交互出问题啦!》

共有五个复选框,

我把他们都选上,

然后取消1、3、5,

问题多的想撞墙!

好诗!!!

有问题解决问题,是我一贯硬挺的作风。

说干就干!

还是先进行思路分析:

5、文本框内容发生改变时,如果文本中出现两个乱搞的逗号,把它们变成一个。

6、文本框内容发生改变时,如果文本的第一位是逗号,就从第二位开始截取到末尾。

7、文本框内容发生改变时,如果文本的末尾是逗号,就从第一位开始截取,截取比当前文本少一位的数量。

分析完毕,开始设置交互。

第五步,根据思路分析第5点,判断当前元件文字是否包含“,,”,符合条件时,执行动作【设置文本】于“当前元件”为“[[This.text.replace(',,',',')]]”。

第六步,根据思路分析第6点,判断当前元件文字第1位是否为“,”,获取元件文字的第一位我们通过公式“[[This.text.charAt(0)]]”获取。

函数charAt能够获取指定位置的字符,字符串索引位置从0开始,也就是说第一位的位置就是0。

当符合上述条件时,执行动作【设置文本】于“当前元件”为“[[This.text.substr(1)]]”。

函数substr能够对文本进行截取,只输入一个参数时,表示从指定位置截取到末尾。字符串索引位置从0开始,所以这里参数为1,就是从第二位截取到末尾。

第七步,根据思路分析第7点,判断当前元件文字末尾是否为“,”,获取元件文字的最末位我们通过公式“[[This.text.slice(-1)]]”获取。

函数slice也是文本截取函数,参数为负数时表示从后向前读取位置,-1就是倒数第一位,只输入一个参数时,表示从指定位置截取到末尾。

当符合上述条件时,执行动作【设置文本】于“当前元件”为“[[This.text.substr(0,This.text.length-1)]]”。

函数substr,输入两个参数时,第一个参数为截取的起始位置,第二个参数为截取的数量。

系统变量length能够获取文本的长度,也就是字符数量,所以第二个参数“This.text.length-1”表示获取文本当前的字符数量然后进行减1的计算。

通过这样的操作,我们就能舍弃掉文本的最后一位。

但是,这样还有问题,当我们手动输入内容时,逗号是不能输入的。

所以,条件判断中,还要判断文本框元件是否获取焦点的状态。

因为,手动输入时是获取焦点的状态,而通过复选框输入是没有获取焦点的状态。

但是,条件判断中,并没有直接判断焦点是否在元件的功能。

不过,我们可以判断【焦点元件文字】【!=】“当前元件”的【元件文字】来实现这个判断。

如果不相等,则说明是通过复选框选择在输入,就可以去除右侧的逗号。

接下来,我们要完成思路分析第4点,删除城市名称时,将对应的复选框取消选中。

触发很明显,是文本内容改变时。

但是,要做什么呢?

添加多个条件判断,分别去判断当前元件的文字是否包含每一个复选框的文字吗?

那样能够完成,但是太复杂!

我的想法是这样:

4.1、让每个复选框自己去判断自己的文本是否没有被文本框的文本包含,如果不包含的话取消选中自己的选中。

4.2、文本框内容发生改变时,给这些复选框发一个指令让他们自己去执行自己的判断和动作。

有了思路,接下来就是实现过程。

第八步,其实我在复制复选框为多个之前,已经偷偷摸摸的干了一件事,就是思路分析第4.1点!

我给复选框的【载入时】添加了交互,设置条件判断元件“CityInput”的元件文字是否包含“当前元件”的元件文字,符合条件的话执行动作【选中】“当前元件”。

做完这个设置之后,才把复选框复制为多个,编辑为不同的城市名称。

大家现在可以设置完一个复选框的【载入时】交互后,点中【载入时】进行Ctrl+C的复制操作(或者在上面点右键选择复制),然后,点中另一个复选框元件,进行Ctrl+V的粘贴操作(点中元件就粘贴,没有多余操作,很神奇的哦!),这样就能够把交互复制粘贴给其他复选框。

第九步,根据思路第4.2点,我们为元件“CityInput”添加交互,在之前【文本改变时】添加的case1中再增加一个动作。

这个动作叫【触发事件】,通过这个动作我们触发每一个复选框的【载入时】事件。

到这里,这个案例我们就制作完成了。

另外,当复选框数量很多时这种方法也显得繁琐,我在源文件中提供了一种使用中继器的实现方法,再多复选框也只是在数据集中添加城市名称。

还有就是,当显示城市名称的元件不是文本框时如何操作?

在源文件中,我也给出了答案。

最后,再说点题外话。

大家有没有觉得我的东西好长?

没办法,为了让更多的人能爽,我只能尽量长一些,细一些!

我的每篇教程都要写3个小时以上,比如这篇写了4个小时。

不过,相比给某一个人解答问题,我更乐于把时间放在写教程上,这样才能帮助更多的人。

所以,那些私聊我问问题受到冷落,在背后说我坏话的人,羞愧去吧!

还有,那些问问题连个“请”字都不会说,问完问题连个“谢”字都没有的人,一边玩儿去吧!

最后,邀请大家关注微信订阅号“iaxure”(二维码在本站首页右上方),及时获取本站最新动态内容。

硬广插入:《两天掌握Axure RP 8》线下培训,北京、上海正在招生,报名地址http://www.kouer.com。

源文件下载:http://downloads.iaxure.com/checkbox_input_new.rp

 

 

 

 


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

《AxureRP 8 入门与实战 - 入门篇》------从零入门进阶的最佳课程------【点此查看详情】

《AxureRP 8 入门与实战 - 案例篇》------实战手册图书的同步视频------【点此查看详情】


转载请注明:Axure原创教程网 » 复选框选中时文字添加到文本框

喜欢 (27)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(5)个小伙伴在吐槽
  1. 凉初2017-08-16 17:00 回复
  2. 🙂
    onetwothree2017-08-16 17:10 回复
  3. 楼总厉害了,果然是屌大。哦,不是大屌
    林深照梅鹿2017-08-16 17:17 回复
  4. 感觉老师前戏很足啊,我的方法比这个简单些,就是进去、出来、.......是添加、删除。
    大楼2017-08-16 17:34 回复
  5. 深入浅出!!!
    没有昵称2017-08-16 20:09 回复