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

使用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”);

//使用工具对页面绘制相关流程步骤图形显示

Step(currentStep,stepListJson);

//回调函数

function mycall(restult){

// alert(“mycall”+e+“:“+);

Step(e,stepListJson);

//TODO…这里可以填充点击步骤的后加载相对应数据的代码

}

2、自定义皮肤修改

插件提供了两套皮肤科共选择如果不能满足您的要求，则自己编写CSS代码即可

html代码

复制代码 代码如下:

当前步骤：第步重新生成

//所有步骤的数据

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");

//使用工具对页面绘制相关流程步骤图形显示

Step(currentStep,stepListJson);

//回调函数

function mycall(restult){

// alert("mycall"+e+":"+);

Step(e,stepListJson);

//TODO...这里可以填充点击步骤的后加载相对应数据的代码

}

javascript代码

复制代码 代码如下:

/**

* @auther DangChengcheng 请保留作者

* @mailTo

*/

var Step_Tool_dc =function(ClassName,callFun){

sName=ClassName,

Fun=callFun,

s = new Array(),

AllHtml="";

}

Step_Tool_otype={

/**

* 绘制到目标位置

*/

createStepArray:function(currStep,stepListJson){

Step=currStep;

for (var i=0; i<th;i++){

var Step_Obj =new Step( Step,stepListJson[i]Num,stepListJson[i]Text,th);

Step_teStepHtml();

(Step_Obj);

}

},

drawStep:function(currStep,stepListJson){

r();

teStepArray(currStep,stepListJson);

if(th>0){

AllHtml+="

";

for (var i=0; i<th;i++){

AllHtml+=s[i]Code;

}

AllHtml+="";

jQuery("."+sName)(AllHtml);

teEvent();

} else{

jQuery("."+sName)("没有任何步骤");

}

},createEvent:function(){

var self=this;

jQuery("."+sName+" ul li a")k(function(){

var num=jQuery(this)("data-value");

var text=jQuery(this)("data-text");

result={value:num,text:text} ;

eval(Fun+"(result)");

});

}

,clear:function(){

s=new Array();

jQuery("."+sName)("");

AllHtml="";

}

}

var Step=function(currStep,StepNum,StepText,totalCount){

Step=currStep,

Num=StepNum ,

Text=StepText,

lCount=totalCount,

Code="";

}

otype={

createStepHtml:function(){

var stepHtml=""+Num+"";

stepHtml=stepHtml+""+Text+"";

if(Step>lCount){

Step=lCount;

}else if(Step<=0){Step=1;}

if(Step>Num&&Num==1){

classSype="firstFinshStep";

} else if(Step==Num&&Num==1){

classSype="firstFinshStep_curr1";

}

else if(Step==Num&&Step!=lCount){//当前步骤,下一个未进行,并且不是最后一个

classSype="coressStep";

}else if(Step==Num&&Num==lCount){//当前步骤 并且是最后一步

classSype="finshlast";

}else if(Step<Num&&Num==lCount){//未进行步骤,并且是最后一个

classSype="last";

} else if(Step<Num){//未进行的步骤

classSype="loadStep";

} else if(Step>Num){//已进行的步骤

classSype="finshStep";

}

stepHtml="

"+stepHtml+"";

Code=stepHtml;

}

}