案例96. 滑块的水平拖动效果

案例来源:

UC浏览器-设置

案例效果：

• 初始状态：（图6-88）

• 开启功能时：（图6-89）

案例描述：

使用系统亮度时，滑块位置与状态条长度不可调节；取消系统亮度的勾选时，滑块与状态条变为蓝色，可以拖动滑块位置改变状态条长度。

元件准备：

• 页面中：（图6-90）

• 动态面板“SliderPanel”中：（图6-91）

包含命名：

• 动态面板（用于拖动调节亮度的滑块）：SliderPanel
• 矩形（用于调节线的背景）：BackgroundLine
• 矩形（用于亮度调节线）：BrightnessLine

 

思路分析：

• 点击使用系统亮度的复选框，复选框切换颜色；（操作步骤1）
• 复选框被选中时，显示勾选的图标文字；（操作步骤2）
• 同时，滑块和调节线变为灰色；（操作步骤3）
• 复选框取消选中时，勾选图标文字消失；（操作步骤4）
• 同时，滑块和调节线变为蓝色；（操作步骤5）
• 拖动滑块时，如果滑块是蓝色的状态，则可以水平拖动，但不可超出背景线条的两端；（操作步骤6）
• 同时，调节线跟随滑块的位置改变尺寸。（操作步骤7）

 

操作步骤：

1、为自制复选框元件的【鼠标单击时】事件添加“用例1”， 设置动作为【切换选中状态】于“当前元件”（This）；

2、为自制复选框元件的【选中时】事件添加“用例1”， 设置动作为【设置文本】于“当前元件”（This）为【值】“ ”；“ ”为FontAwesome4.4.0图标字体元件库中的对号；

3、继续上一步，添加动作【取消选中】元件“SliderPanel”和“BrightnessLine”；

4、为自制复选框元件的【取消选中时】事件添加“用例1”， 设置动作为【设置文本】于“当前元件”（This）为【值】“”（空值）；

5、继续上一步，添加动作【选中】元件“SliderPanel”和“BrightnessLine”；

• 事件交互设置：（图6-92）

6、为动态面板“SliderPanel”的【拖动时】事件添加“用例1”，设置条件判断【选中状态】于“当前元件”（This）【==】【值】【true】；设置满足条件时的动作为【移动】“当前元件”（This）为【水平拖动】；{界限}设置中，点击【添加边界】，设置【左侧】【>=】“[[b.left]]”，【右侧】【<=】“[[b.right]]”；公式中“b”为局部变量，其内容为元件“BackgroundLine”的对象实例；

7、继续上一步，添加动作【设置尺寸】于元件“BrightnessLine”，{宽度}为“[[This.x-Target.x]]”，{高度}为“1”，【锚点】为默认的【左上角】；公式“[[This.x-Target.x]]”可获取当前元件x轴坐标与目标元件x轴坐标之间距离的长度。

• 事件交互设置：（图6-93）

补充说明：

• 本案例中使用了“FontAwesome4.4.0”图标字体元件库，需要安装字体文件支持，并进行Web字体设置。（参考案例1的补充说明）

---------------------------------------------------- End ----------------------------------------------------

转载请注明：Axure原创教程网 » AxureRP8实战手册-案例96（滑块的水平拖动效果）

小楼老师倾力打造AxureRP7.0精品课程系列，独特的技术，淫荡的思路，销魂的声音，丰富的姿势，润滑的体验，超爽的感觉，想要？就从下面进入！

《AxureRP7.0从入门到精通》------从零向高手蜕变的必修课------<<想上它，插这里！>>