- 准备开始
- 页面操作
- 部件库和 Masters
- 建立交互
- 引入动态面板
- 条件、值和变量
- 从头开始
- 从头构建一个电子商务网站
- 设计一个可以在 iPhone 或者 Android 上展示的原型
- 原型设计基础指南
- 按钮的交互
- 显示隐藏部件
- 用户自定义 Tooltip
- 导航菜单
- Masters 指南
- 触发事件教程之上一页/下一页链接 master
- 动态面板指南
- 图片循环显示
- 制作用户自定义的下拉菜单
- 折叠控制
- 选项板部件
- 视频与图片的 Lightbox
- 图像的拖拽交互
- 拖拽地图使用嵌套的动态面板和 OnDrag
- 自动旋转标题
- 高级原型设计指南
- 条件逻辑:账户登录教程
- Auto-Tab 字段
- Terms 和 Conditions
- 下拉列表选择
- 必填字段
- 设置文本下拉列表选择教程
- 将文本传递给下一个页面
- 在下一个页面上设置面板教程
- Web 设计指南
- 嵌入视频和地图
- iPhone App 指南
- 滑动菜单
- 滚动内容
- 屏幕过渡动画
- Swipping 幻灯片
- Repeater 部件指南
- Repeater 小部件
- 自适应视图指南
- 自适应视图
建立交互
点击启用一个 Button Shape,使用编辑器获取文本框焦点。然后,当页面加载的时,使用页面的 OnPageLoad 事件把焦点放到文本框上。
添加一个 Button Shape 和两个文本框
1 添加一个按钮,两个文本框
拖放一个 Button Shape 部件和两个文本框部件到设计区域上。
2 在按钮上编辑文本
在 Button Shape 部件上编辑输入两个单词 Swap Focus。
3 为按钮命名
仍然选择 Button Shape 部件,在“部件交互和注释”窗口将它命名为 Button1。
4 编辑提示文本
选择第一个文本框, 在“属性”选项卡中编辑提示文本读作 Text Field 1。
5 命名为 TextField1
将文本框命名为 TextField1。
禁用第二个文本框
1 编辑提示文本
将第二个文本框部件编辑提示文本读作 Text Field 2。
2 禁用 Text Field 2
在“属性”选项卡,单击“禁用”。
3 命名为 TextField2
继续选择文本框并命名为 Textfield2。
单击按钮禁用第一个文本框
1 选择 Button1
单击选择 Swap Focus 部件。
2 编辑 OnClick 事件
在“交互”选项卡双击 OnClick 事件。
3 添加动作到禁用
在最左侧的列表上选择动作“禁用”选项。
4 指定 TextField1
在最右侧的列表上勾选 TextField1 复选框。
还不能点击(OK 按钮)。
我们在下一步将在同一案例中继续添加另一个动作。
启用第二个文本框
1 添加启用部件动作
同一 Case 中通过点击 Focus 添加另一个动作。
2 指定 TextField2
勾选 TextField2 复选框。
3 不要点击 OK
我们还没完全完成这个 Case。下一步,我们将添加第三个动作。
第二个文本框设置 Focus
1 添加设置聚焦动作
在同一 Case 下通过点击 Focus 添加另一个动作。
2 指定 TextField2
勾选 TextField2 复选框。
3 复查所有动作
确定的所有动作如上图所示正确的显示出来。
4 点击 OK
点击 OK 按钮确认所有的改变。
当页面下载时设置聚焦 Text Field 1
1 添加一个 Case OnPageLoad
在下方“页面交互”选项双击 OnPageLoad 事件。
2 添加设置聚集动作
在最左侧列表选择动作 Focus。
3 指定 TextField1
在最右侧列表勾选 TextField1 复选框。
4 点击 OK
点击 OK 按钮确认所有改变。
预览原型
预览你的原型。注意当页面加载时第一个文本框已经聚焦。点击 Swap Focus 按钮禁用 Text Field 1,然后启用聚焦 Text Field 2。在浏览器中刷新页面将会重置一切。
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论