最新消息:本站教程基于Axure RP 9.0.0.3723及更高版本,请在学习前确认软件版本是否符合要求,以免因为界面差异导致学习障碍!

唯一选中的选项

教程 小楼一夜听春语 14774浏览

在《常用样式设置(2》中,我们实现了一个七牛云的商品卡片。

之后,在《动态样式的按钮》我们对购买按钮进行了动态样式的处理。

当用户点击购买按钮之后会打开新的页面,在新的页面中仍然可以选择不同的套餐。

以“短信类别”为例。

我们能够看到,当鼠标指针进入选项时,选项的文字变为了蓝色。

当点击某一套餐的选项时,选项的样式整体发生了改变。

很显然,这是交互样式的作用。

这里我们需要用到“鼠标悬停的样式”与“元件选中的样式”。

温馨提示:关于本案例中交互样式的设置,可以参考《Axure的7种交互样式(1)-鼠标的交互样式》与《Axure的7种交互样式(3)-选中的交互样式》。

在画布中放入一个文本标签元件和两个矩形元件,设置好默认的文字与样式。

为两个矩形选项添加“鼠标悬停的样式”,将文字颜色设置为蓝色,颜色代码“00A0DE”。

再为两个矩形选项添加“元件选中的样式”,将文字与边框的颜色设置为蓝色,颜色代码为“00AAE7”,填充颜色设置为浅蓝色,颜色代码“E5F6FD”。

完成交互样式的设置之后,我们添加交互事件,让每个矩形选项被[单击时]都能变为[选中]的状态。

以第一个选项为例,另一个选项设置相同。

此时,在浏览器中查看原型的话,已经能够点击选项改变颜色了。

但是,此时所有的选项都能改变颜色,没有实现只能选中其一的效果。

所以,我们还要通过给所有选项添加相同的[选项组]来实现唯一的选中。

温馨提示:如果不了解什么是选项组,请先学习《元件属性中的组》。

此时还有一个小问题。

仔细看上图就会发现,两个选项中间的边框是灰色的。

这是因为当前选项的边框被另一选项的边框给遮盖了。

所以,我们还需要给每个选项添加一个交互动作,当选项被[单击时]将[当前]选项[置于顶层]。

到这里,我们就完美的完成了这个案例。

/教程源文件/

不习惯看文字教程?还有《Axure RP 9萌新修炼视频》奉上!

转载请注明:iaxure.com » 唯一选中的选项