用户条款和条件 | Terms and Conditions

在本教程中,你将学习如何制作一个表单,在用户继续之前必须选中复选框并输入姓名(通常用于同意某某条款)。【原型预览】

1、元件和页面设置

Page 1-条款和条件表单

  1. 打开一个新的RP文件,并在画布中打开Page 1
  2. 拖拽一个复选框元件,一个文本标签元件,一个文本框元件和一个按钮元件到画布中。
  3. 设置文本框元件上的文字为“我同意上述条款和条件”。
  4. 设置文本标签上的文字为“请在此处签名”,并把该元件放在文本框上方。
  5. 设置按钮的名称为“下一页”。

Page 2-成功页

  1. 在项目中添加一个新页面,并将其在画布中打开。
  2. 拖拽一个标题元件到画布中,并设置标题文字为“成功!”。
2、当复选框未勾选时禁用文本框

将文本框设置为默认禁用状态

  1. 打开Page 1并选中文本框元件。
  2. 交互面板的右上角,点击更多选项,然后勾选禁用

这将使文本框默认状态下显示禁用样式效果,并且变为灰色。同时在Web浏览器中,它还可以禁止用户输入内容。

当复选框被选中时启用文本框

  1. 选中复选框元件,点击交互面板中的新建交互
  2. 在弹出的列表中选择选中时事件,然后选择启用/禁用动作。
  3. 目标下拉列表中选择文本框元件,保留下面的启用选项。
  4. 点击确定按钮保存操作。

当复选框被取消选中时再次禁用文本框

  1. 在复选框被选中的状态下,再次点击交互面板中的新建交互
  2. 在弹出的列表中选择取消选中时事件,然后选择启用/禁用动作。
  3. 目标下拉列表中选择文本框元件,然后选择下方的禁用选项。
  4. 点击确定按钮保存操作。

当复选框被取消选中时清除文本框中的内容

  1. 在复选框被选中的状态下,点击取消选中时底部的插入动作图标,在弹出的列表中选择设置文本
  2. 目标下拉列表中选择文本框元件。
  3. 保留字段为空。(这样就可以清除文本框中的内容。)
  4. 点击确定按钮保存操作。
3、在用户签名之前禁用下一页按钮
  1. 选中按钮元件。
  2. 点击交互面板右上角的更多选项,然后选中禁用复选框。

设置按钮的禁用样式

  1. 在按钮元件选中的状态下,点击交互面板中的新增交互
  2. 在弹出的列表底部,选择:禁用样式效果。
  3. 在显示的:禁用模块中,选中填充颜色,然后在颜色选择器中选择一种灰色。
  4. 点击确定按钮保存样式效果。

当文本框中输入内容后启用按钮

  1. 选中文本框元件,点击交互面板中的新建交互
  2. 在弹出的列表中选择文本改变时事件,然后选择启用/禁用动作。
  3. 目标下拉列表中选择下一页按钮,保留下面的启用选项。
  4. 点击确定按钮保存操作。
  1. 在文本框元件被选中的状态下,将鼠标悬停在交互面板中的文本改变时的标题上,然后点击右侧出现的启用情形
  2. 在弹出的情形编辑窗口中,点击添加条件
  3. 在出现的条件行中,在中间的下拉列表中选择不等于!=)。

对话框底部的摘要中将会显示:如果 文字于 当前 != “”。当文本框不为空时(一旦用户输入内容),就会满足这一条件。

  1. 点击确定按钮关闭情形编辑对话框。

当文本框被清空后重新禁用按钮

  1. 在文本框元件被选中的状态下,将鼠标悬停在交互面板中的文本改变时的标题上,然后点击右侧出现的添加情形
  2. 在弹出的情形编辑对话框中,点击确定按钮(不添加任何条件)。
  1. 在新增的情形下,点击插入动作图标,然后在弹出的列表中选择启用/禁用动作。
  2. 目标下拉列表中选择下一页按钮,然后选择下方的禁用选项。
  3. 点击确定按钮保存操作。

注意:虽然我们没有给这个情形添加任何条件,但是它仍有一个“否则 如果 真”的条件。当第一种情形没有发生时(文本框中的内容被清空),就会触发此情形,也就是默认情形。

4、将下一页按钮链接到Page 2
  1. 选中下一页按钮,点击交互面板中的单击时,打开链接
  2. 在弹出的列表中选择Page 2,然后点击确定按钮保存操作。
5、预览交互
  1. 预览Page 1,试着点击文本框和下一页按钮,他们都处于禁用状态,所以什么都操作不了。
  2. 选中和取消选中复选框几次,文本框就会随之启用和禁用。
  3. 在文本框中输入一些内容然后再将其清除,可以通过删除的方式也可以通过取消选中复选框的方式。下一页按钮也会随之启用然后又被禁用。
  4. 完成这个表单,然后点击下一页按钮,将跳转到Page 2页面。
评论(0)

发表评论

电子邮件地址不会被公开。 必填项已用*标注