jQuery预约进度条简单实用

查看演示立即下载

插件描述：jQuery预约进度条简单实用，代码少调用非常简单。

更新时间：2019-12-15 22:48:18

使用方法

需要调用3个外部文件，它们分别是jquery.step.css，jquery-1.10.2.js，jquery.step.min.js

<link rel="stylesheet" type="text/css" href="css/jquery.step.css" />
<script src="/"></script>
<script src="js/jquery.step.min.js"></script>

html

<div class="main">
    <div id="step"></div>
    <div class="btns">
        <button id="prevBtn">上一步</button>
        <button id="nextBtn">下一步</button>
        <button id="btn1">跳到第二步</button>
        <button id="btn2">跳到第三步</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: ["填写申请表", "上传资料", "待确认", "已确认", "预约完成"]
});
 
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());
});

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效： bootstrap自定义手机贺卡模板（原创）
下一个特效： d3+jQuery股权穿透图(原创)