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

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

2.3.  状态

在本章2.1节我们把动态面板的一个状态当做容器来使用,这一节我们来看一下动态面板多个状态如何来使用。

先举一个例子:一个注册模块,可以分为手机注册和邮箱注册。但是这些注册模块应该都在一个位置上,点击不同的注册标签,显示不同的注册内容。(图153)

153

(图153)

如图所示,我们需要在点击上方的“手机”和“邮箱”的标签时,下方的内容随之改变。这样的效果就需要用到动态面板的状态切换。我们把不同的注册内容放置在不同的动态面板状态中,然后在点击标签时,设置动态面板为不同的状态。

下面我们就来实现这个案例:多标签的注册模块。

首先,需要先准备好需要的元件。(图154)

1、先放入一个背景矩形和文本标签;

2、继续放入两个用于点击的标签,并设置为未被选中时的样式;

3、继续放入“手机”注册的相关内容,注意注册内容的背景矩形如第6步所示,没有上边框;

4、将“手机”注册内容转换为动态面板,并命名为“register”;

5、双击动态面板“register”,修改“State1”的名称为“phone”,然后继续添加一个状态,命名为“email”,并双击打开;

6、在“email”这个状态中,添加“邮箱”注册的相关内容。

154

(图154)

经过以上,几个步骤,我们完成了元件的准备。在本书之后的内容中,我们将不再就准备元件做详细的讲解。

然后,我们先分别为两个选项标签添加选中样式、选项组名称以及触发事件【鼠标单击时】【选中】【当前元件】的用例动作。

接下来,就是最重要的一步,在点击选项标签的时候,我们需要添加用例动作为动态面板设置相应的状态。以“手机”注册的选项标签为例,我们在这个选项标签【鼠标单击时】的用例中继续添加动作【设置动态面板状态】,然后,在配置动作中勾选动态面板“register”,在下方的选项中,我们为动态面板【选择状态为】“phone”。(图155)

155

(图155)

      最后,我们参照“手机”注册的设置,也为“邮箱”注册进行相应的设置,设置选项标签被点击时,设置动态面板状态为“email”。


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

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

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


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

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

表情

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(13)个小伙伴在吐槽
  1. 为什么标签选中时设置了颜色 怎么预览的时候没有用。。。。。。
    无敌大元帅2015-09-28 22:30 回复
    • 需要把两个标签组合并命名
      chinesekid2015-10-04 13:32 回复
    • 并且在鼠标单击时事件的case1中首先就添加【选中】-当前元件的动作。
      阿花2016-09-07 09:32 回复
  2. 老师那2个点击标签的状态应该怎么设置?用组合事件点击后状态就复原了,我用动态面板设置点击一个变白同时一个变黑没有效果
    木勺2015-10-20 11:58 回复
    • 知道了怎么弄了。。。
      木勺2015-10-20 12:09 回复
  3. 为什么我发表的提问不显示 😥
    1172015-12-11 11:56 回复
    • 小楼一夜听春语
      因为需要审核
      小楼一夜听春语2015-12-13 20:51 回复
  4. 预览时可以从切换到邮箱,但是无法从邮箱切回手机,怎么回事呢? 😮
    再苦再累不说分手、2015-12-28 11:07 回复
  5. 按照步骤做了,但是点击邮箱,没有反应,
    小草2016-02-01 17:49 回复
  6. 状态切换成功了,但点击时两个状态面板的位置没有重合,“email”状态面板的x,y坐标已经修改得跟“phone”状态面板一样了,为什么啊,小楼老师?
    slyvia2016-04-19 16:13 回复
  7. 呃,状态面板不重合问题已经解决了,我以为两个面板坐标一样就重合了,点进去看发现显示位置还是有差别。
    slyvia2016-04-19 16:18 回复
    • 请问你是怎么解决的?我也遇到了这个问题了。
      melody2016-06-10 17:11 回复
      • 怎么会呢?背景矩形的大小坐标一致不就行了?
        djiprvtd2017-06-09 12:05 回复