AxureRP8实战手册-案例6(形状:自定义复选框②)

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

 案例6.   形状:自定义复选框(2)

案例来源:

多米音乐-用户注册

 

案例效果:

  • 选中前:(图1-28)

1_28

 

  • 选中后:(图1-29)

1_29

 

 

案例描述:

案例中的复选框在未选中时和选中时,呈现不同的样式。

 

元件准备:

  • 页面中:(图1-30)

1_30

 

 

包含命名:

  • 矩形(用于制作复选框):CheckBox

 

思路分析:

  • 复选框中的“√”可以使用特殊符号输入到矩形的元件文字中;
  • 当矩形中没有文字时,设置元件文字为“√”;(操作步骤1~3)
  • 否则,设置矩形的元件文字为空白的。(操作步骤4~5)

 

操作步骤:

1、为元件“CheckBox”的【鼠标单击时】添加“用例1”;

2、为“用例1”添加条件判断,判断元件“CheckBox”的【元件文字】【==】“”(空值);

  • 条件设置截图:(图1-31)

1_31

3、为“用例1”添加满足条件时的动作,【设置文本】到元件“CheckBox” 为【值】“√”;

  • 用例动作设置:(图1-32)

1_32

4、继续为元件“CheckBox”的【鼠标单击时】添加“用例2”;

5、设置不满足“用例1”的条件时执行的动作,【设置文本】到元件“CheckBox” 为【值】“”。

  • 用例动作设置:(图1-33)

1_33

6、完成以上操作,即实现了整体效果。

  • 事件交互设置:(图1-34)

1_34

 

补充说明:

本案例中矩形元件“CheckBox”的字体为隶书,与实际网站效果略有差别。


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

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

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

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


转载请注明:Axure原创教程网 » AxureRP8实战手册-案例6(形状:自定义复选框②)

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

表情

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(10)个小伙伴在吐槽
  1. 设置的checkbox用例语言与教学一致,为什么出来的效果是默认没勾选,单击时才勾选的?
    喵酱2016-07-25 13:49 回复
  2. 这个案例 勾选后就无法取消?
    青城2016-08-26 14:22 回复
  3. 跟实例4的区别在哪里呢
    鹿鹿2016-09-04 15:13 回复
    • 更高保真 😎 ,但是感觉复选框没必要这么复杂吧。不过老师应该是引入新的知识点吧
      lemon不酸2016-09-29 14:12 回复
  4. 老师,为什么我的勾无法设置颜色?
    ECHO2016-09-05 19:25 回复
    • 哎呀,问完就自己试出来了,不用解答了,谢谢~
      ECHO2016-09-05 19:28 回复
      • 怎么设置的昂?
        陌上郎2016-10-26 13:19 回复
      • 是吧用例的值切换成富文本来设置么?
        陌上郎2016-10-26 13:23 回复
  5. 话说素材在哪儿?
    cheng2017-06-22 17:43 回复
  6. 取消勾选后无法再次选中,求老师指点,谢谢~~
    irene2017-09-25 13:53 回复