• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >axure > Axure教程 | 如何通过拖动滑杆上的按钮,调整数值?

Axure教程 | 如何通过拖动滑杆上的按钮,调整数值?

作者: @Axure原型设计工场  字体:[增加 减小] 来源:互联网 时间:2017-06-14

本文主要包含axure单选按钮组,axure单选按钮,axure按钮切换,axure按钮事件,axure按钮等相关知识, @Axure原型设计工场 希望在学习及工作中可以帮助到您

ruhetiaozhengshushi

如何通过拖动滑杆上的按钮,调整数值?

这种部件常见于调节音量大小、色彩值等数值类型的设置。我们来分解一下部件构成,看看如何实现。

声音设置示例

点击这里查看在线演示

1、部件分解

这样的部件主要由三个部分组成,一个滑杆轨道,一个用来调节的按钮,还有一个是什么呢?对了就是拖动的进度,因为axure里的部件不支持设置部分填充,所以这里会用另一个大小相同的轨道,通过设置不同的填充颜色来表示当前拖动的进度。

滑杆部件的分解

2、动态面板的应用

这里使用动态面板是为了应用它的“Fit to Content”(适应内容)属性,这个属性在应用之后,动态面板中的内容只会在指定大小范围内显示,其它区域不可见。

考虑到拖动的进度最大是轨道长度,最小为0,而为了隐藏在进度小100时的部分,需要将动态面板的“Fit to Content”(适应内容)勾选去掉,这样在超出屏幕之外的内容将不可见。

隐藏不可见部分的内容

最终两个动态面板初始的样子如下:

两个动态面板的初始位置

3、设置动态面板的onDrag事件

动态面板的事件很丰富,拖动事件是其中最重要的事件之一。我们利用拖动事件,来动态显示当前改变值的大小,直观显示。

将滑杆和小按钮转成一个动态面板,移动到内容的最左边,只显示出小按钮,表示当前位置在0。再将该动态面板和滑杆轨道再转成一个外层的动态面板,注意给动态面板起个名字,便于后面选择。

为第一个动态面板添加onDrag事件,选择move操作,在右边选择该动态面板,设置为只沿x轴移动(with drag x),并且在x轴上的移动范围:left>=-300 并且 left<=0。

设置移动并限制移动范围

4、计算进度

因为我们画的轨道宽度并不是刚好100,可能大于或小于100,例如这个例子里,轨道宽度为300,因此我们要根据当前被拖动的动态面板的x位置,来计算在轨道上移动的百分比。公式如下:

[[(100-Math.abs(LVAR1.x)/3).toFixed(0)]]

计算当前进度

使用局部变量LVAR1表示动态面板,这样好取它的x位置。计算方法为根据当前x位置除以3(因为全长300,除以3刚好等于100),注意要用100减掉这个值,而且因为当前位置是负值,所以这里使用了取绝对值(Math.abs(值))的方法去掉负号,最后结果取整(toFixed(0)表示小数位为0,即没有小数)。

5、完成

到这里滑杆调值基本完成了。

知道大致思路后,就可拓展做成你想要的原型效果了,这就要看你的需要啦!

您可能想查找下面的文章:

  • Axure教程 | 如何通过拖动滑杆上的按钮,调整数值?

相关文章

  • 2017-06-13Axure教程丨制作自己的Axure元件库
  • 2017-06-13三步教你 Axure 原型变身 EXE 程序
  • 2017-06-13矩形框:深度理解和应用元件样式(二)
  • 2017-06-14Axure教程 | 漂亮的不像实力派的锤子时钟
  • 2017-06-14Axure教程 | 知乎注册与登录原型
  • 2017-06-14Axure教程:中继器实现列表到详情页的数据传递
  • 2017-06-14Axure8.0小案例:手把手教你画挖掘机
  • 2017-06-14Axure教程-锚点滚动效果
  • 2017-06-14Axure7.0教程(一)中继器的使用(1)
  • 2017-06-14Axure PR 7.0 实现页面纵向滑动效果

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • Axure教程:移动端原型页面横纵向滑动同时实现
    • Axure教程:12306图片验证码的实现(随机可验证)
    • Axure 8.0 实例 | 模拟一个上传图片的原型
    • 建立自己的元件库(二)——验证码
    • Axure8.0教程:“百度一下,你就知道”搜索首页原型设计
    • 用Axure 实现“打飞机”,骚年,来一发(上)
    • Axure原型设计,单读APP原型分享
    • Axure教程:动态面板实现广告循环播放
    • 三步教你 Axure 原型变身 EXE 程序
    • Axure教程:微信聊天列表原型制作(一)

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有