JQuery-js-based webpage progress display plug-in

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:

Untitled document