相信大家都见过类似的网站功能，这种形式的进度显示可以很方便的让用户去理解和操作，
以下是插件的测试截图 ，提供了两个皮肤
使用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代码
复制代码 代码如下:
无标题文档
当前步骤：第步 重新生成
javascript代码
复制代码 代码如下:
/**
 * @auther dangchengcheng 请保留作者
 * @mailto dc2002007@163.com
 */
var step_tool_dc =function(classname,callfun){
    this.classname=classname,
    this.callfun=callfun,
    this.steps = new array(),
    this.stepallhtml=;
}
step_tool_dc.prototype={
    /**
     * 绘制到目标位置
     */
     createsteparray:function(currstep,steplistjson){
        this.currstep=currstep;
            for (var i=0; i            var  step_obj =new step( this.currstep,steplistjson[i].stepnum,steplistjson[i].steptext,steplistjson.length);
                step_obj.createstephtml();
                this.steps.push(step_obj);
            }
        },
    drawstep:function(currstep,steplistjson){
        this.clear();
        this.createsteparray(currstep,steplistjson);
        if(this.steps.length>0){
        this.stepallhtml+=;
        for (var i=0; i            this.stepallhtml+=this.steps[i].htmlcode;
        }
        this.stepallhtml+=;
        jquery(.+this.classname).html(this.stepallhtml);
            this.createevent();
         } else{
            jquery(.+this.classname).html(没有任何步骤);
        }
    },createevent:function(){
        var self=this;
        jquery(.+this.classname+ ul li a).click(function(){
            var num=jquery(this).attr(data-value);
            var text=jquery(this).attr(data-text);
            result={value:num,text:text} ;
            eval(self.callfun+(result));
        });
    }
    ,clear:function(){
        this.steps=new array();
        jquery(.+this.classname).html();
        this.stepallhtml=;
    }
}
var step=function(currstep,stepnum,steptext,totalcount){
        this.currstep=currstep,
        this.stepnum=stepnum ,
        this.steptext=steptext,
        this.totalcount=totalcount,
        this.htmlcode=;
}
step.prototype={
    createstephtml:function(){
         var stephtml=\+this.stepnum+\\>;
        stephtml=stephtml+\+this.steptext+\\>;
        if(this.currstep>this.totalcount){
            this.currstep=this.totalcount;
        }else if(this.currstep        if(this.currstep>this.stepnum&&this.stepnum==1){
            classsype=firstfinshstep;
        } else if(this.currstep==this.stepnum&&this.stepnum==1){
            classsype=firstfinshstep_curr1;
        }
       else if(this.currstep==this.stepnum&&this.currstep!=this.totalcount){//当前步骤,下一个未进行,并且不是最后一个
            classsype=coressstep;
        }else  if(this.currstep==this.stepnum&&this.stepnum==this.totalcount){//当前步骤 并且是最后一步
            classsype=finshlast;
        }else if(this.currstep            classsype=last;
        } else if(this.currstep            classsype=loadstep;
        } else if(this.currstep>this.stepnum){//已进行的步骤
            classsype=finshstep;
        }
        stephtml=\+stephtml+\\>;
        this.htmlcode=stephtml;
    }
}
附上源码下载 http://xiazai.jb51.net/201503/yuanma/step-jquery-dc(jb51.net).rar
以上就是本文的全部内容了，希望大家能够喜欢。