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

通过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);
     })
})

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

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


📒 欢迎使用大屏云

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值