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

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

3. 动态面板的属性

之前我们使用过一些功能:【自动调整为内容尺寸】和【固定到浏览器】,这些功能都在动态面板的属性中。

除了这些功能,动态面板的属性中还有一些其他功能,在这里给大家简单介绍一下:(图4-29)

图4-29

(图4-29)

1、滚动条设置:

动态面板的滚动条默认为【无】,不显示。它还有其它三个选项,分别为【自动显示滚动条】、【自动显示水平滚动条】和【自动显示垂直滚动条】。

如果动态面板的属性中不勾选【自动调整为内容尺寸】,当面板状态中所包含内容的边界超出动态面板的右边界或者底边界,就可以出现滚动条。我们可以根据需求在下拉列表中选择设置。

2、100%宽度

这个功能,能够让动态面板自适应浏览器宽度。在页面打开时自动水平方向铺满窗口。这个效果只在页面在浏览器打开时可见,在编辑区中没有任何效果。需要注意的是此功能只是动态面板尺寸自适应浏览器窗口,与其状态中的元件无关,元件不会随着面板改变自身尺寸。

3、允许触发鼠标交互

这个功能指的是:如果为动态面板状态中的元件设置了与鼠标相关的交互样式,鼠标与动态面板产生相同的交互时,是否触发状态中所包含元件的交互样式。

上面这段话,我自己看了都隐隐的淡疼。打个比方说吧!比如为动态面板中的白色矩形设置了鼠标悬停时填充颜色变为红色,如果勾选了【允许触发鼠标交互】,当鼠标进入到动态面板范围内但没有进入到矩形范围内,就会触发交互样式,矩形变为红色。如果没有勾选则只有鼠标进入矩形范围内才能够触发。

4、禁用

一般元件勾选禁用,会导致元件自身的交互失效。动态面板的禁用除了会导致自身交互失效,还会导致动态面板中包含的其它元件交互全部失效。

5、选中

一般元件勾选选中,元件会在页面加载时自动变为被选中的状态,并能够触发元件的选中交互样式。动态面板的选中除了自身变为被选中的状态,还会将其包含的其它元件全部变为被选中的状态。

基于这个特点,当我们想让一组元件都在【鼠标单击时】变为选中状态的话,可以将它们一起转换为动态面板,然后在动态面板【鼠标单击时】选中该动态面板即可。

案例:点击选中整行

1、先用多个矩形组成一行。如果想点击任何一个矩形,就让整行变成灰色的话,需要把这些矩形加好【选中】的交互样式(图4-30);

图4-30

(图4-30)

2、选取所有矩形,点击<鼠标右键>,在菜单中选择【转换为动态面板】;并且,为动态面板添加【鼠标单击时】事件的用例动作为【选中】【当前元件】。(图4-31)

图4-31

(图4-31)

6、选项组名称设置

和其它元件的选项组功能一样,能够实现唯一被选中的效果。比如将上个案例“点击选中整行”中的动态面板多复制几个,然后给它们在属性中加上相同的选项组名称就实现了唯一一行被选中的效果。

7、元件提示

这个功能很少使用,浏览器浏览原型时,能够让元件在鼠标移入时显示一个文字提示。

本章任务:牢记动态面板的多种特性,并完成本章内各个案例应用这些特性。


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

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

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

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


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

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

表情

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(6)个小伙伴在吐槽
  1. 为什么选项组名称 属性中加上相同的选项组名称就实现了唯一一行被选中的效果?为什么会这样 什么道理
    无敌大元帅2015-09-30 11:44 回复
  2. 第6点什么意思,不明白啊老师
    懵ga2015-12-22 16:08 回复
    • 如果复制之后的多个动态面板的选项组名称不同的话 这几个复制出来的动态面板就是独立的 点击选中一行的功能就不能在这几个动态面板间切换了
      香农2016-07-12 14:28 回复
  3. 求问 100%高度怎么做呢?
    赛娜2016-11-18 09:36 回复
    • 小楼一夜听春语
      用[[Window.height]]可获取窗口高度
      小楼一夜听春语2016-11-18 19:34 回复
  4. 试了好几次终于成功了
    倔强的心2017-08-11 09:23 回复