案例18. 形状：自定义复选框（3）

案例来源:

美丽说-宝贝搜索

 

案例效果：

• 鼠标移入方框或文本时：（图1-147）

• 鼠标点击方框或文本时：（图1-148）

• 鼠标再次点击方框或文本时：（图1-149）

案例描述：

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

 

元件准备：

• 复选框的制作：（图1-150）

包含命名：

• 矩形（用于复选框）：BelowShape
• 矩形（用于鼠标移入效果）：AboveShape

 

思路分析：

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

操作步骤：

1、在元件属性中添加【选中】的交互样式，可参考元件准备（图1-150）中元件“AboveShape”的默认样式；（图1-151）

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

• 用例动作设置：（图1-152）

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

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

• 用例动作设置：（图1-153）

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

6、完成上述交互后，将做好的内容复制多份，并修改选项文字；（图1-154）

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

补充说明：

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

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

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

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

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

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