登录/注册

首页 › 活字格专区 › 格友杂谈 › 查看内容

金牌服务用户

166 主题	1572 帖子	6520 积分

金牌服务用户

积分: 6520

34192
金币
166
主题
1572
帖子

最新发帖

[资源分享] 一种百分比的动态显示方式（进度）

讲师达人认证

悬赏达人认证

活字格认证

金牌服务用户 / 发表于：2019-11-20 17:49 / 查看：4660 / 回复：9

先看效果

1. 引入资源文件jqc.js到全局或者使用页面
2. 活字格内部设置
a. 说明：
i. 为了能够实时监听到值的变化，我们使用活字格内置的“文本框“类型单元格来作为展示模板
image.png680171508.png

image.png680171508.png

ii. 在页面上拉出一个“文本框”，并且命名为"progress"
image.png357714537.png

image.png357714537.png

iii. 为“文本框”progress配置代码
image.png730021972.png

image.png730021972.png

代码：

const p = Forguncy.Page
const progessValue = parseFloat(p.getCell('progress').getValue())
const width = $("[fgcname='progress']").css("width").split("px")[0]
const height = $("[fgcname='progress']").css("height").split("px")[0]
$("[fgcname='progress']:last").css("text-align", "right")
if ($("[fgcname='progress']")[1]) {
$("[fgcname='progress']:last").html((progessValue * 100) + "%")
//$("[fgcname='progress']:last").css(initial)
$("[fgcname='progress']:last").animate({
"width": (progessValue * width) + "px",
"backgroundColor": getColor(progessValue),
"border-radius": (height / 2) + "px",
"color": "white",
"line-height": height + "px",
"padding-right": "4px"
}, 800)
} else {
$("[fgcname='progress']").after($("[fgcname='progress']").clone())
$("[fgcname='progress']:last").empty()
$("[fgcname='progress']:last").html((progessValue * 100) + "%")
$("[fgcname='progress']:last").css("width", "0px")
//$("[fgcname='progress']:last").css(initial)
$("[fgcname='progress']:last").animate({
"width": (progessValue * width) + "px",
"backgroundColor": getColor(progessValue),
"border-radius": (height / 2) + "px",
"color": "white",
"line-height": height + "px",
"padding-right": "4px"
}, 400)
}
function getColor(value) {
let color = null
if (value <= 0.25) {
color = '#f63a0f'
} else {
if (value <= 0.5) {
color = "#f2b01e"
} else {
if (value <= 0.75) {
color = "#f2d31b"
} else {
color = "#86e01e"
}
}
}
return color
}

复制代码

iv. 为“文本框”progress赋值（为了动态展示，我们使用绑定字段的方式为其赋值）
image.png867669677.png

image.png867669677.png

2.68 KB, 下载次数: 191

一种百分比的现实方式.fgcc

90.91 KB, 下载次数: 346

评分

参与人数 2	金币 +2000	满意度 +5	收起理由
咖啡里		+ 5	赞一个!
Simon.hu	+ 2000		赞一个!

查看全部评分

收藏

回复

9 个回复

倒序浏览

Simon.hu
超级版主 / 发表于：2019-11-20 17:52:13 沙发

谢谢老板分享~

点我了解价格 & 预约官方技术顾问

回复 使用道具举报

夏雪冬阳
银牌会员 / 发表于：2019-11-20 17:53:14 板凳

本帖最后由夏雪冬阳于 2019-11-20 17:54 编辑

举个例子，用在什么场景下，类似于那种加载进度条吗

回复 使用道具举报

gaoshoucheng
金牌服务用户 / 发表于：2019-11-20 17:58:21 地板

蟹老板威武

让我们继续活在你的影子里

回复 使用道具举报

settings0
高级会员 / 发表于：2019-11-20 18:11:19 5^#

老蟹威武

回复 使用道具举报

咖啡里 
论坛元老 / 发表于：2019-11-20 18:20:59 6^#

谢总威武

回复 使用道具举报

imis.ltd
注册会员 / 发表于：2019-11-21 00:09:01 7^#

厅长V587

回复 使用道具举报

Simon.hu
超级版主 / 发表于：2019-11-21 19:15:12 8^#

必须的~

点我了解价格 & 预约官方技术顾问

回复 使用道具举报

137294886
金牌服务用户 / 发表于：2020-4-28 21:16:36 9^#

Simon.hu 发表于 2019-11-21 19:15
必须的~

谢总威武

回复 使用道具举报

Simon.hu
超级版主 / 发表于：2020-4-29 18:33:30 10^#

点我了解价格 & 预约官方技术顾问

回复 使用道具举报