jQuery实现网页进度显示插件方法.docx

jQuery实现网页进度显示插件方法jQuery实现网页进度显示插件方法使用js编写可以灵活的生成进度条方便进对一些工作进度进行图形显示1、简单的调用//所有步骤的数据varstepListJson=[{StepNum:1,StepText:“第一步”},{StepNum:2,StepText:"第二步"},{StepNum:3,StepText:"第三步"},{StepNum:4,StepText:"第四步"},{StepNum:5,StepText:"第五步"},{StepNum:6,StepText:"第六步"},{StepNum:7,StepText:"第七步"}];//当前进行到第几步varcurrentStep=5;//new一个工具类varStepTool=newStep_Tool_dc(“test”,“mycall”);//使用工具对页面绘制相关流程步骤图形显示StepTool.drawStep(currentStep,stepListJson);//回调函数functionmycall(restult){//alert(“mycall”+result.value+“:“+result.text);StepTool.drawStep(result.value,stepListJson);//TODO…这里可以填充点击步骤的后加载相对应数据的代码}2、自定义皮肤修改插件提供了两套皮肤科共选择如果不能满足您的.要求，则自己编写CSS代码即可html代码复制代码代码如下:当前步骤：第步重新生成//所有步骤的数据varstepListJson=[{StepNum:1,StepText:"第一步"},{StepNum:2,StepText:"第二步"},{StepNum:3,StepText:"第三步"},{StepNum:4,StepText:"第四步"},{StepNum:5,StepText:"第五步"},{StepNum:6,StepText:"第六步"},{StepNum:7,StepText:"第七步"}];//当前进行到第几步varcurrentStep=5;//new一个工具类varStepTool=newStep_Tool_dc("test","mycall");//使用工具对页面绘制相关流程步骤图形显示StepTool.drawStep(currentStep,stepListJson);//回调函数functionmycall(restult){//alert("mycall"+result.value+":"+result.text);StepTool.drawStep(result.value,stepListJson);//TODO...这里可以填充点击步骤的后加载相对应数据的代码}javascript代码复制代码代码如下:/***@autherDangChengcheng请保留作者*@[e-mail]*/varStep_Tool_dc=function(ClassName,callFun){this.ClassName=ClassName,this.callFun=callFun,this.Steps=newArray(),this.stepAllHtml="";}Step_Tool_dc.prototype={/***绘制到目标位置*/createStepArray:function(currStep,stepListJson){this.currStep=currStep;for(vari=0;i<stepListJson.length;i++){varStep_Obj=newStep(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>