Axure新手养成计划(连载27)

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

2.    动态面板的特性

苏苏:楼哥,你讲了这么多动态面板的内容,我还是不知道它能做什么,怎么用。

小楼:不要这么急,一个元件你要先了解它的本质,才能够更好的应用它。下面我就给你讲讲动态面板的几种主要应用。

2.1.  容器

动态面板是一个透明的容器,它能够包含各种元件在里面。那么,容器都有什么特点呢?

买菜的时候,菜篮就是容器,它能帮我们方便的携带买来的多种蔬菜。

上网聊天的时候,一个聊天窗口也是一个容器,里面包含聊天内容,当隐藏这个窗口,所有聊天内容也就被同时隐藏。

这样看来,容器可以用来装载内容,这些容器中的内容会随着容器一起移动或者显示隐藏。

动态面板既然是容器,同样包含这些特性。装入动态面板状态中的内容可以随着动态面板一起移动、显示、隐藏。

下面我们基于动态面板容器的特性,做两个案例。

案例1:二级菜单显示隐藏

鼠标移入一级菜单,显示二级菜单;鼠标移出时,隐藏二级菜单。

首先,我们准备这个案例需要的元件。1个表示一级菜单的矩形,和3个表示二级菜单的占位符。

为了让3个二级菜单能够统一显示和隐藏,我们把它们放进动态面板的首个状态里面。

这里有一个快捷的操作。如果动态面板只有一个状态,我们除了可以打开状态的编辑区添加内容,还可以将编辑好的内容全选,点击鼠标右键,在弹出的的菜单中选择“转为动态面板”,软件会在创建动态面板的同时将这些内容变成动态面板状态中的内容。如果操作错误或者想将内容从动态面板中取出,可以选择“从首个状态中脱离”。(图146)

146

(图146)

将二级菜单封装进动态面板后,我们给动态面板命名为”menu”,然后将这个动态面板隐藏,可以在快捷功能区或者元件样式面板中勾选隐藏的复选框来完成。

这个案例的事件是在一级菜单鼠标移入时被触发,所以我们在编辑区点中一级菜单,为其添加【鼠标移入时】事件的内容。在用例编辑界面的动作列表中,我们选择【显示】,然后勾选动态面板“menu”。

完成上述操作后,大家注意用例编辑界面的右下方,有个【更多选项】,这里面有个动画效果叫“弹出效果”。这个动画效果,能够帮我们直接实现鼠标移出时重新隐藏动态面板“menu”的效果,而不用再去编辑鼠标移出时的事件。我们把它选上后,点击“确定”即完成了这个案例。(图147)

147

(图147)

      为了方便理解,我们来看一下整个实现过程。(图148)

148

(图148)

      如果需要多个菜单组合,可以同时选中已经做好的一级菜单和二级菜单,用鼠标左键点住不松开拖动复制,然后修改复制后的元件名称即可。

案例2:带遮罩效果的弹窗

点击登录按钮,弹出一个登录窗口,窗口周围有半透明遮罩层,遮盖页面原有内容。(图149)

149

(图149)

      这个效果,只需把用户登录的这个面板(1个矩形背景+1个文本标签+2个文本框+1个形状按钮)转为动态面板命名为“loginpanel”后隐藏。然后点击元件水平菜单上的菜单项“登录”时,显示这个“loginpanel”动态面板即可。不过想要半透明遮罩效果的话,需要我们在配置动作时在【更多选项】中选择“灯箱效果”。(图150)

150

(图150)


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

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

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

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


转载请注明:Axure原创教程网 » Axure新手养成计划(连载27)

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

表情

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(5)个小伙伴在吐槽
  1. 很棒,支持
    小小2015-09-18 16:09 回复
  2. 很好很强大,赞。希望快点出书,并且可以和亚马逊合作出电子版
    根本停不下来2015-11-11 15:54 回复
  3. 弱弱的问下,为什么有灯箱效果,但是没弹出那个登录框呢。。
    王小韦2015-11-16 17:43 回复
    • 配置动作时,可见性选为可见
      小赖2016-03-03 11:23 回复
  4. 必须支持。大赞
    Mr.歪2015-12-18 18:05 回复