数字角标的显示方法——JS+CSS 实现

Chelsey.Wang

本帖最后由各得其所好于 2022-5-29 00:11 编辑

日前参加了低代码赋能B2C应用实践的公开课 https://gcdn.grapecity.com.cn/forum.php?mod=viewthread&tid=147395&fromuid=68453

。对主讲人程福全经理的数字角标的实现方法很感兴趣。

它采用了JavaScript + CSS 方式进行实现。通过测试觉得比移动单元格位置的方法更方便、灵活，在此和大家共同学习。

实现效果如下动画：

实现方式：

在活字格设计器8.0中实现

相关文件：

1、JavaStrip 代码如下：

$(".message").append(`<div class="hint">${Forguncy.Page.getCell("cell").getValue()}</div>`);

复制代码

2、CCS 代码：

.hint {
font-size: 13px;font-weight: bolder;text-align: center;line-height: 18px; position: absolute; z-index: 99;
top: -5px; left: 80%;width: 18px;height: 18px;color: #fff;border-radius: 50%;background-color: #ff3324; }
.hint1 {
font-size: 13px;font-weight: bolder;text-align: center;line-height: 18px; position: absolute; z-index: 99;
top: -5px; right: 80%;width: 18px;height: 18px;color: #fff;border-radius: 50%;background-color: #ff3324; }

复制代码

工程文件

djs521720 · djs521720

谢谢分享

赛龙周 · 赛龙周

Aa金砂 · Aa金砂

哪里可以下载8.0版本

各得其所好 · 各得其所好

Aa金砂发表于 2022-5-31 11:06
哪里可以下载8.0版本

活字格8.0第二个预览版(8.0.1.0)今天公开试用！
https://gcdn.grapecity.com.cn/forum.php?mod=viewthread&tid=147259&fromuid=68453
(出处: 葡萄城产品技术社区)

scliudong · scliudong

谢谢分享，这个要是能做成插件就巴适了。

回复 · 137294886

谢谢分享

Aa金砂 · Aa金砂

各得其所好发表于 2022-5-31 13:47
活字格8.0第二个预览版(8.0.1.0)今天公开试用！
https://gcdn.grapecity.com.cn/forum.php?mod=viewthre ...

老师可以在7.0下做个demo吗

		自动登录	找回密码
密码			立即注册

[使用感受] 数字角标的显示方法——JS+CSS 实现