【乐吾乐大屏可视化组态编辑器】事件交互-导航

导航

在线使用：https://v.le5le.com/ 

支持点击图元，切换画面或跳转链接。

切换页面

① 分别新建两个方案页面，拖拽图元后，点击保存方案。网页路径会生成对应的id地址。

② 选择一个按钮控件，右侧选择“交互“面板，添加单击事件。动作类型选择打开视图，视图填写的另一个页面的id地址。另一个页面也是同样的操作。

③ 点击运行进入预览页面，查看结果。

项目地址：

页面1

页面2

跳转链接

① 拖拽一个按钮图元，右侧选择“交互”面板；添加交互事件，选择单击；动作类型选择“打开链接”，填写链接地址，可以选择当前页面打开还是新页面打开。

② 锁定画布，查看结果。

导航栏切换页面

选项卡参数可以查看文档：选项卡/多项选项卡(tab) ，通过文档得知,需要通过selectedKey判断选项卡选中了哪一页。你也可以换成菜单导航、或者一组按钮来替换选项卡，用户根据自己的实际需求选择。下面是三种方式实现导航切换页面：

1. 通过切换iframe的地址来实现切换页面的效果（图左上）。

      选中选项卡，在交互面板添加点击事件，具体配置的事件可查看下面的项目地址。此方式可以明显看出iframe有一个加载页面的过程。

2. 通过控制多个iframe页面的层级（zIndex）来达到效果（图右上）。

         此方式iframe的切换无加载过程，页面加载时就完成了加载，但是如果页面加载资源过多，可能会出现卡顿/加载出错。

3. 通过控制一组图元的显示/隐藏来达到效果（图左下）

       可以给同一页的图元设置相同的组，给tab配置事件,不同的tab页，控制不同组图元的显示/隐藏。我们在设计页面的时候也可以通过隐藏上一页图元来制作下一页的内容。

项目地址

导航栏切换页面