• 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原型设计工场  字体:[增加 减小] 来源:互联网

本文主要包含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教程 | 如何通过拖动滑杆上的按钮,调整数值?

相关文章

  • Axure教程:原型设计之水泡导航栏
  • banner轮播axure最简易实现及手动切换
  • Axure7.0教程(二)中继器的使用(2)
  • Axure设计:制作iOS列表左滑菜单效果
  • Axure 制作下拉框省市县三级联动
  • Axure 7高保真还原Web首页布局和交互教程
  • Axure实例:顶栏和侧边栏的固定和窗口自适应
  • Axure教程:动态面板实现广告循环播放
  • Axure实现两种滑动的方式(附源文件下载)
  • Axure教程-体验一下 iPhone 6

文章分类

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

最近更新的内容

    • Axure7.0教程(六)math函数的使用(1)动态面板环状移动
    • Axure教程:中继器如何切换标记状态?
    • Axure7.0教程(八)函数介绍
    • Axure教程:原型实战之模拟拼图效果(变量、动态面板、参数…全面实战应用)
    • 三步教你 Axure 原型变身 EXE 程序
    • Axure7.0教程(三)中继器的使用(3)
    • Axure7.0教程(六)math函数的使用(1)动态面板环状移动
    • Axure教程-体验一下 iPhone 6
    • Axure教程 | Axure8旋转功能应用——幸运大转盘
    • 高手在民间 | 手把手教你用Axure制作连连看游戏(附游戏地址)

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

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