当前位置:Gxlcms > JavaScript > 基于jQuery实现网页进度显示插件_jquery

基于jQuery实现网页进度显示插件_jquery

时间:2021-07-01 10:21:17 帮助过:5人阅读

相信大家都见过类似的网站功能,这种形式的进度显示可以很方便的让用户去理解和操作,

以下是插件的测试截图 ,提供了两个皮肤

进度显示插件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代码即可

html代码

代码如下:

无标题文档