相信大家都见过类似的网站功能,这种形式的进度显示可以很方便的让用户去理解和操作,
以下是插件的测试截图 ,提供了两个皮肤
使用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代码