Simple and Practical jQuery Appointment Progress Bar

Add-ons

2026-07-26 01:08 4 次浏览 • 0 次下载 2.1KB

Plugin Description: A simple and practical jQuery appointment progress bar with minimal code and easy implementation.

Last Updated: 2019-12-15 22:48:18

Usage

Three external files are required: jquery.step.css, jquery-1.10.2.js, and jquery.step.min.js.

<link rel="stylesheet" type="text/css" href="css/jquery.step.css" />
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="js/jquery.step.min.js"></script>

html

<div class="main">
    <div id="step"></div>
    <div class="btns">
        <button id="prevBtn">Previous Step</button>
        <button id="nextBtn">Next Step</button>
        <button id="btn1">Go to Step 2</button>
        <button id="btn2">Go to Step 3</button>
    </div>
    <div class="info">index：<span id="index"></span></div>
</div>

var step1 = $("#step");
var index1 = $("#index");
 
step1.step({
    index1: 0,
    time: 500,
    title: ["Complete Application Form", "Upload Documents", "Pending Confirmation", "Confirmed", "Appointment Completed"]
});
 
index1.text(step1.getIndex());
 
$("#prevBtn").on("click", function() {
    step1.prevStep();
    index1.text(step1.getIndex());
});
 
$("#nextBtn").on("click", function() {
    step1.nextStep();
    index1.text(step1.getIndex());
});
 
$("#btn1").on("click", function() {
    step1.toStep(1);
    index1.text(step1.getIndex());
});
 
$("#btn2").on("click", function() {
    step1.toStep(2);
    index1.text(step1.getIndex());
});