js网页进度显示插件step-jquery-dc（原创）

最新推荐文章于 2023-07-12 07:07:16 发布

weixin_33978044

最新推荐文章于 2023-07-12 07:07:16 发布

阅读量380

点赞数

文章标签：前端 javascript ViewUI

原文链接：https://my.oschina.net/youa/blog/139072

版权

为什么80%的码农都做不了架构师？>>>

相信大家都见过类似的网站功能，这种形式的进度显示可以很方便的让用户去理解和操作，以下是插件的测试截图，提供了两个皮肤

进度显示插件js

进度展示插件皮肤1

进度展示插件皮肤2

使用js编写可以灵活的生成进度条方便进对一些工作进度进行图形显示

1、简单的调用 //所有步骤的数据 var stepListJson=[{StepNum:1,StepText:"第一步"}, {StepNum:2,StepText:"第二步"}, {StepNum:3,StepText:"第三步"}, {StepNum:4,StepText:"第四步"}, {StepNum:5,StepText:"第五步"}, {StepNum:6,StepText:"第六步"}, {StepNum:7,StepText:"第七步"}];

//当前进行到第几步 var currentStep=5; //new一个工具类 var StepTool = new Step_Tool_dc("test","mycall"); //使用工具对页面绘制相关流程步骤图形显示 StepTool.drawStep(currentStep,stepListJson); //回调函数 function mycall(restult){ // alert("mycall"+result.value+":"+result.text); StepTool.drawStep(result.value,stepListJson); //TODO...这里可以填充点击步骤的后加载相对应数据的代码 } 2、自定义皮肤修改插件提供了两套皮肤科共选择如果不能满足您的要求，则自己编写CSS代码即可

代码查看和下载

转载于:https://my.oschina.net/youa/blog/139072