Implement the webpage progress display plug-in based on jQuery
This article mainly introduces how to implement the webpage progress display plug-in based on jQuery and how to download the source code, which is very detailed and comes with two skins. We recommend this article to our friends.
I believe everyone has seen similar website functions. This form of progress display allows users to easily understand and operate,
The following is a plug-in test that provides two skins:
You can use js to flexibly generate progress bars for graphical display of some work progress.
1. Simple call
// Data of all steps
Var stepListJson = [{StepNum: 1, StepText: "Step 1 "},
{StepNum: 2, StepText: "Step 2 "},
{StepNum: 3, StepText: "Step 3 "},
{StepNum: 4, StepText: "Step 4 "},
{StepNum: 5, StepText: "Step 5 "},
{StepNum: 6, StepText: "Step 6 "},
{StepNum: 7, StepText: "Step 7"}];
// The current steps are up to the first step
Var currentStep = 5;
// A new tool class
Var StepTool = new Step_Tool_dc ("test", "mycall ");
// Use a tool to display the relevant process steps on the page
StepTool. drawStep (currentStep, stepListJson );
// Callback function
Function mycall (restult ){
// Alert ("mycall" + result. value + ":" + result. text );
StepTool. drawStep (result. value, stepListJson );
// TODO... Here we can fill in the code that loads the corresponding data after clicking the step.
}
2. Custom Skin Modification
The plug-in provides two sets of Dermatology options. If you cannot meet your requirements, write your own CSS code.
Html code
The Code is 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>
</Head>
<Body>
<Div class = "step_context test">
</Div>
Current step: Step <input type = "text" value = "5" id = "currentStepVal"/> <button onclick = "StepTool. drawStep (jQuery ('# currentStepVal '). val (), stepListJson); "type =" button "> regenerate </button>
</Body>
</Html>
<Script>
// Data of all steps
Var stepListJson = [{StepNum: 1, StepText: "Step 1 "},
{StepNum: 2, StepText: "Step 2 "},
{StepNum: 3, StepText: "Step 3 "},
{StepNum: 4, StepText: "Step 4 "},
{StepNum: 5, StepText: "Step 5 "},
{StepNum: 6, StepText: "Step 6 "},
{StepNum: 7, StepText: "Step 7"}];
// The current steps are up to the first step
Var currentStep = 5;
// A new tool class
Var StepTool = new Step_Tool_dc ("test", "mycall ");
// Use a tool to display the relevant process steps on the page
StepTool. drawStep (currentStep, stepListJson );
// Callback function
Function mycall (restult ){
// Alert ("mycall" + result. value + ":" + result. text );
StepTool. drawStep (result. value, stepListJson );
// TODO... you can fill in the Code for loading the corresponding data after clicking the step.
}
</Script>
Javascript code
The Code is as follows:
/**
* @ Auther DangChengcheng 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 the 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.createstephen TMl ();
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 =.html Code;
}
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.html Code = "";
}
Step. prototype = {
Createstephen TMl: function (){
Var Stephen TMl = "\ <span \>" + this. StepNum + "\ </span \> ";
. 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) {// The current step. The next step is not performed and is not the last one.
ClassSype = "coressStep ";
} Else if (this. currStep = this. StepNum & this. StepNum = this. totalCount) {// The current step and the last step
ClassSype = "finshlast ";
} Else if (this. currStep <this. StepNum & this. StepNum = this. totalCount) {// The last step is not performed.
ClassSype = "last ";
} Else if (this. currStep <this. StepNum) {// steps not performed
ClassSype = "loadStep ";
} Else if (this. currStep> this. StepNum) {// steps in progress
ClassSype = "finshStep ";
}
Stephen TMl = "\ <li class = \" "+ classSype +" \ "\>" + Stephen TMl + "\ </a \> ";
This.html Code = Stephen TMl;
}
}
The above is all the content of this article. I hope you will like it.
