自定义复选框和单选按钮 | Custom Checkbox and Radio Button

使用形状元件自动以复选框和单选按钮,使用“选中”交互样式和“显示/隐藏”动作来表示复选框和单选按钮的选中状态。

STEP 0:下载练习文件

如果你还没有练习文件,请下载Axure Training.rp并在Axure RP中打开它,该文件包含了Axure培训网站上每个教程的对应页面。我们建议你始终使用我们准备好的文件来学完教程,但是如果你无法保证,那也没有关系,我们也会告诉你在不使用Axure Training.rp文件的情况下,如何创建新文件来完成教程。

设置:隐藏勾选标记

在练习文件中打开“自动以复选款和单选按钮”页面,画布中有两个元件组合:“自定义复选框”和“自定义单选按钮”,这两个组合都有一个灰色边框的“按钮”形状元件,一个绿色的“勾选标记”形状元件,和一个名为“标签”的矩形元件。

在画布上点击两次“自定义复选框”组合中的“勾选标记”形状元件来选中它,第一次点击是选中组合,第二次点击才是选中元件本身(或者,你也可以直接在“概要”窗格中直接选中形状),然后点击样式工具栏中,或检视窗口中样式页签下的“隐藏”复选框来隐藏它。

用同样的方式隐藏“自定义单选按钮”组合中的“勾选标记”形状元件。

自定义复选框
STEP 1:点击时切换选中状态和勾选标记的可见性

选中“自定义复选框”组合,然后在检视窗口中的属性页签下双击“鼠标单击时”来添加一个新的鼠标单击时用例。

在用例编辑器中,点击左侧“添加动作”中的“切换选中状态”(位于“设置选中”下面),在右侧“配置动作”栏下选择“当前元件”,这样就可以切换组合本身以及它所包含的所有元件的选中状态,也就可以切换“按钮”元件的选中交互样式。

回到左侧“添加动作”栏,点击“切换可见性”(位于“显示/隐藏”下面),在右侧“配置动作”栏,选择“自定义复选框”组合下的“勾选标记”元件。

点击“确定”按钮关闭用例编辑器。

STEP 2:预览

在Web浏览器中预览页面,点击自定义复选框,注意观察按钮的边框变成绿色并且更粗,同时勾选标记也显示出来。

再次点击自定义复选框,将按钮恢复到默认样式,并且勾选标记隐藏。

自定义单选按钮
STEP 1:创建选项组

回到Axure RP中,选中“自定义单选按钮”组合,然后在检视窗口中的属性页面下,向下滚动到“组合”区域,在“设置选项组名称”的文本框中输入“自定义单选按钮组”(不含引号)。

这可以将元件组合添加到一个选项组中,以便当一个元件或组合被选中时,同组中的其他元件或组合可以自动取消选中(我们将在后面的步骤创建更多单选按钮来测试这一功能)。

STEP 2:点击时设置选中并显示勾选标记

在“自定义单选按钮”组合被选中的状态下,双击检视窗口中属性页签下的“鼠标单击时”来添加一个新的鼠标单击时用例。

在用例编辑器中,点击左侧“添加动作”栏中的“显示”(位于“显示/隐藏”下面),在右侧“配置动作”栏中选择“当前元件”,这样可以将选项组及它包含的所有元件设置为选中状态,以便激活“按钮”元件上的“选中”交互样式。

回到左侧“添加动作”栏,点击“显示”(位于“显示/隐藏”下面),在右侧“配置动作”栏中选择“自定义单选按钮”组合下的“勾选标记”元件,注意在这里我们没有使用“切换”动作,是因为通常情况下单选按钮不能通过再次点击来取消选中。

点击“确定”按钮关闭用例编辑器。

STEP 3:取消选择时隐藏勾选标记

因为在单选按钮组中一次只能有一个单选按钮被选中,我们要确认一下我们的自定义单选按钮的勾选标记,在其他单选按钮被选中的时候会自动隐藏,我们可以通过勾选标记的“取消选中时”事件来验证。

在画布上点击两次“自定义单选按钮”组合中的“勾选标记”形状元件来选中它,第一次点击是选中组,第二次点击是选中元件本身(或者你也可以直接在概要窗格中选中这个形状)。然后在检视窗口中的属性页签下点击“更多事件”下拉列表,在列表的底部点击“取消选中时”来添加一个新的取消选中时用例。

在用例编辑器中,点击左侧“添加动作”栏中的“隐藏”(位于“显示/隐藏”下面),在右侧“配置动作”栏中选择“当前元件”,这样可以在“勾选标记”元件被取消选中时将其隐藏,也就是在“自定义单选按钮”组合被取消选中时。这种情况会在“自定义单选按钮组”选项组中的另外一个单选按钮被选中的时候发生。

点击“确定”按钮管理用例编辑器。

STEP 4:复制自定义单选按钮组合

利用一个单选按钮来测试功能是比较困难的,所以我们在多创建几个单选按钮。

在“自定义单选按钮”组合上单击鼠标右键,并在弹出的右键菜单中选择“复制”,然后在画布上点击鼠标右键并选择“粘贴”,将复制的元件组合粘贴在画布上,重复操作一遍以创建第三个副本。

复制的“自定义单选按钮”组合将具有与原始组合相同的交互,属性和样式,所以我们不需要再采取任何操作就可以使他们正常工作,不过你可能会像重命名组合并且修改它们的标签文本以便可以区分它们。

STEP 5:预览

在Web浏览器中预览页面,点击其中一个自定义单选按钮来中它,以便激活它的“选中”交互样式并显示勾选标记。

然后点击不同的单选按钮来切换选择,在按钮之间切换时,你会注意到之前选中的按钮就会自动取消选中,并且恢复默认样式以及隐藏勾选标记。

评论(0 个评论)

发表回复

您的电子邮箱地址不会被公开。