Based on jquery step progress bar source code sharing, jquery progress bar source code

Based on jquery step progress bar source code sharing, jquery progress bar source code

The progress bar code based on the jQuery webpage step process contains two jQuery step progress bar effects with different effects. As follows:

Download Online Preview source code

Html code:

<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> <script type =" text/javascript "> // 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 step var currentStep = 5; // a new tool class var StepTool = new Step_Tool_dc ("test", "mycall "); // use the tool to draw steps related to the page and display StepTool. drawStep (currentStep, stepListJson); // callback function mycall (restult) {// alert ("mycall" + result. value + ":" + result. text); StepTool. drawStep (result. value, stepListJson); // TODO... here you can fill in the Code for loading the corresponding data after clicking the step.} </script>

The above code is the jquery-based progress bar source code shared by xiaobian. I hope you will like it.