各得其所好 发表于 2022-5-29 00:11:26

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

本帖最后由 各得其所好 于 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 发表于 2022-5-31 08:23:17

:):)谢谢分享

赛龙周 发表于 2022-5-31 09:02:47

:hjyzw::hjyzw::hjyzw:

Aa金砂 发表于 2022-5-31 11:06:37

哪里可以下载8.0版本

各得其所好 发表于 2022-5-31 13:47:32

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 发表于 2022-5-31 18:49:05

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

137294886 发表于 2022-5-31 23:42:26

谢谢分享

Aa金砂 发表于 2022-6-8 07:53:46

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

老师 可以在7.0下做个demo吗
页: [1]
查看完整版本: 数字角标的显示方法——JS+CSS 实现