最新消息:本站教程基于Axure RP 9.0.0.3723及更高版本,请在学习前确认软件版本是否符合要求,以免因为界面差异导致学习障碍!

可拖动的滑块-高级版

教程 小楼一夜听春语 227浏览

本文案例的滑块更加高级,能够选择数量的区间。

这个也是Axure RP 10的Sample Form Patterns元件之一。

如果之前完成过《可以拖动的滑块-升级》的话,本文的这个案例也没有太大难度。

先将元件在画布中准备好。

  • 三个文本标签元件,文字默认为“选择范围”、“最小”和“最大”。
  • 两个文本标签元件,默认值是“0”和“500”,分别命名为“最小值”和“最大值”。
  • 浅蓝色的轨道和深蓝色的轨道都是高度“60”像素的矩形元件,圆角半径“3”以上即可。浅蓝色轨道名称为“轨道”,宽度是“200”像素;深蓝色轨道名称为“范围”,宽度是“85”像素。
  • 两个圆形元件,直径为“30”像素,都转换为动态面板,并为动态面板分别命名为“最小值滑块”和“最大值滑块”。

将所有元件摆放好之后,开始进行交互设置。

1、为“最小值滑块”添加交互,让它能够水平方向拖动。

拖动时,左侧不能超过浅蓝色轨道左边界,右侧不能超过“最大值滑块”的右边界。

所以,需要[添加界限]。

左侧坐标值要大于等于“轨道”的左边界,“轨道”的左边界值通过局部变量进行获取。

右侧坐标值要小于等于“最大值滑块”的右边界,“最大值滑块”的右边界值同样通过局部变量进行获取。

2、拖动“最小值滑块”时,“范围”的尺寸跟随改变。

“范围”的尺寸是“最小值滑块”的左边界与“最大值滑块”左边界的差。

我们继续添加为[范围][设置尺寸]的动作,[高度]是[目标]元件的高度不变,可以填入“[[Target.height]]”。

[宽度]是“最大值滑块”的左边界减去当前滑块元件的左边界,先通过局部变量获取“最大值滑块”的左边界值或X坐标值,然后,减去当前滑块元件的左边界值或X坐标值。公式为“[[Max.x-This.x]]”。

3、拖动“最小值滑块”时,同步移动“范围”的位置。

为[移动]的动作[添加目标],移动[范围][到达]指定的位置。

X轴坐标与当前被拖动的“最小值滑块”X轴坐标重合,所以是“[[This.x]]”

因为是水平移动,所以Y轴坐标保持不变,仍然是[目标]元件的Y轴坐标“[[Target.y]]”。

4、拖动“最小值滑块”时,计算并显示“最小值”的数值。

数值范围是“0~1000”,我们需要先通过“最小值滑块”的X轴坐标值减去轨道的X轴坐标获得最小值的范围值,再除以可拖动的最大范围值,这个值是轨道的宽度减去滑块的宽度。最后,还要用得到的比例值乘以1000并取整数,以计算当前的最小值。

我们[添加动作]为[最小值]元件[设置文本]。

文本的内容是一个计算公式:[[((This.x-Track.x)/(Track.width-This.width)*1000).toFixed(0)]]

5、拖动“最小值滑块”时,将滑块[置于顶层],以免与另一滑块重合后无法再次拖动。

6、为“最大值滑块”添加交互,让它能够水平方向拖动。

拖动时,左侧不能超过“最小值滑块”的左边界,右侧不能超过“轨道”的右边界。

具体设置可以参考第1步。

7、拖动“最小值滑块”时,“范围”的尺寸跟随改变。

动作设置参考第2步。

不过,“范围”尺寸的计算公式需要改为当前元件的X轴坐标值减去“最小值滑块”的X轴坐标值。

8、拖动“最大值滑块”时,计算并显示“最大值”的数值。

动作设置参考第4步。

只是动作的[目标]元件选择[最大值]元件。

9、拖动“最大值滑块”时,将滑块[置于顶层],以免与另一滑块重合后无法再次拖动。

此设置与第5步完全一致。

到这里,我们就完成了一个可以选择数值范围的滑块。

/教程源文件/

不习惯看文字教程?还有《Axure RP 9萌新修炼视频》奉上!

转载请注明:iaxure.com » 可拖动的滑块-高级版