I believe you have seen similar web site functions, this form of progress display can be very convenient for users to understand and operate,
The following is a screenshot of the plug-in's test, providing two skins
The use of JS writing can be flexible to generate a progress bar to facilitate the progress of some work graphics display
1, the simple call
Data for all steps
var steplistjson=[{stepnum:1,steptext: "First Step"},
{stepnum:2,steptext: "Step Two"},
{stepnum:3,steptext: "Step Three"},
{stepnum:4,steptext: "Step Fourth"},
{stepnum:5,steptext: "Step Fifth"},
{stepnum:6,steptext: "Step Sixth"},
{stepnum:7,steptext: "Seventh Step"}];
Current to the first few steps
var currentstep=5;
New A tool class
var steptool = new Step_tool_dc ("Test", "Mycall");
Use tools to draw related process steps to a page graphical display
Steptool.drawstep (Currentstep,steplistjson);
callback function
function Mycall (restult) {
Alert ("Mycall" +result.value+ ":" +result.text);
Steptool.drawstep (Result.value,steplistjson);
Todo... Here you can fill in the code after the click Step to load the corresponding data
}
2, Custom skin modification
The plugin provides two sets of dermatology to choose if you cannot meet your requirements, you can write your own CSS code
HTML code
Copy Code code as follows:
<title> Untitled Document </title>
<!--<link rel= "stylesheet" href= "Css/step-dc-style1.css"/>-->
<link rel= "stylesheet" href= "Css/step-dc-style1.css"/>
<script type= "Text/javascript" src= "/step-jquery-dc.js" ></script>
<script type= "Text/javascript" src= "Js/jquery.min.js" ></script>
<body>
<div class= "Step_context test" >
</div>
Current step: <input type= "Text" value= "5" id= "Currentstepval"/> Step <button onclick= "Steptool.drawstep (JQuery (' # Currentstepval '). Val (), Steplistjson); "type= button" > Regeneration </button>
</body>
<script>
Data for all steps
var steplistjson=[{stepnum:1,steptext: "First Step"},
{stepnum:2,steptext: "Step Two"},
{stepnum:3,steptext: "Step Three"},
{stepnum:4,steptext: "Step Fourth"},
{stepnum:5,steptext: "Step Fifth"},
{stepnum:6,steptext: "Step Sixth"},
{stepnum:7,steptext: "Seventh Step"}];
Current to the first few steps
var currentstep=5;
New A tool class
var steptool = new Step_tool_dc ("Test", "Mycall");
Use tools to draw related process steps to a page graphical display
Steptool.drawstep (Currentstep,steplistjson);
callback function
function Mycall (restult) {
Alert ("Mycall" +result.value+ ":" +result.text);
Steptool.drawstep (Result.value,steplistjson);
Todo... Here you can fill in the code after the click Step to load the corresponding data
}
</script>
JavaScript code
Copy Code code as follows:
/**
* @auther Dangchengcheng Please keep the author
* @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={
/**
* Draw to target location
*/
Createsteparray:function (Currstep,steplistjson) {
This.currstep=currstep;
for (var i=0; i<steplistjson.length;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+= "<ul>";
for (var i=0; i<this. steps.length;i++) {
This.stepallhtml+=this. Steps[i].htmlcode;
}
this.stepallhtml+= "</ul>";
JQuery ("." +this. ClassName). HTML (this.stepallhtml);
This.createevent ();
} else{
JQuery ("." +this. ClassName). HTML ("no Steps");
}
},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= "\<span\>" +this. stepnum+ "\</span\>";
stephtml=stephtml+ "\<a href=\" #\ "data-value=\" "+this". stepnum+ "\" data-text=\ "" +this. steptext+ "\" \> "+this. steptext+ "\</a\>";
if (This.currstep>this.totalcount) {
This.currstep=this.totalcount;
}else if (this.currstep<=0) {this.currstep=1;}
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) {//current step, next not done, and not last
Classsype= "Coressstep";
}else if (this.currstep==this. Stepnum&&this. Stepnum==this.totalcount) {//Current step and is the last step
Classsype= "Finshlast";
}else if (this.currstep<this. Stepnum&&this. Stepnum==this.totalcount) {//No steps were made, and the last
Classsype= "Last";
else if (this.currstep<this. Stepnum) {//Steps not performed
Classsype= "Loadstep";
else if (this.currstep>this. Stepnum) {//steps taken
Classsype= "Finshstep";
}
Stephtml= "\<li class=\" "+classsype+" \ "\>" +stephtml+ "\</a\>";
this.htmlcode=stephtml;
}
}
Attach source download HTTP://XIAZAI.JB51.NET/201503/YUANMA/STEP-JQUERY-DC (jb51.net). rar
The above is the entire content of this article, I hope you can enjoy.
