logo 原型设计工具Axure RP使用教程 我也要发布文档

入门教程(九):滑块控制教程


Axure RP是一套专门为网站或应用程序所设计的快速原型设计工具, 可以让应用网站策划人员或网站功能界面设计师更加快速方便的建立Web AP和Website的线框图、流程图、原型和规格。

免费下载Axure RP 优惠购买Axure RP


在本教程中,您将学习如何使用动态面板小部件制作可拖动的滑块控件。

小部件设置

  • 打开一个新的RP文件,然后在画布上打开Page 1。
  • 将水平线窗口小部件从库窗格拖到画布上。将其宽度设置为400,将其边框厚度设置为5。
  • 将一个椭圆小部件拖动到画布上,并将其宽度和高度都设置为25。
  • 选择直线和椭圆。单击界面顶部的居中对齐图标,然后单击居中对齐图标。
  • 右键单击椭圆,然后在上下文菜单中选择创建动态面板。

注意:动态面板是唯一具有拖动事件的窗口小部件,因此任何要拖动的元素都必须放置在动态面板中。

移动动态面板及其拖曳事件

  • 选择动态面板,然后在交互窗格中单击新建交互。
  • 在出现的列表中选择拖动事件,然后选择移动动作。
  • 在目标下拉列表中选择此小部件。
  • 在移动下拉列表中,选择拖动x。在Web浏览器中拖动时,这将使动态面板沿X(水平)轴跟随光标。
  • 请勿关闭操作。

向移动动作添加边界

  • 单击移动操作底部的更多选项。
  • 在边界下,单击添加边界。

左边界

  • 新出现的边界行,请在第一个下拉列表中选择向左。(这是指动态面板左边缘的X值)
  • 在中间的下拉列表中,选择大于或等于。
  • 单击第三个字段右侧的fx图标以打开编辑值对话框。
  • 在对话框底部,单击添加本地变量。
  • 在新的本地变量行的第一个字段中,将变量命名为LineWidget。在第二个字段中,选择小部件。在第三个中,选择line小部件。(此局部变量整体上是指行小部件)
  • 在对话框的上部字段中,输入:[[LineWidget.left]](此括号表示的是线控件左边缘的X值)
  • 单击确定关闭编辑值对话框。

创建好的边界,左-大于或等于-[[LineWidget.left]],这意味着动态面板的左边界只能移动到X值,该值大于或等于该行的X值 小部件的左边界。换句话说,它不能在页面上移动到行控件左边缘界以外的任何地方。

右边界

  • 再次单击添加边界。在出现的新边界行中,在第一个下拉列表中选择右键。(这是指动态面板右边缘的X值)
  • 在中间的下拉列表中,选择小于或等于。
  • 单击第三个字段右侧的fx图标以打开编辑值对话框。
  • 在对话框底部,单击添加本地变量。
  • 在新的本地变量行的第一个字段中,将变量命名为LineWidget。在第二个字段中,选择小部件。 在第三个中,选择line小部件。(此局部变量整体上是指行小部件)
  • 在对话框的上方字段中,输入:[[LineWidget.right]](此括号表示的是行控件右边缘的X值。)
  • 单击确定关闭编辑值对话框。

创建好的边界,右-小于或等于-[[LineWidget.right]],这意味着动态面板的右边缘只能移动到小于或等于该线的X值的X值 小部件的右边缘。换句话说,它在页面上的右移不能超过行控件的右边缘。

预览互动

预览页面并向左和向右拖动圆圈。 现在,它只能沿着线控件定义的路径移动,并且您不应将其拖动到线控件的左右边缘之外。

附加信息和提示

垂直滑块

要构建垂直滑块,请按照上述步骤进行以下更改:

  • 使用垂直线代替水平线。 
  • 在移动动作的下拉列表中,选择拖动。在Web浏览器中拖动时,这将使动态面板沿Y(垂直)轴跟随光标。
  • 对于移动动作边界,请使用:
top — is greater than or equals — [[LineWidget.top]]
bottom — is less than or equals — [[LineWidget.bottom]]

想要获得Axure RP更多资源、正版授权的伙伴,请咨询【慧都客服】了解

关注慧聚IT微信公众号???,了解产品的最新动态及最新资讯。

慧聚IT