写点什么

脚本库详细说明 - 大屏云极简使用手册

作者:shulinwu
  • 2022 年 3 月 31 日
  • 本文字数:703 字

    阅读完需:约 2 分钟

 💡 大屏云(www.dapingyun.com)是一款制作可视化数据大屏的在线搭建工具服务,组件丰富,开箱即用,无需编码及导入数据,极大程度满足用户会议展览、业务监控等需求。

线上 demo 地址:https://demo.dapingyun.com

通过 js 脚本库的加入,大屏项目在 UI 交互方面,可以呈现更加丰富的时序、交互业务效果。

👉 本文以快速精简的方式对大屏云组件库的使用进行说明。

1、添加脚本库

在管理后台[资源库] - [脚本库]中,维护当前账户下的 js 脚本。如下:

其中所属项目、脚本标记、脚本代码 3 个属性进行说明如下:

  • 所属项目:表示将当前脚本添加至选中项目下

  • 脚本标记:设置脚本的名称,便于记忆

  • 脚本代码:以系统可支持的方式进行 js 代码编写,支持 jQuery

2、脚本示例

对初始化默认大屏的“累计数据”组件(也可以选择[指标类] - [LED 数字图]组件)为例,进行脚本编码,如下图:


我们的需求假定为:每次点击该组件后,随机显示数字。脚本代码如下:

//下面代码中的582452大需要根据当前的组建ID设置:$(document).delegate(".visual[component-id='582452']","click",function(){     $(this).find(".promotion_006_ele_num_item img").each(function(){         var num = Math.floor((Math.random() * 10));         var url = "https://h2hlgn.dapingyun.com/img/visual/web/component/promotion/006/"+num+".png"         $(this).attr("src",url);     })})
复制代码

上述脚本代码做了两项业务:组件事件绑定、循环随机替换数字,完成了我们的假定需求。

参照该简单示例,你可以根据实际的业务需求出发,编写出如何条件的脚本交互使用。

📒 欢迎使用大屏云

欢迎使用大屏云,有任何问题,请添加微信/QQ,谢谢。

微信:imshulinwu

QQ:246937882

发布于: 刚刚阅读数: 2
用户头像

shulinwu

关注

还未添加个人签名 2022.02.22 加入

还未添加个人简介

评论

发布
暂无评论
脚本库详细说明 - 大屏云极简使用手册_shulinwu_InfoQ写作平台