首页 > 其他 > 详细

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

时间:2020-04-22 15:27:19      阅读:59      评论:0      收藏:0      [点我收藏+]

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

 AxureRP8.0教程  小楼一夜听春语  4年前 (2016-06-11)  16584℃  0评论

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

案例来源:

唯品会-注册界面

 

案例效果:

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

技术分享图片

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

技术分享图片

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

技术分享图片

案例描述:

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

 

元件准备:

  • 页面中:(图1-19)

技术分享图片

思路分析:

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

 

操作步骤:

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

技术分享图片

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

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

技术分享图片

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

技术分享图片

补充说明:

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

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

 

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

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

原文:https://www.cnblogs.com/sikongluoxing/p/12752135.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!