AxureRP8实战手册-案例96(滑块的水平拖动效果)

AxureRP8.0教程 小楼一夜听春语 17240℃ 0评论

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

案例来源:

UC浏览器-设置

案例效果:

  • 初始状态:(图6-88)

6-88.

  • 开启功能时:(图6-89)

6-89.

案例描述:

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

元件准备:

  • 页面中:(图6-90)

6-90

  • 动态面板“SliderPanel”中:(图6-91)

6-91

包含命名:

  • 动态面板(用于拖动调节亮度的滑块):SliderPanel
  • 矩形(用于调节线的背景):BackgroundLine
  • 矩形(用于亮度调节线):BrightnessLine

 

思路分析:

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

 

操作步骤:

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

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

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

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

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

  • 事件交互设置:(图6-92)

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)

6-93

补充说明:

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

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

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

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

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


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

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

表情

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(11)个小伙伴在吐槽
  1. A8的选中效果这么麻烦?
    小白白2016-08-08 15:38 回复
  2. 做不出来
    阿辉2016-09-25 17:09 回复
  3. ·公式中“b”为局部变量,其内容为元件“BackgroundLine”的对象实例· 这一步的对象实例在哪设置?
    FantasXin2016-10-17 19:47 回复
    • 基础-局部变量
      小楼一夜听春语2016-10-17 20:09 回复
      • 解决了,是我理解错了,直接设定好数字就可以了
        FantasXin2016-10-17 20:26 回复
  4. 你好老师!其中[[This.x-Target.x]]的Target指的是哪一个原件?
    黑呀2016-12-04 19:11 回复
    • 同问
      Ian2016-12-21 13:42 回复
  5. 老师您是不是在公式“[[This.x-Target.x]]”这个忘写了一个条件,是不是应该把这个公式加到取消选中的case当中,我是加进去之后才实现这个效果的,不加进去的话点击取消选中会是长蓝条,不会受到元件SliderPanel的控制..
    黑呀2016-12-04 19:38 回复
    • 你也在学习吗?可以互相加好友吗??
      syx01252016-12-14 13:13 回复
  6. 无法拖动
    Ian2016-12-21 14:04 回复
  7. 点击动态面板后,直接退回到亮度条的起点位置,无法拖动。。这啥情况,实在不知道哪里出问题了?
    Ian2016-12-21 14:16 回复