动态面板和中继器的使用

时间:2024-04-05 09:49:01
  • 动态面板和中继器的使用
  • 动态面板和中继器的使用
  • 动态面板和中继器的使用
简单的利用函数制作一个计算器和点赞数递增的效果

动态面板

超市大屏上图片展示一般都用到了轮播图,轮播图就是用动态面板制作的。在编辑页面元件库中插入一个动态面板,在不同的状态编辑中插入不同的图片,大小要和设置的动态面板大小相同,不然页面显示不完整。

动态面板和中继器的使用
  • 动态面板和中继器的使用
  • 动态面板和中继器的使用
有两种不同的设置方式,第一种设置了条件和状态,1状态跳转到2状态,2跳转到3,以此类推。第二种只设置了状态,调整为下一个自动链接。

下面制作了一个复杂的动态面板,实现了按钮的跳转控制,在轮播图的状态改变时,按钮的状态也随之改变。这里按钮的实现需要注意:对按钮指定相同的选择组,这样他们的显示状态为互斥事件,每次只有一个按钮显示选中。

  • 动态面板和中继器的使用
  • 动态面板和中继器的使用
之前的步骤还是对动态面板进行图片添加,完成后对动态面板的状态进行设置,当动态面板状态改变时按钮随之改变。
  • 动态面板和中继器的使用
  • 动态面板和中继器的使用
对四个按钮点击时的状态进行设置,并指定相同的选择组
  • 动态面板和中继器的使用
  • 动态面板和中继器的使用
页面的交互设置为,当页面载入时轮播图自动播放下一个图片
动态面板和中继器的使用
最后可以覆盖一个热区在页面上,当鼠标移动到热区区域时轮播图停止播放,鼠标移出区域时再次循环

下面是利用动态面板制作的一个时钟读取的小案例,在动态面板元件设置两个状态,制作两个不同的时间显示。例如:10:10:10;10:10:22.方便时钟的跳转。[[Now.getHours()]]:[[Now.getMinutes()]]:[[Now.getSeconds()]]

  • 动态面板和中继器的使用
  • 动态面板和中继器的使用

学习到这里,目前掌握的比较特殊的元件颜色有5种:热区 绿色,母版 粉色,动态面板 蓝色,隐藏 黄色(在软件登录下方有隐藏选框),中继器 淡绿色。接下来就是中继器的使用。

中继器

下面是利用中继器制作的简单的增删查改,在页面中拖入一个中继器元件,在元件中进行编辑,图案的设定,新建和批量删除等一系列按钮或者其他设置是在主编辑页面进行设计。

  • 动态面板和中继器的使用
  • 动态面板和中继器的使用
动态面板和中继器的使用
设计中继器的格式
动态面板和中继器的使用
设计中继器内部内容,名称设置为英文,图像的插入可以使用鼠标右键
动态面板和中继器的使用
将设置好的样式与表格联系起来 [[Item.列名]]

在进行新建信息时会弹出新建列表,我们使用动态面板进行设计,点击编辑按钮时动态面板显示,页面编辑完成或者取消时将动态面板隐藏,并且将新建的信息链接到中继器中进行新增信息更新。这些步骤使用动态面板进行设计,建立两个状态,新建,编辑。

动态面板和中继器的使用
动态面板和中继器的使用
点击新增时增加一行到中继器,并且隐藏动态面板
  • 动态面板和中继器的使用
  • 动态面板和中继器的使用
将新建里内容文本框,名称文本框的数据链接到中继器中,局部变量名可以重复,不影响数据。
动态面板和中继器的使用
点击取消时隐藏动态面板
动态面板和中继器的使用

在中继器内部添加编辑和删除按钮,增加复选框可以在外部设置批量删除按钮时链接在一起。编辑信息制作与新建信息制作类似,不同的是新建时内容是空白的,编辑是需要从中继器中获取表单信息。这时如果选中了其他信息的复选框,在点击另一信息的编辑按钮时需要将其他标记取消,标记当前所在的元件信息。

动态面板和中继器的使用
注意链接到的是编辑文本框,不是之前的新建文本框,在进行建立是将元件进行命名和分组,在之后的建立过程会更方便。
动态面板和中继器的使用
点击删除按钮时,将该行元件从中继器删除
动态面板和中继器的使用
最后一个批量删除按钮,从中继器中删除复选框标记的该行元件

学生成绩录入系统

学生成绩录入系统和上面的案例原理相同,页面设计不同而已。

动态面板和中继器的使用
表头使用矩形工具,标题工具以及按钮工具进行设计。
动态面板和中继器的使用
表头名使用表格元件进行设计,这里留了一行7列

在下方插入一个中继器,利用中继器进行增删改查

动态面板和中继器的使用
在中继器中进行设计
动态面板和中继器的使用

下面的案例是一个手机页面的小案例,可以利用内部框架或者活动面板制作。

  • 动态面板和中继器的使用
  • 动态面板和中继器的使用
动态面板和中继器的使用
使用内部框架比较简单,在内部框架中链接一个图片内容即可
动态面板和中继器的使用
使用动态面板时需要显示滚动条
动态面板和中继器的使用
手机端用的最多的还是拖动效果,将动态面板中的图片设置沿y轴拖动。