《AxureRP9网站与App原型设计》教学教案—08用Axure元件行为制作交互效果.docx

第8章用Axure元件行为制作交互效果
课时内容
用Axure元件行为制作交互效果
课时
6
教学目标
掌握Axure的元件行为，学会使用元件行为制作交互效果
教学重点
Axure的元件行为
教学难点
Axure的元件行为
教学设计
1 .教学思路：通过实例引入元件行为的概念；通过多媒体演示和实机操讲解显示/隐藏、 设置文本和设置图片、设置选中、设置列表选中项、启用/禁用、移动/旋转、置于顶层/ 底层、获取焦点和展开/收起树节点等元件行为。
2 .教学手段：多媒体+计算机
3 .教学资料：教材、多媒体课件
教学内容
Axure除了可以使用链接行为制作交互效果，同时也可以使用Axure元件行为来完成交互效果的制作，包括元件的显示/隐藏、设置文本、设置图片、设置选中、设置列表选中项、启用/禁用、移动

/旋转、置于顶层/底层、获取焦点、展开/收起树节点等行为，通过元件动作的交互效果，可以制作出
高级交互效果。
＞；交互编辑器口添加事件
＜选择交互明牛开始创立交互.
显示/I意藏tSM面板状态
设W本设置图片
设置选中设置列表造中项
启用/禁用 移动设置尺寸
设置不透明我取焦点
展开做起树节点中继器动作
添力谢序移除排序
渤瞒选取消

取消
确定Axure元件动作
8.1 显示/隐藏元件的显示/隐藏行为是经常会用到的一种交互效果，常用于二级菜单的显示与隐藏交互效果,
下面一起来学习显示与隐藏行为。
8.1.1 切换方式控制元件显示隐藏实战演练
>;交互编辑器
序MW*夕-渗IDS）作
链接动作
打市统
关闭窗口
框架中打枪按
濠动到元件 元件动作
显示/百 箍面板状态
|片］
设置选中
设置列选中项
启用噤用
移动
的
设置尺寸
置于顶后底层
设置不法明 荻取焦点
组织动作
▼单击时
设置图片
image为image鼠标悬停到image,鼠标按下to image
设置动作
目标
image，
iCXXrUKDt
图片_0舞
更妥选项，
设造I扇B停用片
图片/「频.
设查京既按下列图片
图片:用［演
设百旃阕片
图片：「口 ［选择
£Z£JBBn
图片
选择
脱肖
设置图片
发布原型，当单击“设置图片”按钮时，显示设置好的默认图片，当鼠标悬停时，图片切换成 新图片，当鼠标按键按下时，图片又进行了更换，从而实现了设置图片的效果。
设置图片的效果一般为，中选中某个东西的时候，显示出一个对号；禁用某个东西的时候，显 示出一个差号。或者淘宝网站页面上的商品，默认显示的是一个小的预览图片，当鼠标悬停在预览 图片上时会显示一个较大尺寸的图片，这些效果都可以通过设置图片行为来完成。
8.3 设置选中
设置选中行为常用于单项选择按钮元件和复选框按钮元件的选中与未选中以及选中和未选中状态的 切换。下面一起来看看它们的使用。
8.3.1 单项选择按钮选中行为
一般给单项选择按钮和复选框添加这样交互行为。下面一起来看看他的使用。
I实战演练
di拖曳二个“单项选择按钮”元件到工作区域，将其文本内容命名为“我是单项选择按钮”，将其标 签命名为“单项选择”；拖曳3个“按钮”元件到工作区域，将其文本内容分别命名为“选中”“未选 中” “切换选中”。
页尚
目显示与除S行为
a设置文频为
目设置图像行为
目单项选择按«选中行为
+ 0>
单项选择按钮选中行为页面
（2）单击“选中”按钮元件，为其添加鼠标单击时触发事件，在添加动作面板单击“设置选中”选项，勾选“单项选择”复选项，设置它的值为真。
X交互编辑器
涉DW*夕*索DOS柞

腼砒

Q
链JS动作
翻开筵接
关闭窗口
框架中翻开链接
港动到元件
元件动作

▼单击时
设置选中

单项选择为'.真•

」

设置面板状态
设置图片
| iggg 中 |
设置列表选中项
启用朦用
移动
螃
设置尺寸
5T丽曲
设置不透明
我取焦点

选中行为
（3）单击“未选中”按钮元件，为其添加鼠标单击时触发事件，在添加动作面板单击“设置选中”选项，勾选“单项选择复选项，当未被选中的时候，设置它的值为假。
>:交互编辑看S8贬祚

S8贬祚
翻开链接
关闭窗口
框架中翻开链接
潦动到
元件动作
显示博S
设置面板状态
设置文本
设匿图片
| i^^中|
迨吉列表法中项
启用噤用
移动
蚓
设置尺寸
置于顶层/底层
设宜不透朗 荻取焦点

・单击时
设置选中

单项选择为“假”

取消
确定未选中行为
（4）单击“切换选中”按钮元件，为其添加鼠标单击时触发事件，在添加动作面板单击“设置选中”选项勾选“单项选择”选项，设置它的值为“切换二
>;交互编辑器

夕.瀚DS)作
组级动作
▼单击时
链接动作
打市统
关闭窗口
框架中打枪按
濠动到元件
元件动作
显示/百
箍面板状态
发置图片
口相^中।
设看选中
单项选择为'切换”
设置列选中项
启用噤用
移动
蚓
设置尺寸
置于顶忌底层
设置不法明
荻取焦点
脱肖
切换选中行为
发布原型检查效果，单击“选中”按钮，单项选择按钮呈现选中状态，单击“未选中”按钮，单项选择按钮呈现未选中状态，单击“切换选中”按钮，可以看到单项选择按钮在选中和未选中状态之间切换。
8.3.2 复选框选中行为实战演练
(1)拖曳一个“复选框”元件到工作区域，将其文本内容命名为“我是复选框"，将其标签命名为“复选”，拖曳3个“按钮”元件到工作区域，将其文本内容分别命名为“选中”“未选中”
“切换选中”。
页面
概要
短选框选中行为X
100
300
400
500

0显示与除藏行为目设置文本行为
S设置图像行为
口我是复选框
选中
未选中
切换选中

0单项选择按钮选中行为S复选框选中行为
复选框选中行为页面
(2)单击“选中”按钮元件，为其添加鼠标单击时触发事件。在添加动作面板单击“设置选中”选项，勾选“复选”复选项，设置其值为真。
>;交互编辑器
如曲词的夕.德DOS那
链接功作
翻开链接
关闭窗口
框架中翻开槌接
滚动到元件 元件动作
显示傀藏
▼单击时
蟀为“真”

面板状态
设兽图片
|设置S中|
设置列表选中项
启用糜用
移动
设置尺寸
置于顶层/底层
设置不透明
获取焦点
选中行为
（3）选中“未选中”按钮元件，为其添加鼠标单击时触发事件，在添加动作面板单击“设置选 中”选项，勾选“复选”复选项，设置其值为假。
>;交互编辑器▼单击时 设置选中 翱为"假”

▼单击时 设置选中 翱为"假”
险第JD事件小章旭昨铤坡动作
翻开朝关闭窗口
框架中翻开链接濠动到元件
元件功作豌, 设置面板状态
片设置列表选中项
启用噤用移动

赁转设置尺寸
置于顶层/底层设置不透明
获取焦点未选中行为
（4）选中“切换选中”按钮元件，为其添加鼠标单击时触发事件，在添加动作面板单击“设置 选中”选项，勾选“复选”复选项，设置其值为切换。
▼单击时
复选为“切换二
X交互编辑器链接动作
翻开链接关闭窗口
框架中翻开链接港动到元件
元件动作设置面板状态
设置图片中 |
设置列表选中项启用/禁用
移动螃
设置尺寸磔,
设置不透明获取焦点
切换选中行为
发布原型，单击“选中”按钮，复选框呈现选中状态；单击“未选中”按钮，复选框呈现未选 中状态，单击“切换选中”按钮，复选框在选中和未选中状态之间切换。
8.4 设置列表选中项
设置列表选中项行为常用于下拉列表和列表框元件。下面通过设置两个下拉列表的联动效果， 来学习如何设置列表选中项行为。
8.4.1 一对一联动效果
从小学到中学，再到大学，每个学生都经历了无数的考试，每次考完试都有一个成绩排名，可 能是小红第一名、小虎第二名、小明第三名。下面就开始制作两个下拉列表，一个代表学生的姓名, 另一个代表学生的名次，实现它们的联动效果。
实战演练
71）拖曳二个工?拉列表”元件到工作区域，将其标签命名为“name”，双击下拉列表元件， 在弹出的“编辑下拉列表”对话框中，单击“编辑多项”按钮，新增多个下拉选项，分别输入“小 红” “小虎” “小明
X CU
由 Copy
□ Paste
r--、 r--ir-
ODO ：□!《
L..J U..J<-J
»i®
㈤，
3
页面图要
QEl L]
设9E列蓑选中场 x
十 |o,…，I ,,,
100
回朝与瓯行为
日设置文本行为
[=：没查图像行为
目单中行为
回复进磔中行为
目设五列先选中国
X编瑁下仿列表3
添加和组织列表选项.
勾选一项作为默认项，未勾选那么默认为第一项.
+添加=燃冬冬项
□ g
□小虎
□小明
臣录
§
Default
姓名下拉列表
取消

X Cut
矽COW
口 Paste
SB
概荽
田匚]
E显示与意菽行为
[=：设S文本行为
E设躺防为 目单项选择按钮选中行为
E复选框选中行为 尼设百列哀选中埃
JSA
+ <5> :
nofai lit

(2)拖曳一个“下拉列表”元件到工作区域，将其标签命名为“rank”，双击下拉列表元件， 在弹出的“编辑下拉列表”对话框中，单击“编辑多项”按钮，新增多个下拉选项，分别输入“第 一名” “第二名” “第三名”。
又编瑁下粕列表3
射画状列越项.
勾选一项作为默认项,未勾选那么默认为第一项.
+的=编版冬项
□ 第一名
□ 第二名
□ 第三名

排名下拉列表
(3)选中姓名下拉列表，为其添加选项改变时触发事件，在组织动作面板单击“添加情形”按 钮，在弹出的情形对话框中设置条件：选择选中项的值等于小红；在添加动作面板单击”设置列表 选中项”动作；勾选“rank”复选项，在设置动作面板的选项下拉列表中选择“第一名”。
x交互编辑器翻开梃接
关闭窗口
梅架中翻开翎g 赖倒元件

翻开梃接
关闭窗口
梅架中翻开翎g 赖倒元件
元杵动作
显示像S
设置面板状态 设置文本 设置S片 设置选中
设立列表选中项 日用噤用
侈动
曲
设置尺寸
百于顶层偎底
设置不透明 我取焦点
设置动作
第一名
海mso也
设置小红第一名
确定
取消

(4)再新增一个用例，在组织动作面板单击“添加情形”按钮，在弹出的情形对话框中设置条 件：选择选中项的值等于小虎；在添加动作面板单击“设置列表选中项”动作，勾选“rank”复选项, 在设置动作面板的选项下拉列表中选择“第二名”。
>;交互编辑器
设置面板状态~rank为第二名
iSgCTI一
设置图片
设置选中
设置列表选中项|
启用縻用
移动
百
设置尺寸
置于顶层/底层
设置不逡明
获取匿点
设置小虎第二名
（5）再新增一个用例，在组织动作面板单击“添加情形”按钮，在弹出的情形对话框中设置条 件：选中项值等于小明，在添加动作下面单击设置列表选中项动作，目标选择“rank”，让小明得第 三名。
x交互编辑器
'0 皿2的夕.想
链装动作
翻开链接
关闭近
框架中翻开锥接
滚动到元件 泰班
显示信ifi
设置面板状态
设置图片
设置选中
启用糜用
移动
设置尺寸
置于顶层/底层
设置不透明
获取焦■点
组织动作
▼选项改变时ICase 1
如果被选项于当前==小红
设置列表选中项
rank为第一名ICase 2
否那么如果被透项于当前==小医
设首列表选中项
rank为 第二名ICase 3
乙机如里雌项于当前一小明取消
设置小明第三名
发布原型检查效果，选择小虎，看到他的名次是第二名；选择小明，看到他的名次是第三名； 选择小红，看到她是第一名，从而实现两个下拉列表的联动效果。
8.4.2 一对多联动效果
虽然实现两个菜单的联动效果，但是也会发现，节中两个下拉列表是一一对应的，在实际 的使用过程中，可能是一对多关系，经常会碰到省市县3级联动，选择某个省份，第二个下拉列表 选项里有多个市区，假如选择黑龙江省，跟着联动的下拉列表里应该有哈尔滨市、佳木斯市等等， 怎么才能实现这样的效果呢？
实战演练
(1)拖曳一个“下拉列表”元件到工作区域，将其标签命名为“省份”，双击该下拉列表元件, 再弹出的“编辑下拉列表”对话框中单击“添加”按钮新增3个列表选项，分别是“黑龙江省”“山 东省” “河北省” oX Cut t) C是在下拉列表元件上右键单击，在弹 出的快捷菜单中选择“转换为动态面板”命令，输入动态面板的名称为“市区”，并复制出3个状 态“黑龙江市区” “山东市区” “河北市区”。
页面概要
Q0 D
3显示与否行为
可设置文本行为
a设置圉像行为
3单项选择按钮选中行为
3安选逊中行为
日设百列表选中埃
元件
+行：
Default
旺列袤选中顼X
市区动态面板

(3)进入到“黑龙江市区”状态里，双击该下拉列表元件，单击“添加”按钮，新增多个黑龙 江市区。
X Cut
t) Copy
□ Paste
日显示与趋茬行为
V设置文本行为
三设置明冷行为
巨华选按招选中行为
巨复选框选中行为 叵设首列我选中B?
» —— 卷5共享
登录
100
Default
编辑黑龙江市区状态
(4)进入到“山东市区”状态里，双击该下拉列表元件，单击“添加”按钮，新增多个山东市 区。
X Cut
t) Copy
Q Pa63
6H6向
U..J
cssaGt
就要
t显示与fl僦行为
E设宣文本行为
设置图像行为
d单项选择按酶中行为
[=复园雕中行为
E设邕舛表选中I更
加5 共享
100

Default编辑山东市区状态
(5)进入到“河北市区”状态里，双击该下拉列表元件，单击“添加”按钮，新增多个河北市 区。
X Cut
© Copy
□ Pam
□□0 :□:
(■■-J V*
极要
目显示与隙电行为
巨设置文本行为
日设置用售行为
R华透按钮透中行为
日复选推法中行为
£设曾外表选中项
元件
T
o
<5
I N
» —一 侬 共享
100
登录
Default

编辑河北市区状态
(6)编辑完状态内容之后，选中省份下拉列表元件，为其添加选项改变时触发事件，在组织动
作面板中单击“添加情形”按钮，在弹出的情形对话框中使选中项值等于黑龙江省，在添加动作面 板单击“设置面板状态”选项，勾I选“市区”复选项，在设置动作面板的状态下拉列表中选择“黑 龙江市区”状态。
X交互编辑器45接动作

45接动作
翻开链接
关闭窗口
框架中翻开链很
潦动到元件
元件动作
|没查圆板状态|
设登文本
设置图片
没查近中
设置列表选中项
启用噤用
移品I
设置尺寸
砥
设置不透明
获取隹点
，一匐网作
市区
黑龙江市区
axas NoneZ
None0
吏参选成，
□如果哙藏那么显示
□推动和拉动元件
黑龙江省对应市区
取消

说明
tit
目显示与隐藏行为
日设置文本行为
E设置图像行为
□单项选择按钮选中行为
回复选艇中行为 国设百列表选中【员
禁用
▼选项改变时
Case 1
如果 螭项于当前--黑龙江省
滞
Q+ i5P :—
s
Default
要奉元件，
口;
(7)运用同样的方式，设置山东省对应市区、河北省对应市区。
iSS面板状否
市区到黑龙江市区
Case 2 否那么如果被选项于当前-山东 告
没直面板状态市区a山东市区
Case 3 否剜如果被选项于当前-河北 有
设百电板状念ro1
市区到河；I汴区省市对应设置
发布原型检查效果。在下拉列表中选择山东省，可以看到山东省的一些市区；选择河北省，可 以看到河北省的一些市区；选择黑龙江省，可以看到黑龙江省的一些市区。该原型实现下拉列表一 对多的联动效果。
8.5 启用/禁用
在默认的情况下拖曳到工作区域中的元件是处于启用状态的，但有的时候需要禁用一些元件， 例如复选框在某些情况下是不能勾选的。可以对文本框、文本段落、下拉列表、复选框、单项选择按钮、 提交按钮等元件设置启用或者禁用。
实战演练
(1)拖曳两个“按钮”元件到工作区域，将其文本内容分别重命名为“启用”“禁用”，标签 命名为“启用按钮”“禁用按钮”，再分别拖曳一个复选框、单项选择按钮、文本框、文本段落、下拉 列表、提交按钮到工作区域，将它们的标签分别命名为“复选框”“单项选择按钮”“单行文本框”“文
（1）拖曳一个“矩形1”元件到工作区域，将其宽度设置为100,高度设置为30,文本内容重 新命名为“导航一”，拖曳一个“垂直菜单”元件到工作区域，将其作为导航一的二级菜单，把它 的标签命名为“导航一的二级菜单”。
目显示与院藏行为
W
渣
样式 交互 说明
位承尺寸
66 x 133
-I .
Q+ & ：
Default言
基本元件，
口.
矩形1矩形2苞
100 w rf 83
0
默认
不透明性^
丹源▼
一级菜单和二级菜单
（2）把导航一的二级菜单先隐藏起来，单击导航一的时候，才显示出其二级菜单。选中导航一， 为其添加鼠标单击时触发事件，在添加动作面板单击“显示/隐藏”选项，勾选“导航一的二级菜单” 复选项，为其添加一个动画效果，在设置动作面板单击“切换”按钮，在显示动画下拉列表中选择 “向下滑动”选项，在隐藏动画下拉列表中选择“向上滑动”选项。
x交互编辑器
链装动作 翻开梃接
关闭窗口
梅栗中翻开链接 谖动到元件
元件动作
设置面板状态
设置文本 设置S片 设置选中 设立列表选中项 日用煤用
移动 曲 设置尺寸 百于顶层/底后 设置不透明 我取焦点
▼单击时
区示假*
切换可见性导航一的二级菜单Show向下滑动500室秒.
Hide向上滑动500定秒
设苴动作
目睡
导航二的二级菜单

None
确定
取消
导航一菜单交互效果
元件有显示行为和隐藏行为，交互编辑器提供了可以在这两者之间进行切换的行为，叫作切换 可见性，作用是在显示和隐藏切换显示。
（3）按F5键发布原型看一看效果，单击导航一，它的二级菜单向下滑动显示出来，退出的时候, 二级菜单向上滑动，从而实现了二级菜单显示与隐藏效果。

本段落”“下拉列表”“按钮”。
显示为
0设置文本行为
日设置囱像行为
S单中行为
□复选框选中行为
目设置列表选中项
—启用禁用
Default
启用二用 X |
100
启用
□Checkbox
200
300
禁用
400

启用禁用元件
（2）选中“禁用”按钮，为其添加鼠标单击时触发事件，弹出交互编辑器对话框。在添加动作 面板单击“启用/禁用”，分别勾选“复选框”“单项选择按钮”“单行文本框”“文本段落”“下拉列 表”“按钮”等复选项后，在设置动作面板中单击“禁用”按钮，将这些元件禁用。
>;交互编错器；单击时
启用麋用
禁用启用按钮
禁用禁用按钮 笑用复选出
禁用单项选择按钮
禁用多行文本框 禁用下拉列表框 笑用按钮

；单击时
启用麋用
禁用启用按钮
禁用禁用按钮 笑用复选出
禁用单项选择按钮
禁用多行文本框 禁用下拉列表框 笑用按钮
0 信用
0清加事件，,题■按动作
翻开链接关闭窗口
您架中翻开链接滚动到元件
元件动作设置面板状态
i£23^设置图片
设自2中设置列^中项
|信用朦用|移动
3^$设置尺寸
置于顶层/底层设置不透明
获取焦点取消
禁用元件
（3）选中“启用”按钮，为其添加鼠标单击时触发事件，弹出交互编辑器对话框。在添加动作 面板单击“启用/禁用”选项，分别勾选“复选框”“单项选择按钮”“单行文本框”“文本段落”“下 拉列表”“按钮”等复选项后，在设置动作面板中单击“启用”按钮，将这些元件启用。
>;交耳编辑器
2£J
晶 初事件/
Q
翻开链接
关闭窗口
框架中翻开链接
潦动到 元件动作
显示博S
iS置面板状态
设置文本 设置图片 设置选中
迨吉列表法中项 |启用噤用|
移动 蚓 设置尺寸 置于顶息底层 设置不透朗 荻取焦点
▼单击时 启用座用 启用启用按钮 启用禁用按钮 启用复磁 启用单项选择按钮 启用M文本根 启用冬行文本程 启用下拉列表根 启用按钮
igBSWt
目标
刷
Q0
启用禁用
取消
确定启用元件
按F5键发布制作的原型，当按“禁用”按钮时复选框和单项选择按钮等元件不可用，当按“启用” 按钮时复选框和单项选择按钮等元件为可用状态，从而实现元件的启用与禁用效果。
8.6 移动/旋转和置于顶层/底层
移动行为可以设置元件移动的相对位置以及绝对位置，动画效果和移动的时间，其经常用于制 作导航菜单的时候，移动菜单项选择中的背景；旋转行为用于调整元件的角度，可以自行定义元件的角 度；置于顶层/底层行为可以控制元件上下关系，设置元件处于在顶层或者底层，以到达元件的显示 效果。
实战演练
(1)拖曳3个“标题2”元件到工作区域，将其文本内容分别命名为“导航一”“导航二”“导 航三”；拖曳一个矩形元件到工作区域，将其宽度设置为140,高度设置为50,颜色填充为绿色 (#00CC00),放置在“导航一”菜单下面，置于底层，标签命名为“菜单项选择中背景”，作为导航菜 单的背景。
o 一

j I导航一 导航二 导航三
8司
导航菜单
(2)选中“导航二”菜单，为其添加鼠标单击时触发事件，在添加动作面板中单击“移动”按 钮，勾选“菜单项选择中背景”复选项，在设置动作面板设置移动到绝对位置(190,132),动画效果为 线性，用时为500毫秒。
X交互编辑器
1阖DW*夕,痴回柞

腼砒

Q
链JS动作
翻开筵接
关闭窗口
框架中翻开链接
港动到元件
元件动作
设置面板状态
1523^
设置图片
设查证中
设置列表选中项
启用朦用
设置尺寸
5T丽防
设置不透明
我取焦点

▼单击时
移动

目标
菜单项选择中苜景
菜单项选择中背后到达（190.132线性500＞秒

移动
到达：190 x £ 132 y 6
码
雌,500"

更多项选择BS・
WS
边界
十添加界跟
移动菜单项选择中背景
（3）选中“导航三”菜单，为其添加鼠标单击时触发事件，在添加动作面板中单击“移动”按 钮，勾选“菜单项选择中背景”复选项，在设置动作面板设置移动到绝对位置（332,132）,动画效果为 线性，用时为500毫秒；然后单击置于顶层，将菜单项选择中背景置于顶层；最后单击旋转动作，将菜 单项选择中背景旋转45。。
交互编辑器“画"件夕,添3助作
翻开铤接
关闭窗口
辟B中翻开链接
濠动到元件 元件动作
显示傅iS
友百面板状态
设置文本
设置图片
设置选中
设置列表选中项
启用候用
移动
睁
设置尺寸

“画"件夕,添3助作
翻开铤接
关闭窗口
辟B中翻开链接
濠动到元件 元件动作
显示傅iS
友百面板状态
设置文本
设置图片
设置选中
设置列表选中项
启用候用
移动
睁
设置尺寸
组织动作
;单击时
移动
菜单项选择中首后到达（332.132）
菜单透中背鼠到顶层
旋转
菜单项选择中背景经过45。
骸的
目忘
菜单项选择中背杲
顺时针 0丝上45J A
aS
None Z 500 耽
9. £
0V £

设置不透明 获取焦点
取消
图8.46菜单项选择中背景置于顶层
（4）按F5键发布制作的原型，单击导航二菜单，会发现绿色的菜单项选择中背景移动到导航二菜 单后面；单击导航三菜单，会发现菜单项选择中背景移动到导航三菜单位置并旋转45。，由于将其设置 为置于顶层，它会覆盖住导航三菜单。
导航一 l、J航二
牛航三
导航一
导航一
发布原型
8.7 获取焦点和展开/收起树节点概要

概要
一姬
100
400
获取焦点行为常用于文本框、文本段落；展开/收起树节点常用于展开或收起树形结构。

E设直列表选中项目启用禁用

目启用禁用
目移加选择和置于顶层置
Z获得焦点和展开折叠树节点
▼ Item 1
Item 1.1
Item 1.2
Item 1.3
» Item 1

Default空本元件，
获得焦点元件和树形元件
小结
（1）学会使用Axure元件的显示与隐藏行为，通过切换方式控制元件的显示与隐 藏交互效果;通过变量方式控制元件显示与隐藏效果；学会设置多个导航菜单联动效果。
（2）学会使用设置文本和设置图片行为，给文本进行通过多种方式进行赋值，使 图片不同触发事件下显示不同的图像。
（3）学会使用设置选中行为，常用于单项选择按钮选中和复选框选中效果。
（4）学会使用设置列表选中项行为，学会设置下拉列表的一对一联动效果和一对 多联动效果。
（5）学会使用元件的启用和禁用行为、移动、旋转、置于顶层和置于底层行为。
（6）学会使用元件的获取焦点、展开、收起树节点行为。
练习
实现京东商城手风琴式菜单显示与隐藏效果。

家用电器手机/运营商/数码 电脑/办公
家居/家具/家装/厨具 男装/女装/童装/内衣 美妆/个护清洁/宠物 女鞋/箱包/钟表/珠宝 男鞋/运动/户外 房产/汽车八气车用品 母婴/玩具乐器 食品/酒类/生鲜/特产 艺术/礼品鲜花/农资绿植 医药保健/计生情趣 图书/文娱/教育/电子书 机票/酒店/旅游/生活 理财/众筹/臼条/保险 安装/维修/清洗/二手 工业品

■玩3c >

于机例＞ I网上营业厅＞ 1配代频道＞ 1智能数码＞ 1影像Club ＞ ，
^honor tp-uink
，畛 SONY
HUAWfl
Has。
手机通讯
>
手机游戏手机5G手机拍照手机全面屏手机老人机对讲机以旧换新 手机维修
运营商
>
合约机手机卡宽带充话费/流量中国电信中国移动中国联通京东通信 挑靓号
新机首发
手机配件
>
手机壳贴膜手机存储卡数据线充电器手机耳机创意配件手机饰品 手机电池羊果周边移动电源蓝牙耳机手机支架拍照配件
有新机更有范『—
摄影摄像
>
数码相机微单相机单反相机拍立得运动相机摄像机镜头户外器材 账棚器材冲印服务数码相框

数码配件
>
存储卡三脚架/云台相机包海镜闪光灯/手柄相机清洁屈膜机身附件 镜头附件读卡器支架电池/充电器
尼康Z5
享10重好礼
影音娱乐
>
耳机/耳麦音箱/音响智能音箱收音机麦克风MP3/MP4专业音频音频线

智能设备
>
智能手环智能手表智能眼镜智能机器人运动跟踪器健康监测智能配饰 智能冢居体感车无人机

电子教育
>
学生平板点读机/笔早教益智录音笔电纸书电子词典爰读机翻译机

京东商城手风琴式菜单

回发布原型

变量方式控制元件显示隐藏

通过使用切换可见性行为，可以控制元件的显示与隐藏效果，除了使用这样方式，还可以通过 变量方式控制元件的显示与隐藏。
实战演练
(1)复制“导航一”和“导航一的二级菜单”两个元件，把“导航一”元件重命名为“导航二”， 把它的二级菜单标签重命名为“导航二的二级菜单”。
显示与晒亍为X
Q+ t5> ：
Default
页面概要
Q0 D
S显示与谢行为
导航一
导航二的二级菜卑
点击上方接田开始淘隔?的交互
样式
交互 说明
基本元件.
□ H旗 136^2§
复制导航一和二级菜单
(2)添加一个全局变量，将其命名为“flag”，默认值为0,选中导航二菜单，修改其鼠标单击 时触发事件，单击添加条件，设置变量值“flag”等于0,使其显示二级菜单。
X交互编辑器&添加事件磔D2MT
运接动作
翻开链接
关闭B 口
涯中翻开链接
桐©^
元件动作
显示编S |
设百面板状态
设置文本
设置图片
设置选中
设置列表选中项
启用度用
移动
雌
设置尺寸
置于顶层/底层
设置不透明
荻取焦点

&添加事件磔D2MT
运接动作
翻开链接
关闭B 口
涯中翻开链接
桐©^
元件动作
显示编S |
设百面板状态
设置文本
设置图片
设置选中
设置列表选中项
启用度用
移动
雌
设置尺寸
置于顶层/底层
设置不透明
荻取焦点
骏加

▼单击时
Case 1
如果值于flag - t0"
皇示傀董

显示导航二菜单向下滑司500皇秒

目标
导航二的二级菜单
0❷
防Mffltt
g
向下滑动500电：
None
更多项选择IS，
□盍于顶层
None

显示导航二的二级菜单
(3)在添加动作面板中单击“设置变量值”选项，勾选“flag”复选项，在设置动作面板的设 置为下拉列表中选择“值”，在值数值框中输入1。
>;交互编辑器

3活加事仲，,添ms晒
蹩: Q履开畋起帮节点
中壁器动作
混谢序移除排序
劭倘选移除需送
设置当前显示页面设置每页工程数量
tsise取消标记
更新行窟除行 HE动作
设置自适应¥图|i£S5M|
其它般发事件
OWE▼单击时
Case 1
如果值于flag — "0"
要示/总篇
显示导航*二a55单向下滑动50逢沙
ifiS受量值
flag 为"1"

取消修改变量值
(4)再单击鼠标单击时触发事件，单击新增条件，设置变量值"flag" =1,来隐藏二级菜单，
在添加动作面板单击“显示/隐藏”动作，勾选“导航二的二级菜单”复选项，在设置动作面板单击
“隐藏”按钮，在动画下拉列表中选择“向上滑动”选项，接着把变量“flag”值设置为0。
>;交互编辑器
ss勖祚
翻开链接
关闭窗口
框架中翻开链接
濠动到元件
元件动作
设置面板状态
设有图片
设置选中
设首列表选中项
启用燎用
领极
▼单击时
ICase 1
如果值于flag == "0"
显示/除茶
显示导航二的二Si菜单向下滑动500翱
设苴立星值
flag 为 T
ICase2
否嫌如果值于flag --1-
显示/!孰
息或导航二的二螟单向上滑动500里秒
没百变量值
flag 为"0"
设置动作
目标
导航二的二级菜单
9好O
环意町切通
幅
向上滑动，500 w
NoneC

更多项选择女，
None
移动
旋转
设置尺寸
置于顶层/底层
设宜不透明
获取焦点
确定
取消
隐藏导航二的二级菜单
(5)按F5键发布原型检查效果，单击导航二菜单，其二级菜单向下滑动显示出来，再单击一 次导航二菜单，其二级菜单向上滑动隐藏起来，从而实现想要的效果。通过显示与隐藏的交互设置, 就能让导航菜单互动起来，模拟真实的效果。

发布原型
多个导航菜单联动效果
当单击导航一菜单的时候，想让导航一和导航二的二级菜单都显示出来。但是怎么才能实现两 个甚至多个导航菜单的联动效果呢？

二级菜单都显示出来
实战演练
（1）复制导航一及其二级菜单，把导航一重命名为“导航三”，把二级菜单标签重命名为“导 航三的二级菜单”。
显示与总费行为
|导航三的二级洞
Q+•
Default
口
侬1侬2

导航三及二级菜单
（2）复制导航一及其二级菜单，把导航一命名为“导航四”，把二级菜单标签重命名为“导航四的二级菜单”。
页面柢要
QB D
S显示与例行为
渣
Q+ （51 :
DefaultC
其本元件,
口
就1就2
砺与》«行为 X I
冬400500
司
行 5E5 砸
导航四的二级菜单M
新建交互
点击上方按钮开始添加新的交互

导航四及二级菜单
（3）实现“导航三”菜单和导航四”菜单的联动效果。选中“导航三”菜单，为其添加鼠标 单击时触发事件，在设置动作面板单击“显示”按钮，使其显示“导航三的二级菜单”，动画效果 为向下滑动，单击“隐藏”按钮，将“导航四的二级菜单”隐藏起来，动画效果为向上滑动。
0显示与的行为
O IJ
Q +@3
Default —
基本元件,
□，
碗1.2 用
VO □ Q
S3
导
▼单击时
显示的
显示导航三的二皴菜・向上滑动
500星秒
显示傀藏
除藏导航四的二级菜单向上滑浙
500新
新建交互
常用交
鼠标悬^5台口

导航三菜单交互效果
(4)选中“导航四”菜单，为其添加鼠标单击时触发事件，在设置动作面板单击“显示”按钮, 使其显示“导航四的二级菜单”，动画效果为向下滑动，单击“隐藏”按钮，将“导航三的二级菜 单”隐藏起来，动画效果为向上滑动。
概要
题书画亍为 x |
小D ।400
FT
说明
tit

▼单击时
S显示与陵蕾行为显示导航四的二级菜单向下滑才 500例

显示导航四的二级菜单向下滑才 500例
导航三
0O -，？
□ 导航四 口 □O□
装示他督显示/除藏
隆藏导航四的二级菜单向上滑动500例
Default新建交互
常用交互鼠标悬酸互样式
导航四菜单交互效果
发布原型检查效果，单击导航三，导航三的二级菜单向下滑动显示出来，单击导航四菜单，导 航三的二级菜单向上滑动隐臧起来，同时导航四的二级菜单向下滑动显示出来，从而实现这两个菜 单的联动效果，也是想要到达的效果。
8.2设置文本和设置图片
设置文本行为一般可以应用于便签元件、标题元件、矩形元件等元件，有文本内容的元件都可 以为其设置文本行为；设置图片行为是针对图片元件的，下面看一看设置文本和设置图片行为的使 用。
8.2.1 设置文本行为实战演练
(1)拖戋二个“矩形1”元件到工作区域，调整其大小，把它的标签命名为“content",拖曳两 个“按钮”元件到工作区域，将其文本内容分别重命名为“设置文本一”“设置文本二”。
概要