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

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

 案例18. 形状:自定义复选框(3)

案例来源:

美丽说-宝贝搜索

 

案例效果:

  • 鼠标移入方框或文本时:(图1-147)

1_147

  • 鼠标点击方框或文本时:(图1-148)

1_148

  • 鼠标再次点击方框或文本时:(图1-149)

1_149

案例描述:

鼠标进入复选框或者选项文本时,复选框呈现另一种颜色,离开时恢复原色;鼠标点击复选框或者选项文本时,复选框在切换选中样式。

 

元件准备:

  • 复选框的制作:(图1-150)

包含命名:

  • 矩形(用于复选框):BelowShape
  • 矩形(用于鼠标移入效果):AboveShape

 

思路分析:

  • 使用图标字体“ ”做成未选中状态的复选框“BelowShape”;然后,设置元件选中时的交互样式;这样在元件“BelowShape”选中状态切换时即可显示不同的样式;(操作步骤1)
  • 在鼠标移入选项文本和元件“BelowShape”时,都要显示元件“AboveShape”;(操作步骤2~3)
  • 实际上,可以点击的元件只有“AboveShape”和选项文本,所以,在这两个元件被鼠标点击时,切换元件“BelowShape”的选中状态。(操作步骤4~5)
  • 将做好的元件内容复制多个,变成不同的选项;(操作步骤6)
  • 效果图片中的“11新款狂欢节”不是文本,而是图片;将上面做好的元件复制一份,然后将文本换成图片。(操作步骤7)

操作步骤:

1、在元件“BelowShape”属性中添加【选中】的交互样式,可参考元件准备(图1-150)中元件“AboveShape”的默认样式;(图1-151)

2、为元件“BelowShape”的【鼠标移入时】事件添加“用例1”,设置动作为【显示】“AboveShape”, {更多选项}选择【弹出效果】;“弹出效果”可以让鼠标离开显示的元件时,该元件自动恢复隐藏;

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

3、参考上一步为选项文本添加同样的交互;

4、为元件“AboveShape”的【鼠标单击时】事件添加“用例1”,设置动作为【切换选中动态】“BelowShape”;

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

5、参考上一步为选项文本添加同样的交互;

6、完成上述交互后,将做好的内容复制多份,并修改选项文字;(图1-154)

1_154

7、在第一个选项的文字部分(文本标签)上点击<鼠标右键>,在菜单中选择【转换为图片】,然后双击转换后的图片导入素材中的图片,将图片设置为宽136*高22,并调整好位置。(图1-155)

1_155

补充说明:

  • 本案例中使用了“FontAwesome4.4.0”图标字体元件库,需要安装字体文件支持,并进行Web字体设置;(参考案例1的补充说明)
  • 本案例操作步骤6中,因为复制会导致多个元件重名,如有需要可以为元件重新命名;比如,“BelowShape01”~“BelowShape06”和“AboveShape01”~“AboveShape06”。

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


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

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

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

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


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

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

表情

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(14)个小伙伴在吐槽
  1. 不知道是否我软件有问题,我做完后鼠标由下往上移入“疯狂星期五”时,above shape无法显示,但从上/从右移入时都能正常显示。之后我关闭了图1-152“弹出效果”,再去设置了移出效果,一切正常了.....
    chuppa2016-07-04 13:11 回复
  2. 鼠标再次单击时回到默认效果这个没做出来呀
    阿杜2016-07-27 10:59 回复
    • case:选中的值为toggle,不是默认的true
      jqseven2017-08-12 16:39 回复
  3. 鼠标点了没反应....
    echo2016-09-14 11:19 回复
  4. 步骤一里应该是给BelowShape设置选中,而不是AboveShape
    阿Bennn2016-10-08 16:09 回复
  5. 没做出来
    波波2016-10-13 16:50 回复
  6. 其他都实现了了 但是加了BelowShape鼠标移入时 显示AboveShape弹出效果 就无法实现了 貌似与BelowShape单击时切换选中状态冲突??
    勤奋小学生2017-02-16 18:23 回复
  7. 教程没有讲清楚,1:在做belowshare的时候,需要复制对号为文本并输入矩形设为白色,而不是以一个单独的矩形存在,aboveshare则是以对号作为一个单独的矩形存在的。2:在步骤一对belowshare进行设置时,选中状态有了粉色的填充,字色为白色,就可以看见对号了
    孙悟饭2017-05-10 17:05 回复
    • 一直无法填充边框。这个对号文字是没有边框填充。实现不了这个效果。有大神指导吗?
      v5logo2017-09-15 17:22 回复
      • 边框不需要填充,在“线型”里设置无(none)就行
        designmc2017-12-04 16:11 回复
  8. 步骤一里面不透明度应该选100%,不是0%
    h2co32017-09-20 09:49 回复
  9. 小楼老师,案例18这个有两个小问题,我说一下啊,别介意。
    晚安好梦2017-10-28 15:24 回复
  10. 第一个:步骤一中应该是给BelowShape设置选中样式,跟AboveShape一样就行。第二个:给文本标签设置鼠标移入时不要弹出效果,但要再加一个鼠标移出时隐藏AboveShape的事例。
    晚安好梦2017-10-28 15:29 回复
    • 没错~文本标签去掉【鼠标移入时】的交互,就可以实现循环了
      青廷2017-11-23 12:36 回复