找回密码
 立即注册

QQ登录

只需一步,快速开始

phoben 讲师达人认证 悬赏达人认证 活字格认证
论坛元老   /  发表于:2020-3-5 05:17  /   查看:13980  /  回复:35
本帖最后由 phoben 于 2020-3-5 05:36 编辑

发现活字格没有进度条插件,我也不会制作插件(太麻烦)
就把bootstrap上的进度条拿过来了
还不会用的童鞋,可以拿去研究下!
主要用CSS实现效果,JS控制数据。JS纯手写,大家支持下!

效果预览

效果预览



使用方法



1、给单元格设置类名为: progress;

2、在单元格内直接填写参数,逗号隔开;

3、上传CSS和JS,运行!

参数格式: 数据,样式,显示文字   

单元格内像这样填写字符串即可:0.4,bg-success,true

参数1(0.4):填写进度条比例,2位小数

参数2(bg-success):填写样式颜色的名称(bg-success   bg-info   bg-warning    bg-danger  空格为默认的蓝色 )

参数3(true):是否显示文字(true或false)


特别说明:

·如果需要和演示效果一样,在页面内实时修改进度条数据,需要给单元格再设置一个名称,修改的JS一并在附件里!

·参数二还支持两个特殊参数  progress-bar-striped (底纹)      progress-bar-animated (动画)

·JS内有一些DOM操作,介意的请谨慎使用!




设计器

设计器

设计器


JS源码

JS源码

JS源码

JS CSS 实例工程.zip (160.41 KB, 下载次数: 420)
工程实例使用6.0测试版做的











评分

参与人数 1金币 +2000 收起 理由
Simon.hu + 2000 很给力!

查看全部评分

35 个回复

正序浏览
mfkpie8
银牌会员   /  发表于:2022-7-13 10:22:27
36#
https://gcdn.grapecity.com.cn/showtopic-87343-1-1.html  这个也不错都谢谢大佬
回复 使用道具 举报
137294886
金牌服务用户   /  发表于:2022-4-25 00:06:15
35#
感谢大佬分享
回复 使用道具 举报
幻绯之舞
注册会员   /  发表于:2022-4-24 22:08:18
34#
这是高手!
回复 使用道具 举报
phoben讲师达人认证 悬赏达人认证 活字格认证
论坛元老   /  发表于:2022-4-24 21:21:56
33#
linshunliu 发表于 2022-4-23 20:49
好像上传附件css文件后,所有单元格文字不能上下居中,有点偏上,版本是7.1

已经有相应插件,不建议用此方法
回复 使用道具 举报
linshunliu
中级会员   /  发表于:2022-4-23 20:49:13
32#
本帖最后由 linshunliu 于 2022-4-23 20:51 编辑

好像上传附件css文件后,所有单元格文字不能上下居中,有点偏上,版本是7.1
上下没有居中.png
回复 使用道具 举报
秋夜
初级会员   /  发表于:2022-3-24 09:40:03
31#
感谢大佬分享
回复 使用道具 举报
遇见未知的自己
银牌会员   /  发表于:2021-11-16 08:31:05
30#
感谢分享
回复 使用道具 举报
vickdracula活字格认证
中级会员   /  发表于:2021-11-15 17:06:09
29#
就喜欢免费的
回复 使用道具 举报
qq8009活字格认证
银牌会员   /  发表于:2021-11-15 13:47:31
28#
不错不错 ,学习一下
回复 使用道具 举报
1234下一页
您需要登录后才可以回帖 登录 | 立即注册
返回顶部