AxureRP8实战手册-案例7(形状:唯一选中项)

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

 案例7.   形状:唯一选中项

案例来源:

京东APP-手机充值

 

案例效果:

  • 整体界面效果:(图1-35)

1_35

 

  • 原型实现效果:(图1-36)

1_36

 

 

 

案例描述:

点击每一个金额按钮时,当前按钮变为红色背景与白色字体,其它按钮恢复白色背景与黑色字体。

 

元件准备:

  • 页面中:(图1-37)

1_37

 

思路分析:

  • 按钮有两种状态与样式,可以通过元件的交互样式来实现;(操作步骤1)
  • 点击按钮时,通过设置当前的元件为被选中的状态使其变色;(操作步骤3)
  • 只允许有一个按钮呈现被选中的样式,可以通过给所有按钮元件设置选项组名称来实现效果。(操作步骤2)

 

操作步骤:

1、在页面上添加一个矩形元件,在元件属性中为其设置【选中】的样式,可参考基础23;(图1-38)

2、在元件属性中,{设置选项组名称}为“Price”;(图1-38)

1_38

3、为元件的【鼠标单击时】添加“用例1”,设置动作【选中】“当前元件”。(图1-39)

1_39

4、最后将此元件复制多个,排列整齐,更改金额文字;(图1-40)

1_40

5、将第一个元件的【选中】勾选,让其在页面加载时即为已选中的状态。(图1-38)

 

补充说明:

  • 本案例中的按钮默认样式设置包括:
  • 圆角半径:5;
  • 阴影:偏移(0,0);模糊(5);
  • 本案例中使用了“FontAwesome4.4.0”图标字体元件库,需要安装字体文件支持,并进行Web字体设置。(参考案例1的补充说明)

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

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

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

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


转载请注明:Axure原创教程网 » AxureRP8实战手册-案例7(形状:唯一选中项)

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

表情

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(6)个小伙伴在吐槽
  1. 楼楼老师很给力,棒棒棒
    辣椒2016-07-21 17:00 回复
  2. 怎么解决选择其它,第一个改成未选择
    lenny2016-08-04 15:51 回复
    • 把这些全部选中后在选项组下命名就可以了
      安奕2016-08-24 14:47 回复
      • 给力
        华子2017-02-08 16:36 回复
  3. 在中继器中,这个方法无效,请问如何解决?
    清尘浊水2016-10-29 15:49 回复
    • 小楼一夜听春语
      中继器属性-取消勾选【取消选项组效果】
      小楼一夜听春语2016-10-29 19:15 回复