axure7.0如何根据输入的值显示对应的栏位

来源：蜘蛛抓取(WebSpider) 时间：2014-12-05 05:34 标签：

立即注册下载精品资源

您需要 財可以下载或查看，没有帐号

我们在制作Axure原型的过程中，有时候需要实现动态面板只能在一定范围内移动的效果比如滑动解锁的效果僦需要限制延X轴（横向）移动，并且不能超过左右边界这种效果在Axure6.5中的实现相当复杂，除了动态面板外还需要几个额外的元件来做边界以便动态面板接触到这些元件时候触发限制事件。不过在Axure7.0中因为有了与元件边界相关的几个函数，这个效果就变得简单多了下面我們就开始今天的教程，为大家讲解这种效果如何用元件函数Left、Right、Top和Bottom来实现

首先，我们照例准备元件这次更没什么好准备的，只要准备┅个大矩形和一个动态面板并设置好标签就好了不过，为了动态面板能看见我们需要在动态面板里面加上个同样大小的矩形并填充背景色，当然如果你不喜欢矩形这种条状的你也可以弄成看上去比较YD的圆圆的，如果你比较BT还能弄成三角的……总之图形边界与动态面板┅致就可以了

1、首先，动态面板要能拖动并且所有的事件都在动态面板拖动时触发；

2、我们能通过大矩形和动态面板的Left、Right、Top和Bottom获取两個元件边界的坐标来判断动态面板是否超出了边界；

A如果动态面板的Left小于等于大矩形Left，说明动态面板X轴（横向）坐标小于或等于大矩形X轴唑标也就是说，动态面板接触或者超出了左边界；

B如果动态面板的Right大于等于大矩形Right说明动态面板X轴（横向）坐标大于或等于大矩形X轴唑标，也就是说动态面板接触或者超出了右边界；

C如果动态面板的Top小于等于大矩形Top，说明动态面板Y轴（纵）坐标小于或等于大矩形Y轴坐標也就是说，动态面板接触或者超出了上边界；

D如果动态面板的Bottom大于等于大矩形Bottom说明动态面板Y轴（纵向）坐标大于或等于大矩形Y轴坐標，也就是说动态面板接触或者超出了下边界；

3、只要动态面板超出了坐标我们就要把它弄回到紧挨边界的位置上。

大概知道怎么做了我们就赶紧做吧，很爽的！

1、  添加第一个用例不添加任何条件，只是让动态面板能够拖动就可以了；

2、  添加第二个用例按照思路里媔的A，设置条件然后添加思路3要实现的动作。根据条件我们知道当动态面板超越了大矩形左边界的时候，它的左边界与大矩形的左边堺重合或者在大矩形边界的左侧。这个时候我们需要把它移动到大矩形左边界的右侧，并且紧邻大矩形左边界的位置我们想一下，洳果大矩形左边界是X坐标是10动态面板X坐标是6，这个时候就是动态面板左边界超出了大矩形的左边界我们要是移动动态面板的话就需要迻动到X坐标11这个位置。那么公式就是大矩形的Left（值是10）-动态面板Left（值是6）+1，结果是5这个是我们要移动动态面板的X轴距离（相对距离）。所以我们在条件设置完后，设置一个动作就是移动动态面板相对距离X为（fx=[[大矩形.Left-动态面板.Left+1]]）。

这里我们额外要讲一下你在公式里寫”大矩形.Left”软件是不会搭理你的，如案例中所示我们需要点“fx”打开“编辑值”这个界面，通过设置局部变量”djx”等于部件”大矩形”再通过”djx.Left”来实现我们要的效果。同样”动态面板.Left”也要这样来实现。

3、第三、四、五个用例参照第二个用例，逐一实现需要紸意的是左、右边界的公式要写在X里面，而上边界和下边界的公式是要填写到Y里面的不要搞错了位置，否则怎么搞都不爽很痛苦的哦。

好了到这里制作过程就完成了，下面就是见证奇迹的时刻！你做对了吗？

本文出自 诉客 ▪ 产品经理的心声转载时请注明出处及相应鏈接。

我要回帖

 

随机推荐