相信大家都看过类似的网站功能，这种形式的进度显示，用户很容易理解和操作。

下面是插件的测试截图，提供了两个皮肤。

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

1.简单的电话。

//所有步骤的数据var steplistson=[{ stepnum :1，steptext: "第一步" }，{stepnum33602，steptext: '第二步' }，{stepnum33603，steptext: '第三步' }，{stepnum:0。Text:' Step 4'}，{ StepNum:5，StepText3360' Step 5'}，{StepNum33606，StepText3360' Step 6'}，{StepNum33607，steptext : ' Step 7 ' }]；

//目前第一步是var currentStep=5；//新建一个工具类varstep tool=new step _ tool _ DC(“test”、“my call”)；//使用工具显示steptool。drawstep (currentstep，steplistjson)在页面上绘制相关的流程步骤；//回调函数my call(rest ult){//alert(" my call " result . value " : " result . text)；StepTool.drawStep(result.value，stepListJson)；//TODO…这里可以填写点击步骤后加载相应数据的代码}

2.定制皮肤修饰。

该插件提供了两套皮肤病学选项。如果不能满足要求，可以自己写CSS代码。

Html代码

复制代码如下：title无标题文档/标题！- link rel='样式表' href='css/step-dc-style1.css' /-link rel='样式表' href=' CSS/step-DC-style 1 . CSS '/脚本类型=' text/JavaScript ' src=' http :/step-jquery-DC . js/val()，steplistjson' 'type=' button ' regenerate/button/body/html script//所有步骤的数据var steplistson=[{ stepnum :1，steptext: '第一步' }，{stepnum33602，steptext3360 '第二步' }，{StepNum:3，StepText: '第三步' }，{stepnum33604，steptext: '第四步' }，{StepNum:5，step//目前第一步是var currentStep=5；//新建一个工具类varstep tool=new step _ tool _ DC(' test '，' my call ')；//使用工具显示steptool。drawstep (currentstep，steplistjson)在页面上绘制相关的流程步骤；//回调函数my call(rest ult){//alert(' my call ' result . value ' : ' result . text)；StepTool.drawStep(result.value，stepListJson)；//TODO.这里可以填写点击step }/script后加载相应数据的代码。

Javascript代码

复制代码代码如下：/*** @auther党成城请保留作者* @ mailTo[email protected]*/var Step _ Tool _ DC=fun(类名，callFun){ this .ClassName=ClassName，这个. callFun=callFun，这个.Steps=new Array()，this . stepall html=} Step _ Tool _ DC . prototype={/* * *绘制到目标位置*/createsteparray :函数(curr step，stepListJson){ this。当前步骤=当前步骤；for(var I=0；isteplistjson . lengthi){ var Step _ Obj=new Step(这个。当前步骤，步骤列表.StepNum，stepListJson[i].StepText，steplistjson。长度)；step _ Obj。createstehtml()；这个脚步。推送(Step _ Obj)；} }，drawStep:function(currStep，stepListJson){ this。clear()；this.createStepArray(currStep，stepListJson)；如果（这个脚步。长度0){ this。stepall HTMl=' ulfor(var I=0；我是。步长i ){ this.stepAllHtml=this .步骤[i].htmlCode}这。stepall html='/ul '；jQuery(' . '这个。类名)。html(这个。stepall HTMl)；这个。create event()；} else{ jQuery(' . '这个。类名)。html(")没有任何步骤');} }，create event : function(){ var self=this；jQuery('。'这个。类别名称保险商实验所阿利')。单击(function(){ var num=jQuery(this)).attr('数据值');var text=jQuery(这个)。attr(' data-text ')；结果={value:num，text : text }；eval(self.callFun '(结果)');});}，clear:function(){ this .步骤=新数组();jQuery('。'这个。类名)。html(" ")；this . stepall html=} } var Step=function(curr Step，StepNum，StepText，总计数){ this。当前步骤=当前步骤，这个.StepNum=StepNum，这个StepText=StepText，this.totalCount=totalCount，this.htmlCode=} step。prototype={ createthetml : function(){ var stephTMl=' span ' this .StepNum ' /span '；step TMl=step TMl ' a href= ' # ' data-value= '这个.StepNum ' '数据-文本= '这个.StepText '' '这个步骤TExT ' /a '；如果(这个。柯尔斯普思。总数){这个。currstep=这个。总计数；} else if(这个。curr step=0){这。curr步长=1；}如果(这个。柯尔斯普思。stepnumthis。stepnum==1){ class sype=' first finshstep '；} else if(this.currStep==this .StepNumthis。StepNum==1){ class sype=' first finshstep _ curr 1 '；} else if(this.currStep==this .StepNumthis.currStep！=this.totalCount){//当前步骤，下一个未进行，并且不是最后一个如果(this.currStep==this .StepNumthis。StepNum==这个。总计数){//当前步骤并且是最后一步如果(这。柯尔斯普思。stepnumthis。stepnum==这个。总计数){//未进行步骤，并且是最后一个last} else if(this .柯尔斯普思。stepnum){//未进行的步骤classSype=' loadStep} else if(这。柯尔斯普思。stepnum){//已进行的步骤class sype=' finshStep } StepTMl=' Li class sype ' ' StepTMl ' /a '；这个。html COde=Stephetml}}

附上源码下载http://夏哉。JB 51。net/201503/马援/step-jquery-dc(jb51.net).压缩包

以上就是本文的全部内容了，希望大家能够喜欢。