AxureRP8实战手册-案例4(图片:自定义复选框①)

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

案例4.   图片:自定义复选框(1)

案例来源:

唯品会-注册界面

 

案例效果:

  • 未选中时:(图1-16)

1_16

  • 鼠标进入时:(图1-17)

1_17

  • 被选中时:(图1-18)

1_18

案例描述:

案例中的复选框在未选中时、鼠标进入时以及选中时,呈现不同的样式。

 

元件准备:

  • 页面中:(图1-19)

1_19

思路分析:

  • 使用图片作为复选框,与“案例3”相似,在元件的鼠标移入和选中时指定不同的图片;(操作步骤1)
  • 鼠标点击复选框时,要切换元件的选中状态。(操作步骤2)

 

操作步骤:

1、设置元件属性中【鼠标悬停】和【选中】的交互样式为不同的图片,可参考基础23;(图1-20)

1_20

2、为图片的【鼠标点击时】事件添加“用例1”,动作为【切换选中状态】“当前元件”。

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

1_21

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

1_22

补充说明:

单选按钮的制作也可以参考本案例。不同的是,需要给单选按钮在元件属性中{设置选项组名称}。

  特别提醒:本教程相关素材请到导航菜单中的【在线阅读】页面中进行下载。


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

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

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

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


转载请注明:Axure原创教程网 » AxureRP8实战手册-案例4(图片:自定义复选框①)

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

表情

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(16)个小伙伴在吐槽
  1. 小楼为毛不留下种子?
    被小楼伤过的人2016-06-12 17:50 回复
    • 小楼一夜听春语
      先说我伤你哪了
      小楼一夜听春语2016-06-12 18:43 回复
  2. 操作步骤1里,交互样式设置,选中图片后右框里什么都没有显示,为啥呢
    yer212016-07-07 15:35 回复
    • 把步骤2做完,需要添加用例,切换选中状态
      任小青2016-09-02 13:22 回复
  3. true和toggle有什么区别呢
    心雨2016-07-08 20:55 回复
    • 小楼一夜听春语
      true为选中 toggle为切换
      小楼一夜听春语2016-07-09 08:43 回复
      • 但是鼠标转换后图标一样的
        在座的的都是辣鸡2016-07-13 16:10 回复
        • 亲测,用toggle,选中之后再单击,可以取消选中,用true就没有这个效果,恩
          亚比2016-09-06 15:41 回复
  4. 学习到了 🙂 ,很大帮助
    我要小楼的脑子2016-08-05 16:12 回复
  5. 老师能详细的说明一下,切换选中状态的含义么,
    skiesion2017-03-16 11:21 回复
  6. 为什么我的是鼠标点击下去会显示打勾,然后松开之后勾就消失掉了
    银桑sama2017-04-20 14:08 回复
  7. 呃 看到后面突然反应过来了 我设置交互样式的时候设置成鼠标按下而不是鼠标选中了
    银桑sama2017-04-20 14:33 回复
  8. 小楼楼,为什么不留下素材呢。这样的方块块很不好找啊
    cheng2017-06-22 15:48 回复
    • 小楼一夜听春语
      文章末尾的红字不是写了素材在哪?
      小楼一夜听春语2017-06-22 17:33 回复
  9. 写素材两个字了么?没看到
    cheng2017-06-23 10:52 回复
    • 正文最后一行 红色的特别提醒 每课文末都有
      jqseven2017-08-06 11:03 回复