5.5　拖动滑块设置数字

案例描述

左右拖动滑块时，文本框的百分比会跟着变化，如图5-39所示。

思路分析

本实例的实现包括3部分：一个滑杆轨道，一个用来调节的按钮，还有一个是拖动的进度，因为Axure中的部件不支持设置部分填充，所以这里会用另一个大小相同的轨道，通过设置不同的填充颜色来表示当前拖动的进度。

操作步骤

（1）选择“文件”|“新建”命令，新建一个Axure的文档。

（2）在“元件库”面板中分别将两个“矩形2”和一个“椭圆形”元件拖入编辑区中适当的位置，右击“矩形”元件，在弹出的快捷菜单中选择“转换为动态面板”命令，在右侧“检视：动态面板”区域设置名称为button，然后在“样式”面板中分别设置两个“矩形2”元件的“圆角半径”为13，效果如图5-40所示。

（3）选择第一个矩形元件，在工具栏中设置“填充颜色”为蓝色（#199ED8），单击鼠标右键，在弹出的快捷菜单中选择“转换为动态面板”命令，在右侧“检视：动态面板”区域设置名称为plan，如图5-41所示。

（4）选择第二个矩形元件，设置名称为base，选择plan动态面板，放置与灰色矩形重叠，然后向左拖动至宽度为11，如图5-42所示。

（5）将button动态面板拖动至矩形元件最左端，在右侧位置拖入一个“文本框”元件，在“检视：文本框”区域设置名称为number，在“属性”面板中选中“隐藏边框”复选框，如图5-43所示，隐藏文本框边框。

（6）选中button动态面板，在“属性”面板中的“添加用例”区域，双击“拖动时”，弹出“用例编辑<拖动时>”对话框，在左侧“添加动作”区域选择“设置尺寸”选项，在右侧“配置动作”区域选中“plan（动态面板）”复选框，如图5-44所示。

（7）单击“宽”右侧的fx按钮，弹出“编辑值”对话框，在“局部变量”选项组中单击“添加局部变量”超链接，在第二个下拉列表框中选择“元件”选项，第三个下拉列表框中选择button选项，在上方的编辑区中，选择数字11，单击“插入变量或函数”超链接，选择LVAR1选项，在编辑区输入“[[LVAR1.x-30]]”，如图5-45所示，单击“确定”按钮返回至“用例编辑<拖动时>”对话框。

（8）在左侧“添加动作”区域选择“移动”选项，在右侧“配置动作”区域选中“button（动态面板）”复选框，设置“移动”为“水平拖动”，单击“添加边界”超链接，第一个下拉列表框选择“左侧”，第二个下拉列表框选择“>=”，第三个文本框输入30；再次单击“添加边界”超链接，第一个下拉列表框选择“右侧”，第二个下拉列表框选择“<=”，第三个文本框输入300，如图5-46所示。

（9）在左侧“添加动作”区域选择“设置文本”选项，在右侧“配置动作”区域选中“number（文本框）”复选框，在“设置文本为”区域单击fx按钮，弹出“编辑文本”对话框，在“局部变量”选项组中单击“添加局部变量”超链接，第二个下拉列表框选择“元件”，第三个下拉列表框选择plan，如图5-47所示。

（10）再次单击“添加局部变量”超链接，第二个下拉列表框选择“元件”，第三个下拉列表框选择base，在上面编辑区中输入“[[(100*LVAR1.width/(LVAR2.width-30)).toFixed(2)]]%”，如图5-48所示，单击“确定”按钮返回至“用例编辑<拖动时>”对话框，再次单击“确定”按钮，返回至编辑区中。

（11）按Ctrl+S快捷键，以“5.5”为名称保存该文件，然后按F5键预览效果，如图5-49所示。