概述:以下主要内容有三点,分别是交互、动态面板及中继器的基本操作和进阶操作。新手,叙述有误请指出,多指教,谢谢!!!

交互

  1. 矩形变色。(设置当鼠标滑过矩形时矩形变为蓝色)
    Axrue 交互 动态面板 中继器 (实训三day03)2.字体变色(当鼠标滑过字体的时候,字体变大 并且变色)
    Axrue 交互 动态面板 中继器 (实训三day03)3.按钮跳转(点击按钮会跳转到新的窗口链接,可链接到自己创建的已有界面,也可以链接到外部url(以下是连接到已有的页面))
    Axrue 交互 动态面板 中继器 (实训三day03)4.按钮点击隐藏/显示矩形
    在交互样式设计中,选择click or tap中的显示/隐藏,选择切换,点击鼠标的时候就可以把矩形显示或隐藏,还可以设置矩形显示、隐藏时候的动画。
    Axrue 交互 动态面板 中继器 (实训三day03)5.交互动作+情形(点击按钮,如果用户年龄未满18则打开mooc链接,若已成年则打开京东)
    如下图做一个组合:文本标签+文本框,还有一个按钮。给按钮添加交互事件
    Axrue 交互 动态面板 中继器 (实训三day03)给按钮设置情形,如图:
    Axrue 交互 动态面板 中继器 (实训三day03)当满足情形时,设置按钮点击后的事件(这里的事件是打开新链接)
    Axrue 交互 动态面板 中继器 (实训三day03)

动态面板

设置一个动态面板,并且当选中不同列表时,展现不同列表的内容
1.
Axrue 交互 动态面板 中继器 (实训三day03)2.设置列表所对应的面板,并且滑过列表文字时文字显示红色
Axrue 交互 动态面板 中继器 (实训三day03)

中继器

  1. 添加中继器并添加数据
    (拖动中继器到页面中后,点击右侧样式手动添加数据)
    Axrue 交互 动态面板 中继器 (实训三day03)

2.双击页面中的中继器进入编辑中继器状态

Axrue 交互 动态面板 中继器 (实训三day03)

Axrue 交互 动态面板 中继器 (实训三day03)

3.向中继器中添加表格元件
Axrue 交互 动态面板 中继器 (实训三day03)
Axrue 交互 动态面板 中继器 (实训三day03)
4.向表格中填充在中继器处写好的数据
Axrue 交互 动态面板 中继器 (实训三day03)

Axrue 交互 动态面板 中继器 (实训三day03)

Axrue 交互 动态面板 中继器 (实训三day03)
Axrue 交互 动态面板 中继器 (实训三day03)Axrue 交互 动态面板 中继器 (实训三day03)

Axrue 交互 动态面板 中继器 (实训三day03)
5.在表格后加入一列操作列(包含修改和删除按钮)
Axrue 交互 动态面板 中继器 (实训三day03)
6.给删除按钮添加交互事件
Axrue 交互 动态面板 中继器 (实训三day03)
7.添加一个新增按钮并添加交互事件

Axrue 交互 动态面板 中继器 (实训三day03)Axrue 交互 动态面板 中继器 (实训三day03)

8.补充:在新增的时候会弹出模块框,所以还有一个模态框的显示与隐藏的操作。
Axrue 交互 动态面板 中继器 (实训三day03)
Axrue 交互 动态面板 中继器 (实训三day03)

Axrue 交互 动态面板 中继器 (实训三day03)
9.修改按钮的交互事件操作
Axrue 交互 动态面板 中继器 (实训三day03)

总结

学得还行,今天的练习是京东首页某个模块的绘制,如下图:

Axrue 交互 动态面板 中继器 (实训三day03)

补充:

今天还学了母版的绘制,当绘制了母版之后,页面都可以使用,并且在修改母版的时候,应用此母版的页面对应的地方也会同时发生改变。
Axrue 交互 动态面板 中继器 (实训三day03)

相关文章:

  • 2021-12-05
  • 2022-12-23
  • 2021-12-19
  • 2021-11-30
  • 2021-10-14
  • 2022-12-23
  • 2021-12-12
  • 2021-11-18
猜你喜欢
  • 2021-08-23
  • 2021-12-30
  • 2021-09-22
  • 2021-06-26
  • 2021-11-30
  • 2022-01-11
  • 2021-05-21
相关资源
相似解决方案