按钮设置

点击复制

了解使用网络应用程序编辑器的基本知识,并建立你的应用程序,它将只由按钮组成。


让我们根据《爱丽丝梦游仙境》这本书做一个简短的测验。让我们看看用户是否记得爱丽丝第一次遇到柴郡猫的地方。
我们的应用程序将有。

  1. 问题文本。爱丽丝在哪里第一次见到柴郡猫?
  2. 选择按钮。Mad-Tea Party, Duchess' House, Wood, Croquet-Ground.如果用户选择了错误的答案--带有该答案的按钮就会消失,如果用户选择了正确的答案--所有带有错误答案的按钮就会同时消失。
  3. 弹出信息,告诉你答案是否正确。

如何创建一个按钮

用鼠标指针拖动 "按钮 " 元素(通过点击并按住左键)到你想放置按钮的地方。


你需要添加四个按钮--根据可能的答案的数量。


定制按钮的外观

点击第一个按钮一次--设置窗口将打开。你会发现自己在"外观和感觉"标签上,它负责按钮的外观。

1.编辑以下字段。

  • 标签:按钮文本 - 输入第一个答案。"Mad-Tea Party"。
  • 图标:按钮图标--点击 "挑选图标",选择你喜欢的一个(现在有超过2500个图标)。
  • 大小:按钮大小--设置为 "大",使按钮变大。
  • 名称。这是按钮的名字,你的应用程序中的其他元素通过这个名字 "看到 "这个按钮;每个按钮都需要一个独特的名字--将按钮命名为 "btn-mad_tea"。

当你编辑这些字段时,窗口顶部的图像会发生变化,以显示应用设置后的按钮的样子。

2.当你填完所有的字段后--点击"保存"。

  1. 通过与第一个按钮类比,配置其余的按钮,使用的名称是:btn-duchess_h, btn-wood, btn-croquet_g。
  2. 点击 "保存更改",将更改保存到你的应用程序中--否则,一旦你刷新页面或关闭编辑器,这些按钮就会消失。


设置触发器和事件

现在你需要设置按钮的动作。让我们从有正确答案的那个开始--"公爵夫人的房子"。你的任务是向网络应用程序编辑器 "解释"。

  • 什么是按钮的触发器--意思是,它应该对什么作出反应:按下时。
  • 在这种情况下会发生什么事件:按钮消失。
  • 在这个事件发生的地方,什么元素发生变化:其他按钮。

回到 "公爵夫人之家 "按钮的设置,进入 "触发器 "标签。所有为它添加的触发器将被显示出来。

  1. 现在只有一个--"OnClick"。它是自动添加的,意味着当你点击它时,按钮就会动作(这正是你需要的)。
  2. 除了"OnClick",按钮还可以有其他触发器。一个完整的列表和描述在平台文档中。

现在你需要指定事件的信息(你将有三个事件,每个按钮一个)。点击"OnClick"旁边的"+"。事件设置窗口将打开。

"目标组件"字段中,你需要指出事件将在哪里发生,在 "动作 "字段中,它将是什么类型的事件。

隐藏所有错误答案

添加一个将隐藏 "疯狂茶会 "按钮的事件。

  1. 点击"目标组件"字段,通过独特的名称btn-mad_tea找到它。在 "动作 "字段中,选择适当的事件,在本例中是 "隐藏按钮"。
  2. 点击 "保存"。

用同样的方法配置其余的按钮,使其被隐藏。

  1. 当你完成后,"公爵夫人之家 "按钮的触发器列表应该是这个样子的。
  2. 点击 "保存"来保存你的修改。

现在你需要确保一切正常。

  1. 保存你的修改。
  2. 按下发布应用程序的按钮(将其放在互联网上),选择 "开发"。
  3. 点击去你的应用程序图标 - 它将在一个新的标签页中打开。

进入应用程序,确保当你选择正确的选项时,其余的按钮消失。

点击时隐藏不正确的答案

现在,让我们在用户点击带有错误答案"Mad-Tea Party"的按钮时使其消失。在这种情况下,触发器(按下)和事件(消失)都属于同一个按钮--你只需要对它进行操作。
打开按钮设置,进入 "触发器"标签,为 "onClick"触发器添加一个新事件。在 "目标组件"字段中,选择 "本组件(自己)",表示按钮为自己激活一个事件。"Action"字段的值与前面的例子相同--"隐藏按钮"。保存所有更改并发布应用程序,切换到应用程序标签,并刷新它。检查一切是否按计划进行。


现在调整"木头"和"槌球-地面"。保存、发布并再次测试。

按钮的类型

很好,答案起作用了。现在是时候添加一个问题了。当然,Appmaster.io有专门的元素,但你还记得我们的任务--按钮,没有别的。所以让我们再添加一个。这一次 - 不是在主画布上,而是在页面的顶部。为了使它更有趣,请填写这个截图上的问题。

为了使它更有趣,请按照这个截图填写问题。


现在为不同类型的按钮使用颜色方案进行 "着色":进入设置,将"类型"字段中的值切换为任何其他类型。


我们得到了这样的结果,但你可以选择你的选项,按钮的颜色方案并不影响它的操作。


现在让我们进入最后一项任务--为用户设置一个信息。

更困难的任务

你可以用不同的方式在屏幕上显示一条信息。我们挑选了一种最不寻常的方式。

首先,让我们确保当用户给出正确答案时,包含问题的按钮会自动停用。它们将变成灰色,并停止对点击的反应。要做到这一点,我们使用我们尚未考虑的 Enable(禁用)函数,以及已经熟悉的"onClick"。- 然后我们将考虑一个新的触发器--onStateChange,当按钮的状态发生变化时就会被触发。让我们把这个触发器分配给"?"--信息将显示在它上面。

停用按钮

你可以在按钮的设置中通过切换"启用"字段选择器手动启用或停用按钮。


要设置自动切换,请打开 "公爵夫人之家 "按钮的偏好设置,并添加一个 "onClick"触发器。在 "目标组件 "字段中选择一个问题按钮,在 "动作 "字段中选择"禁用按钮"。对所有包含问题的按钮重复上述操作。它应该看起来像这样。

记住要保存所有的修改,发布并检查应用程序是否正常工作。


现在,让我们把消息的开头绑定到按钮"?"(我们把它命名为 "btn_qqq")。让我们给它添加触发器"onStateChange"。当按钮的状态发生变化时,它就会激活--例如,当它关闭时。在

"目标组件"字段,选择 "应用程序"(消息将在应用程序窗口中弹出),在 "动作"字段中--"显示用户界面消息"(向用户显示消息)。

  1. "消息风格"栏中,选择最适合你情况的。在我们的例子中,这是"Sucess"--一个关于成功完成的消息。
  2. 填写"标题"和"内容"字段 - 告知用户答案是正确的,或者只是写一些好的东西。

保存、发布和测试。

结果

选择正确的选项,有错误答案的按钮应该被隐藏,问题的文字应该淡化,并弹出确认信息。

当然,可以通过将信息绑定到正确答案的按钮上,更容易地定制信息。尽管今天我们不是在寻找简单的方法。此外,你已经知道了足够的东西,不需要我们的指导。试着定制当你选择错误答案时将会弹出的错误信息。它应该看起来像这样。


我们相信,这个指示帮助你更好地了解Appmaster.io。但是,如果它不清楚(或者,也许,相反,太简单了),写信给我们的技术支持的电报渠道,关于你需要的指示。我们将写他们!