案例6.   形状：自定义复选框（2）

案例来源:

多米音乐-用户注册

 

案例效果：

• 选中前：（图1-28）

 

• 选中后：（图1-29）

 

 

案例描述：

案例中的复选框在未选中时和选中时，呈现不同的样式。

 

元件准备：

• 页面中：（图1-30）

 

 

包含命名：

• 矩形（用于制作复选框）：CheckBox

 

思路分析：

• 复选框中的“√”可以使用特殊符号输入到矩形的元件文字中；
• 当矩形中没有文字时，设置元件文字为“√”；（操作步骤1~3）
• 否则，设置矩形的元件文字为空白的。（操作步骤4~5）

 

操作步骤：

• 为元件“CheckBox”的【鼠标单击时】添加“用例1”；
• 为“用例1”添加条件判断，判断元件“CheckBox”的【元件文字】【==】“”（空值）；
• 条件设置截图：（图1-31）

 

• 为“用例1”添加满足条件时的动作，【设置文本】到元件“CheckBox” 为【值】“√”；
• 用例动作设置：（图1-32）

 

• 继续为元件“CheckBox”的【鼠标单击时】添加“用例2”；
• 设置不满足“用例1”的条件时执行的动作，【设置文本】到元件“CheckBox” 为【值】“”。
• 用例动作设置：（图1-33）

 

• 完成以上操作，即实现了整体效果。
• 事件交互设置：（图1-34）

 

补充说明：

本案例中矩形元件“CheckBox”的字体为隶书，与实际网站效果略有差别。

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

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

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

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