如何实现TAB切换时按钮变换样式

2017-04-09

AXURE原型设计工具能够实现很多复杂的交互效果,比如TAB标签的动态切换,下面是小编给大家整理的一些有关实现TAB切换时按钮变换样式的方法,希望对大家有帮助!

实现TAB切换时按钮变换样式的方法

当鼠标移动到TAB标签按钮时,按钮样式发生改变(红底白色加粗字体),当点击按钮切换显示内容后,按钮样式发生改变(黄底黑色加粗字体)最终显示如下:

选中按钮“作业批阅结果”,右键>>编辑按钮形状>>编辑悬停样式,在弹出的“设置悬停样式”对话框中选择填充色,字体颜色,加粗等效果,勾选对话框底部的“预览”功能,能够预览设置完时候的样式(需要设置成什么样式可根据自己的设计)

设置完一个按钮,还有另外两个按钮需要设置,这时候可以利用格式刷,类似于word中格式刷的功能,能够将部件的样式批量进行设置(注意:不能利用格式刷复制部件的操作和大小)。

选中按钮“作业批阅结果”,右键>>编辑按钮形状>>编辑选中样式,在弹出的对话框中设置第二种样式(黄底黑色加粗字体),如下图:

在预览中我们发现,当鼠标滑过这三个按钮时,按钮变换样式,但是点击某一个按钮进行内容切换时,却没有显示选中的样式,如何让按钮点击后改变样式呢?

选中第一个按钮“作业批阅结果”,然后再右侧事件编辑栏中选中“onclick(点击时)用例1”进行编辑(注意:前面已经添加了一个事件,点击时显示对应的内容),在弹出的对话框中选择“设置部件为选中状态“,在右侧选择按钮”作业批阅结果“后确定,如下图

完成步骤6后预览效果,此时部件点击后变换了样式(如下图1),不过当再点击第二个按钮时却不能取消掉上一个被选中的样式(如下图2),怎么办呢?

选中本次TAB切换中的三个按钮,右键>>编辑按钮形状>>指定按钮组,在弹出的对话框中输入按钮组名称,例如“查看作业按钮组“,如下图:

完结,预览本小结最终效果

END

更多相关阅读

最新发布的文章