js下拉菜单栏跳转网页

js下拉菜单栏跳转网页导读在跟学员的交流中发现有一些同学对于西门子去切换页面这一块有些需求,并且提到了有时画面很多用传统按钮切换的方法但有很多不好排版。针对这个问题有没有一些好的其他的方式实现多画面的一个切换呢。那在这里给大家介绍另外一种方式是通过下拉栏去切换画面

导读

在跟学员的交流中发现有一些同学对于西门子去切换页面这一块有些需求,并且提到了有时画面很多用传统按钮切换的方法但有很多不好排版。针对这个问题有没有一些好的其他的方式实现多画面的一个切换呢。那在这里给大家介绍另外一种方式是通过下拉栏去切换画面。

js下拉菜单栏跳转网页

一、 前提条件

由于本篇文章主要介绍的是通过下拉栏切换对应画面,在本篇文章中本次示范的项目共有ABC三个画面其中除ABC的标识之外。通用的图形是放在模板中的。

1. 准备好你要切换的画面。

js下拉菜单栏跳转网页

二、 添加下拉栏及切换键

我们要完成画面的指定和切换的话,需要有对应的选择元件。这篇文章是针对通过下拉栏选择对应的画面按下切换键切换的方式。所以要添加下拉栏以及换件来方便我们后续进行操作。

1. 首先需要添加下拉栏及按钮(在本文章的演示项目中,由于三个画面都是使用几乎差不多的的,我直接在模板里面进行了设定,如果大家要在不同的画面里面不同呈现,可以使用同样方式分别到对应画面里面新建我们的下拉栏和画面方法是一致的)

js下拉菜单栏跳转网页

2. 添加下拉栏,我们注意选择文本列表和变量(在这里可以先新建具体设置看下面)。文本列表相当于我们下拉栏对应的选择项名字。下拉选项也就是选择画面选项。下拉栏选择到对应的选项,会使得变量里面的数字进行变化。以方便后面点击切换按钮时,根据变量里面的数字切换到对应画面。

js下拉菜单栏跳转网页

3. 在文本列表里面添加页面对应的文本以及匹配的数值,注意原本零数值的地方进行选择的缺省,因为画面页面编号是从1开始排序的,在这边我们画面a是1,画面b是2,画面c是3它都有对应的数字编号,那我们在这里要与它的数字编号对应上,后面添加事件时才能按照数字跳转到对应的画面。

js下拉菜单栏跳转网页

4. 查看画面编号可以到对应的画面的属性,在常规会显示编号,同时可以在这里调整画面编号。

js下拉菜单栏跳转网页

5. 变量也是要在变量列表里面进行新建的,这是内部进行跳转画面的变量用,可以直接使用内部变量,无需关联外部PLC。

js下拉菜单栏跳转网页

6. 说完下拉栏,其实我们还会有一个切换按钮,当我们下拉栏选择完成之后要按一下切换按钮,所以大家要添加切换按钮,我们按钮默认的话是没有写切换名字的,所以大家记得更改文本中的文字改成切换。(这里的名字可以自定义)

js下拉菜单栏跳转网页

7. 这是我们画面的初览ABC3个画面。由于有用到的是模板去做画面,所以公用部分在对应画面其实中是灰色部分,但在模拟运行的使用中不受影响。所以大家可以看到,在每个画面中都是有对应的功能实现的。

js下拉菜单栏跳转网页

三、 添加事件

我们前面画面添加下拉栏及切换键和设置完变量之后,就是如何让我们可以点击完切换按钮之后,根据下拉栏里面的选项去切换我们当前的页面。所以我们要在按钮这边添加事件,

1. 首先我们希望是在点击的时候去进行跳转,所以在事件中选择单击,然后在系统函数里面找到画面中的,我们需要用到的函数(ActivateScreenByNumber)。

js下拉菜单栏跳转网页

2. 添加完函数之后可以发现要填写的,大家可以点击画面编号,后面的选择我们刚刚的下拉栏对应的变量。目的就是让下拉栏里面选择的画面,它是有对应数字的。选择完成后,会把对应的数字给到变量里面去,这边的函数会根据变量类的数字,在按下按钮后跳到对应编号的画面中。

js下拉菜单栏跳转网页

设置完成后,就可以进行跳转了哦。

总结:

相信通过上面的介绍,大家已经掌握了。通过下拉栏去指定画面,我们按一下转换按钮切换的对应的跳转画面的操作方式。整个项目的实现方式其实就是下拉栏选项,它会匹配到对应的数字,那这个数字会给到我们按钮里面的系统函数,让系统函数按照数字跳转到对应编号的画面中。大家掌握这里的技巧,可以举一反三,在自己的项目中去应用。

注意:本篇文章是使用的是smart line v4配套的软件,但西门子的软件套路是类似的,其他触摸屏您可以借鉴同样方式进行尝试。

文章来源:技成培训网原创,作者:陈薪儒;未经授权禁止转载,违者必究!

2024最新激活全家桶教程,稳定运行到2099年,请移步至置顶文章:https://sigusoft.com/99576.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。 文章由激活谷谷主-小谷整理,转载请注明出处:https://sigusoft.com/15291.html

(0)
上一篇 2024年 5月 18日
下一篇 2024年 5月 18日

相关推荐

关注微信