AxureRP7.0从入门到精通(连载37)

Axure书籍 小楼一夜听春语 18455℃ 0评论

1.3.  样式设置

在中继器里面,除了“数据集”、“项目交互”之外,还有一部分就是样式设置。样式设置中可以帮助我们调整项目列表的排版、布局、分页等。

比如图6-8中,每行3支球队的信息,并且球队信息间都有一定的间隔。我们就可以在我们的案例中,设置项目列表的【布局】为【水平】排列,{每行项目数}为“3”项。然后行与列的{填充}都设置为“5”。(图6-17)

图6-17

(图6-17)

   经过上面的设置就实现了我们想要的效果。(图6-18)

图6-18

(图6-18)

在【样式设置】中,还有{设置背景色}和{设置分页}的功能。因为比较简单,在这里就不再举例演示。不过,要注意的是背景色是背景颜色的设置,如果被不透明的元件遮挡的话就没有效果了,所以如果想有背景色的效果记得要把元件的填充颜色取消或者调整成为一定的透明度。

1.4.  属性

中继器虽然是个很复杂的元件,但是它的属性却很简单,只有两个选项。分别是:【取消[单选按钮]组效果】和【取消[选项]组效果】。

关于单选按钮组的效果和选项组的效果,都是我们在之前实现过的,分别在第二章的4.3.6小节和6.3.3.1小节的案例中。

我们给元件添加组的名称是为了让软件知道哪些元件被放进了一个组中,然后软件会自动让这个组中只有一个元件能够是选中状态,以达到唯一被选中的效果。而中继器的这两个属性默认是启用的状态,会把组的效果给取消,所以,当在中继器中设置了组,要记得在页面上点中中继器,取消对应属性的勾选。

案例:唯一选中项

假设我们有一个用中继器制作的学生成绩表。我们希望这个表格里面的单选按钮能够唯一被选中,同时表格整行也会变成灰色。(图6-19)

图6-19

(图6-19)

根据我们学过的知识,我们知道组的效果可以实现唯一被选中,但是中继器中怎么设置呢?

我们来分析一下。中继器是重复的项目列表,也就是能够把一个模板项变成多个项。那是不是生成的项目列表的每一项都都与模板项的属性一致呢?答案是肯定的。

那么,我们给模板项中的单选按钮添加一个组名称“studentitem”,就相当于项目列表中的每一项中的单选按钮有相同的组名称。这就应该能够实现单选按钮组的效果。(图6-20)

图6-20

(图6-20)

但是在浏览器中查看,却发现还是每个单选按钮都会被选中。之所以这样就是忘记了将中继器属性中对应的选项取消掉。取消【取消[单选按钮]组效果】的勾选,再次在浏览器中查看就正常了。(图6-21)

图6-21

(图6-21)

接下来,我们要实现单选按钮被选中时整行变色的效果。

如果要元件能够改变样式,最好的方法就是通过设置交互样式来实现。我们可以将整行的元件都设置好【选中】的交互样式,比如黑色的背景与白色的文字。(图6-22)

图6-22

(图6-22)

   完成了交互样式的设置,我们需要通过动作来触发这个交互样式。但是,点击单选按钮的时候,我们需要整行元件都被选中。那么,需要在动作中把每个元件元件都选中吗?而且,要给每个矩形元件添加组实现唯一一行被选中的效果吗?这么做显然非常麻烦。

其实,有一个很简单的办法,就能解决问题,就是动态面板。

动态面板具有容器的特性,它在被选中的时候,它所包含的所有元件也都会同时选中。更让人高兴的是,动态面板也能够添加组名称,实现唯一被选中的效果。

所以,在这里我们只需要把当前的所有元件选中,然后点击鼠标右键【转换为动态面板】,为其命名为“student_panel”。然后,在动态面板的属性中添加组名称“studentitem2”。就完成了组的设置。(图6-23)

图6-23

(图6-23)

   最后,我们在单选按钮的【鼠标单击时】事件中,添加用例动作【选中】动态面板“student_panel”。还有,不要忘了取消中继器属性中【取消[选项]组效果】的勾选。


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

《AxureRP 8 入门与实战 - 入门篇》------从零入门进阶的最佳课程------【点此查看详情】

《AxureRP 8 入门与实战 - 案例篇》------实战手册图书的同步视频------【点此查看详情】


转载请注明:Axure原创教程网 » AxureRP7.0从入门到精通(连载37)

喜欢 (19)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(14)个小伙伴在吐槽
  1. 为什么用表格,不能整行变色?
    美女2015-10-10 16:41 回复
  2. 做不到 那个表格一直浮动在上面,变色都只是下面的形状变 在网页中不会体现出来
    凤凰涅槃2015-10-14 15:28 回复
    • 小楼一夜听春语
      想想什么叫背景色?如果想看见背景色,是不是要让遮挡的元件自身变成透明?另外,学习要仔细!图6-18下面那段话你是不是没看见?
      小楼一夜听春语2015-10-14 15:42 回复
      • 感谢楼老师! 我做了好几次,还以为做错了。 老师不愧是老师, 顶顶。
        凤凰涅槃2015-10-14 18:00 回复
  3. 老师,分页没有下一页的按钮,怎么分页呢?下一页按钮要自己做吗?
    o西瓜籽o2015-11-10 11:25 回复
  4. 不知道为什么整行变色的效果总是出不来,不知道是哪个步骤不对
    hin2015-12-07 17:38 回复
  5. 点击后整行变色的效果已经出来了。当点击下一行的时候,上一行应变回原色的效果应该如何实现呢?
    winner2016-03-10 09:13 回复
    • 知道了,动态面板也要设置成组。
      winner2016-03-10 09:17 回复
  6. 第一,动态面板已经设置组了,中继器属性那里两个取消效果选项都不选择了。而且已经单选按钮鼠标点击设置动态面板状态=true,一开始点击后整行无变色。第二,通过设置动态面板并且将下面选项都打勾后,整行变色的效果已经出来了。但是当点击下一行的时候,上一行应变回原色的效果应该如何实现呢?麻烦小楼老师解答下,谢谢了
    xiaoliaoc72016-04-25 17:57 回复
    • 小楼一夜听春语
      有问题加群交流,这里不方便了解和解释。
      小楼一夜听春语2016-04-26 12:09 回复
    • 关于出现选中一行,颜色改变,选中下一行,上一行颜色变回的问题。设置单选按钮的选中改变时的事件,if button=false,设置动态面板选中状态为false
      hello word2016-05-05 14:47 回复
      • 直接把你之前转换为动态面板的设置为选项组即可
        成都大学杨子皓2016-05-31 21:10 回复
        • 只有最前面一格变色怎么回事啊?
          独身的犀牛2016-08-20 19:21 回复
  7. 按照步骤完全做不出整行变色的效果,为啥呢?
    proudfox2016-06-20 23:04 回复