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

案例来源:

京东APP-手机充值

 

案例效果：

• 整体界面效果：（图1-35）

 

• 原型实现效果：（图1-36）

 

 

 

案例描述：

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

 

元件准备：

• 页面中：（图1-37）

 

思路分析：

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

 

操作步骤：

• 在页面上添加一个矩形元件，在元件属性中为其设置【选中】的样式，可参考基础23；（图1-38）
• 在元件属性中，{设置选项组名称}为“Price”；（图1-38）

 

• 为元件的【鼠标单击时】添加“用例1”，设置动作【选中】“当前元件”。（图1-39）

 

• 最后将此元件复制多个，排列整齐，更改金额文字；（图1-40）

 

• 将第一个元件的【选中】勾选，让其在页面加载时即为已选中的状态。（图1-38）

 

补充说明：

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

---------------------------------------------------- End ----------------------------------------------------

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

小楼老师倾力打造AxureRP7.0精品课程系列，独特的技术，淫荡的思路，销魂的声音，丰富的姿势，润滑的体验，超爽的感觉，想要？就从下面进入！

《AxureRP7.0从入门到精通》------从零向高手蜕变的必修课------<<想上它，插这里！>>